We Keep Coding

Update Leaflet Marker

it's about leaflet marker on angular 5 , the marker value is dynamic and I need to draw just the last result. How can I do it please?
var markers;
markers = new L.LayerGroup().addTo(myfrugalmap);
let timer = TimerObservable.create(0, 10000);
this.subscription = timer.subscribe(t => { this.MyService.Localize().subscribe( result => {
this.positions = result;
let xpo = this.positions.x;
let ypo = this.positions.y;
let mar=L.marker([xpo,ypo], {icon: greenIcon}) mar.addTo(markers) });
//markers.clearLayers();
} )
in result (without (markers.clearLayers)) I have evry 10 second the new position on the map and I need to drop the old positions and the see just the last

Did you try clearing before you added the newly created marker to the layer? Your last few lines would look something like this.
let mar=L.marker([xpo,ypo], {icon: greenIcon});
markers.clearLayers();
mar.addTo(markers);

Leaflet and Turf.js Points within poly

I have a simple map with 17 points (GeoJSON) in leaflet, and using the draw tool, I create a polygon to use to select the points within th polygon.
map.on('draw:created', function (e) { //from draw tool
var type = e.layerType,
layer = e.layer;
editableLayers.addLayer(layer);
GetSelection(editableLayers);
});
function GetSelection(layer){
var count = allPoints.getLayers().length;
console.log(count +" Sites"); //says 17
var drawList = editableLayers.getLayers().length;
console.log(drawList +" Polys"); //Says 1
if (editableLayers.getLayers().length >0){
var fcpt = turf.featurecollection(allPoints);
console.log(fcpt); // says 17
var fcpoly = turf.featurecollection(editableLayers);
console.log(fcpoly); // fails as undefined
//var ptsWithin = turf.within(fcpt,editableLayers);
var ptsWithin = turf.within(fcpt,fcpoly);
console.log(ptsWithin); //never gets this far.
};
};
Any ideas or suggestions?

turf.featurecollection expects an array of GeoJSON Features, not a Leaflet Layer Group like your allPoints and editableLayers variables.
Similarly, turf.within expects 2 GeoJSON Feature Collections as arguments, not Leaflet Layer Groups.
So you could probably try directly:
var ptsWithin = turf.within(allPoints.toGeoJSON(), editableLayers.toGeoJSON());

#ghybs was right, it was a difference between Leaflet and turf, while the points were OK, the polygon did not come over. Passing turf the GeoJson the polygon info allowed it to work.
Working copy:
map.on('draw:created', function (e) {
featureGroup.clearLayers();
layer = e.layer;
featureGroup.addLayer(layer);
GetSelection(featureGroup);
});
function GetSelection(layer){
var shape2 = allPoints.toGeoJSON() //All facilities
var ptsWithin = turf.within(shape2, layer.toGeoJSON());
alert('Found ' + ptsWithin.features.length + ' features');
alert("results "+JSON.stringify(ptsWithin));
};

Google Maps Api getting the title from the marker

When I push a marker to the array it plots the marker correctly and adds a title to the array too.
I know this works because when I console.log the console.log(markersArray); it returns the following. the title of the marker is next door.
The below is my marker click that opens up the info window, but when I console.log out the data which is called mll it doesn't have the title inside it.
google.maps.event.addListener(marker, 'click', function(mll) {
console.log(mll);
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>"+mll+"</p></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
});
How would I be able to get the click function to pull in the title when the array has it and has pushed it successfully?

I remember doing something similar before. In my case, I used infoWindows with circle markers. Essentially, I had both in separate arrays. When I made the circle marker, I gave it a unique value, called place, which was basically it's count (the value of the n-th circle created, was n). On the event listener, I called the infoWindow from the other array based on the position of the current circle.
You can make an array var titles = []; to hold titles.
Each time you make a new marker, increment a var count = 0;, keeping track of how many markers you have.
In your marker options, add place: count. When you need a specific title, you can call titles[marker.place];
var infos = [];
var count = 0;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lastWindow;
count++;
var populationOptions = {
//leaving out defaults
place: count
};
var circle = new google.maps.Circle(populationOptions);
lastCircle = circle;
var contentString = 'just a string...';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: new google.maps.LatLng(data.lon, data.lad)
});
infos.push(infowindow);
google.maps.event.addListener(circle, 'mouseover', function() {
if(lastWindow){
lastWindow.close();
}
infos[circle.place].open(map);
lastWindow = infos[circle.place];
});

Help with Arrays and the Google Maps API

I have a google maps api function place markers which I'm using from the tutorial found here:Google Maps API with JQuery
By any means, I had to modify the javascript to account for my application. I'm pulling markers from an XML file like before, though this time I'm getting multiple requests, and multiple standard deviation, time to serve, and means for these requests. I've set up the XML to have these with a counter appended to the tag, but it looks like it's not rendering into an array correctly.
To note, I've never used Javascript, and am mostly flying by the seat of my pants on this, so if it's an atrocity of Javascript, feel free to let me know, the entire generation of the XML is in Python.
Sample of the XML: (I apologize, I don't know how to show < or > on stack overflow without it simply hiding it as a tag. Around each "markers" "marker" "name" "requestX" "timetoserveX" etc. is the < and > for tags in XML.
markers
marker
name Simpletown, CA /name
request0 /resource/ /request0
timetoserve0 .001 Seconds to serve request /timetoserve0
mean0 .5309 Mean in seconds /mean0
std_dev0 .552 Standard Deviation in Seconds /std_dev0
request1 /resource2/ /request1
timetoserve1 0.015626 Seconds to serve request /timetoserve1
mean1 0.0011 Mean in seconds /mean1
std_dev1 0.004465 Standard Deviation in Seconds /std_dev1
/marker
/markers
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var count = 0;
var requeststring = 'request' + Integer.toString(count)
var request = new Array();
var timetoserve = new Array();
var mean = new Array();
var std_dev = new Array();
var timetoservestring = 'timetoserve' + Integer.toString(count);
var meanstring = 'mean' + Integer.toString(count);
var std_devstring = 'std_dev' + Integer.toString(count);
while ($(this).find(requeststring).text()){
timetoservestring = 'timetoserve' + Integer.toString(count);
meanstring = 'mean' + Integer.toString(count);
std_devstring = 'std_dev' + Integer.toString(count);
request[count] = $(this).find(requeststring).text();
timetoserve[count] = $(this).find(timetoservestring).text();
mean[count] = $(this).find(meanstring).text();
std_dev[count] = $(this).find(std_devstring).text();
count++;
requeststring = 'request' + Integer.toString(count)
}
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html = ""
for (i=0;i<count;i++){
html=html+'<strong>'+name+'</strong.><br />'+request[i]+'<br />'+timetoserve[i]+'<br />'+mean[i]+'<br />'+std_dev[i]+<br />;
//var html='<strong>'+name+'</strong.><br />'+request+'</strong.><br />'+timetoserve+'</strong.><br />'+mean+'</strong.><br />'+std_dev;
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
With the updates, it's not longer having the array issues it looks like, even though I am getting the map to render at this point. The "Show Markers" button is not populating the map with markers. Running FireBug with this seems to only spew endless amounts of "Break on error" hits and warnings for jQuery.

var request[count] = $(this).find(requeststring).text();
var timetoserve[count] = $(this).find(timetoservestring).text();
var mean[count] = $(this).find(meanstring).text();
var std_dev[count] = $(this).find(std_devstring).text();
to
request[count] = $(this).find(requeststring).text();
timetoserve[count] = $(this).find(timetoservestring).text();
mean[count] = $(this).find(meanstring).text();
std_dev[count] = $(this).find(std_devstring).text();
-assuming these are the arrays that are not working correctly for you.
If I may make a suggestion (RE your comment this morning):
while ($(this).find(requeststring).text()){
//...omitted
}
if you were to rename all your tags to the same thing and give them an id attribute (which is valid in xml) you can do this:
var requests = $(this).find('request');
var timetoserves = $(this).find('timetoserve');
// etc...
for (var i=0; i<requests.length; i++) {
request[i] = requests.eq(i).text();
timetoserve[count] = timetoserves.eq(i).text();
//etc...
}
which would probably provide better performance.

Google Maps API: Create a store locator

Today I am trying to make a store locator using google maps' api.
The store locator is to be set up like so:
two areas, one with a map containing all the stores in a given area (measured in a selectable radius from a center point), and one area with a list of all the stores on the map, their information, and of course a link to their website. When a person clicks on the name of the store on the store list, it centers upon the store in the map, and opens an infoWindow above the store marker.
I have a javascript variable to which I have taken pains to assign some json data from a php script (which is selecting this data on the fly from a database)
locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}];
Now, I know there are 5 different functions I need to run, listed below with their apparent use:
geocoder.getLocations : Used to
convert address data (from the json
object) into latitude and longitude
data object
addElementToList :
Used to add address information to
the list of stores, and bind the
centerOnStore function to onclick
centerOnStore when a store list item is clicked in the list area, this function center's upon the store that has been clicked on in the map area. This function also opens an infoWindow above the centered upon store.
placeMarker the function to place a marker on the map, called once the geocoder returns latitudeLongitude objects
eventListener this is tied up somehow in the clicking of a list item and it's further centering the map upon the store in question
Well, i am out of my league it would appear. I am just now learning about javascript closures, and I think these may be necessary, but I can't quite understand them. I need to figure out some way to get all these functions into a working order, passing information back and forth to each other, and create a store locator
.
Here is what I've got so far, but there is something very wrong with it.
var map = null;
var geocoder = null;
var locations = null;
var center_on = null;
var zoom_level = null;
var markerList = [];
function initialize()
{
if(GBrowserIsCompatible())
{
// Assign vars
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
locations = <?php echo(json_encode($my_vars['locations'])); ?>;
center_on = "<?php echo($my_vars['center_on']); ?>";
zoom_level = <?php echo($my_vars['zoom_level']); ?>;
var currentLocation = 0;
geocoder.getLatLng(center_on, function(myPoint)
{
map.setCenter(myPoint, zoom_level);
});
map.setUIToDefault();
var list = document.getElementById('center_list');
for(var i = 0; i < locations.length; i++)
{
var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
geocoder.getLocations(address, addAddressToMap);
}
}
function addAddressToMap(response) {
if (!response || response.Status.code != 200) {
currentLocation++;
} else {
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
GEvent.addListener(marker, 'click', function(){
this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
});
map.setCenter(point, 13);
markerList.push(marker);
map.addOverlay(marker);
li = document.createElement('li');
li.innerHTML = "<strong>" + place.address + "</strong>";
li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
li.setAttribute('id', 'center_');
li.style.fontSize = '1.4em';
document.getElementById('center_list').appendChild(li);
// alert(currentLocation) here says 0,0,0,0
currentLocation++;
// alert(currentLocation) here says 1,2,3,4
}
}
}
I am sorry for the wall of code. I can't think anymore. I had no idea this would be so difficult. No idea at all.
if I alert currentLocation in the line before I increment it, it's always 0. but If I alert it in the line after I increment it, it's '1,2,3,4' etc. This goes against everything I know about computers.

Forget about closures for a moment. You can dive into those once you get a working app. I think you're goal at this point to should be to just get something that accomplishes what you want.
To me, it seems like the only piece you're missing is the idea of a callback function. For instance, addElementToList would be passed as the callback argument to geocoder.getLocaitons. The way it works is that when getLocations() finishes, it calls addElementToList and supplies the result from getLocations() as an argument to addElementToList. The code for addElementToList will then add your store location to the map as a marker and add a new element to your html list with the store's name or address or whatever.
Take a look at this blog post for a simple example using a callback: Introducing Google's Geocoding Service.
The last part, centering on a specific store, can be done (as you suggested) with event listeners. You can set up a listener for clicks on the markers and also for clicks on your list. When you add a marker, you can also add an event listener on it. It'd be nice if you could set one listener for all markers on the map but I'm not familiar enough with google's API to know if this is possible.

What is your source for that information? placeMarker certainly doesn't ring a bell. The Google Maps API reference (complete with examples!) is available at http://code.google.com/apis/maps/documentation/reference.html

Based on your comment to #Rushyo's answer- it seems like you know enough about Javascript and the Google Maps API to construct those functions. I'm a little confused as to what you're looking for.
I would suggest however, that you add lat/lon coordinates to your database in the first place. You shouldn't have to geocode the addresses every time the map is loaded.
Update: In response to your comment below, here is the code you referenced - along with the addAddressToMap() function called by the Geocoder. It creates a marker for each address and adds it to the array markerList. You can then access the markers in that array later, since we initialized it outside the scope of the addAddressToMap() function.
for(var i = 0; i < locations.length; i++) {
var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
geocoder.getLocations(address, addAddressToMap);
}
var markerList = new array();
function addAddressToMap(response) {
if (!response || response.Status.code != 200) {
alert("\"" + address + "\" not found");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
markerList.push(marker);
map.addOverlay(marker);
}
}
Update 2: In response to the code you posted in your question above, you're probably getting random numbers in currentLocation because of the asynchronous nature of the Geocoder. Remember that your getLocations() function will send requests for every location in the array before it gets any responses back.

I'm creating a new answer, since my other answer is getting messy.
In order to get proper closure, you'll need to create a separate function to make the geocoder request. The following code will allow you to assign the desired infoWindow text to each marker.
for(var i = 0; i < locations.length; i++) {
var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
var text = locations[i]['address']; // or whatever you want the text to be
getLocation(address, text);
}
...
function getLocation(address, text) {
geocoder.getLocations(address, function(response) {
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
marker.bindInfoWindowHtml(text); // note that if you want to use GEvent.addListener() instead - you'll need to create another function to get proper closure
map.addOverlay(marker);
});
}
For more info on closure in Google maps, see these questions:
One
Two
Three