ember-leaflet drag point to latlng - ember.js

on my polygon 'dragend' function i get the new position via (e.target._newPos) that represents the position on my layer.
But when i convert that point as follows:
let containerPoint = layer._map.layerPointToContainerPoint(e.target._newPos);
let latlng = layer._map.containerPointToLatLng(containerPoint);
i get some coordinates that's what i want. But when i try to present them on my leaflet map layer an zoomin or out that point jumps on my map so wtf is going on?
import PolygonLayer from 'ember-leaflet/components/polygon-layer';
.
.
.
draggable.on('dragend', (e) => {
let containerPoint = layer._map.layerPointToContainerPoint(e.target._newPos);
let latlng = layer._map.containerPointToLatLng(containerPoint);
let dragEnd = this.get('onDragEnd');
dragEnd(latlng);
});

In my template i have a presentation of a map
items: {},
i have a item component
didRender() {
let layer = this.get('_layer');
let path = layer && layer._path;
if (!path) {
return;
}
let draggable = new L.Draggable(path);
draggable.enable();
draggable.on('dragend', (e) => {
let containerPoint = layer._map.layerPointToContainerPoint(e.target._newPos);
let latlng = layer._map.containerPointToLatLng(containerPoint);
let dragEnd = this.get('onDragEnd');
dragEnd(latlng);
});
},
so onDragEnd i will update the dragged items position with new latlngs but after my update the item is jumping on map

Related

Leaflet remove current marker and add a new one on click

I'm currently routing to a marker, but I want to be able to choose another route and the current marker will then be rerouted.
Image one shows the current routing.
On click of the 'Route to here' button the current marker must be removed and replaced with the new marker.
Image current routing
OnClick this should remove the current marker and add a new marker
function showPosition(position)
{
//Set the map view to be the users location
//
var map = L.map('map').setView([position.coords.latitude, position.coords.longitude], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
//Change the users marker to a unique red & show users location on click
//
L.marker([position.coords.latitude, position.coords.longitude], {
icon: L.AwesomeMarkers.icon({prefix: 'fa', markerColor: 'red'})
}).addTo(map).bindPopup("<b>Your location: </b>" + position.coords.latitude + "," + position.coords.longitude);
//Routing users location to the desired route
//
L.Routing.control({
waypoints: [L.latLng(users_lat_coords, users_lng_coords), L.latLng(x, y)],
lineOptions: {addWaypoints: false}
}
).addTo(map);
}
The developer of the leaflet routing machine library is still working on the code to achieve this, so a workaround was done. If a route has previously been made, I splice the waypoint and add a new one in.
var routing ='';
var been_routed=false;
function route_to_station(point_lat_coords, point_lng_coords, x1, y1) {
users_lat_coords = point_lat_coords;
users_lng_coords = point_lng_coords;
x = x1;
y = y1;
if (x !== '') {
if (been_routed === true) {
routing.spliceWaypoints(0, 1);
}
routing = L.Routing.control({
waypoints: [L.latLng(users_lat_coords, users_lng_coords), L.latLng(x, y)],
lineOptions: {addWaypoints: false}
}
);
routing.addTo(map);
been_routed = true;
}
}

comparing loop element to the name of the UIbutton pressed inside the buttonpressed function

I am looping through an array of string arrays. I am comparing the element at index 0 to the title of the button pressed on the page(ideally). But I am getting an Unresolved Identifier error, which means I am doing something wrong. How Can I compare the element in the loop to the title of the button made programatically on the page. Here is my code! The issue is with the function at the bottom, in the if statement that is in the for loop. I don't know how to say 'if this index position of the element is equal too the title of the button pressed'.
import UIKit
import AVKit
import AVFoundation
class ViewController: UIViewController {
var songArray: [Array<String>] = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//connect to website
let url = URL(string:"*******")
let task = URLSession.shared.dataTask(with: url!) { (data, response, error) in
if error != nil
{
print("error")
}
else
{
if let content = data
{
do
{
//download JSON data from php page, display data
let JSON = try JSONSerialization.jsonObject(with: content, options: JSONSerialization.ReadingOptions.mutableContainers) as! [[String]]
print(JSON)
//Make buttons with JSON array
var buttonY: CGFloat = 20
for song in JSON {
self.songArray.append(song)
let SongButton = UIButton(frame: CGRect(x: 50, y: buttonY, width: 250, height: 30))
buttonY = buttonY + 50 // 50px spacing
SongButton.layer.cornerRadius = 10 //Edge formatting for buttons
SongButton.backgroundColor = UIColor.darkGray //Color for buttons
SongButton.setTitle("\(song[0])", for: UIControlState.normal) //button title
SongButton.titleLabel?.text = "\(song[0])"
SongButton.addTarget(self,action: #selector(self.songButtonPressed(_:)), for: UIControlEvents.touchUpInside) //button press / response
self.view.addSubview(SongButton) // adds buttons to view
}
}
catch
{
}
}
}
}
task.resume()
print(songArray)
}
func songButtonPressed(_ sender:UIButton!) { // function for buttons
for song in songArray {
if "\(song[0])" == SongButton.titleLabel?.text {
let URL = NSURL(string: "\(song[1])")
let player = AVPlayer(url: URL! as URL)
let playerLayer = AVPlayerLayer(player: player)
playerLayer.frame = self.view.bounds
self.view.layer.addSublayer(playerLayer)
player.play()
}
}
}
}
My train of thought is to loop through the array of arrays, compare index position 0 to all button titles on the page, and if it matches, plus index position 2 into the AV player. Thanks for any help or advice on the logic behind my code, I am a beginner and I know this level of programming is a bit over my head
It's most likely
for song in songArray {
// the string interpolation "\()" is redundant
if song[0] == sender.titleLabel?.text { ... }
or maybe
if song[0] == sender.title { ... }
SongButton is not related to the action method.

How can i add additional Data(Type) to chart.js

i had already done adding a click handler to each Segment of my doughnut chart with adding the following Code :
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var chartelementid = activePoints[0].label;
alert(chartelementid);
//$('.details div').css("display", "none");
//$('#' + chartelementid).show();
}
);
This works fine, when finished it should display an additional Div with Details for this segment.
Unfortunality my labels are more then just Single Words, so i'm struggeling to create div ID's with the same name...
My Idea is to add to every Segment an additional Data like value,label, etc. so it could be an ID. but if i just add the ID information to the Segment it will not exist as variable.
Add DataType:
var dataImprove = [
{
value: 30,
color:"#001155",
highlight: "#1c2f7c",
label: "KnowHow Erhalt / Transfer & Aufbau",
id:"test"
}
]
where can i add in chart.js an additional dataType like shown above my ID to be accessible in the DOM?
kind regards Marco
As an alternative pass a JSON string as your label, then intercept to render. For example:
var canvas = document.getElementById(id);
var d = canvas.getContext("2d");
var chart = new Chart(d).Pie(json, {
segmentStrokeWidth: 1,
tooltipTemplate: "<%=label%>", //default the label
customTooltips: function (tooltip) {
// Hide if no tooltip
if (!tooltip) {
return;
}
var tooltipObj = JSON.parse(tooltip.text);
// etc
already found : between line 999 and 1023 in chart.js before drawing - i've added the line
id: ChartElements[0].id,
so the Data with the name ID is in the DOM avaiable.

Dojo: set store for template filteringselect

in order to get familiar with dojo I'm working on a test project which consists of the following components:
data grid (created declaratively), filled with JSON data; clicking on a line will open a dialog containing a form (works)
form (created from template), with several input fields, filled with data from the grid store (works)
FilteringSelect (part of form) (doesn't work, no content)
The FilteringSelect contains dynamic data. In order to keep data traffic low, I thought it wise to get this data when the whole page is loaded and to pass it into the template initialization function.
In fact, I don't really know how to assign the store to the FilteringSelect.
Any help would be greatly appreciated.
Here's my code. I shorten it to the what I consider relevant parts so that it's easier to understand.
Grid Part:
var data_list = fetchPaymentProposalList.fetch();
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout
});
// store for FilteringSelect
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryList
});
return {
// function to create dialog with form
instantiate:
function(idAppendTo) {
/*append the new grid to the div*/
grid.placeAt(idAppendTo);
/*Call startup() to render the grid*/
grid.startup();
grid.resize();
dojo.connect(grid, "onRowClick", grid, function(evt) {
var rowItem = this.getItem(evt.rowIndex);
var itemID = rowItem.id[0];
var store = this.store;
var paymentProposalForm = new TmpPaymentProposalForm();
paymentProposalForm._init(store.getValue(rowItem, "..."), ..., beneficiaryListStore);
});
}
};
The beneficiarylist comes as something like this:
return { 12: { id : 1, name : "ABC" }};
The FilteringSelect in the template looks like this:
<input data-dojo-type="dijit/form/FilteringSelect" name="recipient" id="recipient" value="" data-dojo-props="" data-dojo-attach-point="recipientNode" />
Template Init Code looks like this:
_init: function(..., beneficiaryListStore) {
this.recipientNode.set("labelAttr", "name");
this.recipientNode.set("searchAttr", "name");
// here should come the store assignment, I guess???
var dia = new Dialog({
content: this,
title: "ER" + incoming_invoice,
style: "width: 600px; height: 400px;"
});
dia.connect(dia, "hide", function(e){
dijit.byId(dia.attr("id")).destroyRecursive();
});
dia.show();
}
For anyone who's interested, here's my solution:
var beneficiaryList = FetchBeneficiaryList.fetch();
var beneficiaryData = {
identifier : "id",
items : []
};
for(var key in beneficiaryList)
{
if(beneficiaryList.hasOwnProperty(key))
{
beneficiaryData.items.push(lang.mixin({ id: key }, beneficiaryList[key]));
}
}
var beneficiaryListStore = new Memory({
identifier : "id",
data : beneficiaryData
});
That did the trick

problem with my tableView GROUPED

Here I have a problem with my tableView I want to insert text into each row of the table
can you help me please
here is the code
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('white');
// create tab group
var tabGroup = Titanium.UI.createTabGroup({
});
// create base UI tab and root window
var win1= Titanium.UI.createWindow({
title:'',
tabBarHidden: true,
barColor:'black',
backgroundColor:'white'
});
var tab= Ti.UI.createTab({
title:'Connexion ',
window:win1
});
//
// This is a test that is meant to verify that a row object can have a header
// and the table view has no table view header - the header should be displayed
var win = Titanium.UI.currentWindow;
var inputData = [
{title:'Pseudo/email :', header:'Connexion ......'},
{title:'Password :'},
{title:'Créer votre compte',hasChild:true, header:'not yet registered ?'},
];
var tableView = Titanium.UI.createTableView({
data:inputData,
style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
win1.add(tableView);
tabGroup.addTab(tab);
// open tab group-----------------------------------------
tabGroup.open();
win1.open();
that's what I did right now but I have a problem with the title of my table and then I add another table.
there are also some ouci with the cursor which moves in the mid-line titles
here is the code
var win1= Titanium.UI.createWindow({
title:'',
tabBarHidden: true,
barColor:'black',
backgroundColor:'white'
});
var view = Titanium.UI.createView({
backgroundColor: "#FFFEEE"
});
var row1 = Ti.UI.createTableViewRow({
height:'auto',
selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label1 = Titanium.UI.createLabel({
text:'Pseudo/e-mail :',
left: 10
});
var usernametf = Ti.UI.createTextField({
left: 100,
right:10,
//hintText: 'Pseudo/email :',
//textAlign:"right",
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
var row2 = Ti.UI.createTableViewRow({
height:'auto',
selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label2 = Titanium.UI.createLabel({
text:'Mot de passe :',
left: 10
});
var passwordtf = Ti.UI.createTextField({
left: 100,
//textAlign:"right",
//hintText: 'password',
right:30,
passwordMask:true,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
row1.add(label1);
row1.add(usernametf);
row2.add(label2);
row2.add(passwordtf);
var data = [row1,row2];
var table = Ti.UI.createTableView
({
data:data,
style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
view.add(table);
win1.add(view);
win1.open();
I let you know that I really began with Appcelerator
Is there any reason why you wouldn't just use textfields? You could then just grab the values on button press and insert.
Kitchen Sink example link
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/textfield_events.js
Another example of a screen like this would be the Tweetanium App https://github.com/appcelerator/tweetanium
Whether you use textfields or tableviews there are several ways to work with the Ti Database object.
Two common ways would be:
1) You can loop through your inputData object and insert. Below are a few examples.
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/database_2.js
https://github.com/appcelerator/titanium_mobile/blob/master/demos/KitchenSink/Resources/examples/database_3.js
2) You can use the tableview object itself or a wrapper similar to this example https://github.com/kwhinnery/Persistence
I would recommend using textfields if possible.