Need to remove marker in javascript & Ajax with Mapbox -
i trying remove markers not centered on map when move on map. think related asynchronous side of ajax.
<!doctype html> <html> <head> <meta charset=utf-8 /> <title>a simple map</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> l.mapbox.accesstoken = 'pk.eyj1ijoiymxhy2t5iiwiysi6ija4nwjjzdnindq0mtg3yjvmztnkm2nkmwq3mmm4zju4in0.sdqh56azpcbil2rvs4eakq'; var map = l.mapbox.map('map', 'mapbox.streets').setview([47, 2], 6); var markergroup; map.on('moveend', function(move) { var coordinates = map.getcenter(); markergroup.clearlayers; //doesn't work. $.ajax({ type: 'get', url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng, crossdomain: true, datatype: 'json', contenttype: "application/json", success: function(response) { $.each(response, function(i) { title = response[i].title; latitude = response[i].latitude; longitude = response[i].longitude; markergroup = l.mapbox.featurelayer({ // feature in geojson format: see geojson.org // full specification type: 'feature', geometry: { type: 'point', // coordinates here in longitude, latitude order because // x, y standard geojson , many formats coordinates: [ longitude, latitude ] }, properties: { title: title, description : '', // 1 can customize markers adding simplestyle properties // https://www.mapbox.com/guides/an-open-platform/#simplestyle 'marker-size': 'large', 'marker-color': '#ffa5ff', 'marker-symbol': 'suitcase' } }).addto(map); }); } }); }); ... code </script> </body> </html> i tried :
map.eachlayer(function (layer) { map.removelayer(layer); }); but removes entire map, not want.
i found mistake. created markers. put markers in array in global variable markergroup.
var markergroup = []; and have created function empty markergroup.
function clearmarkers() { markergroup.foreach(function(marker) { marker.clearlayers(); }); markergroup = []; } the full code :
<!doctype html> <html> <head> <meta charset=utf-8 /> <title>a simple map</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <input id='search' class='search-ui' placeholder='' /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> <script> l.mapbox.accesstoken = 'pk.eyj1ijoiymxhy2t5iiwiysi6ija4nwjjzdnindq0mtg3yjvmztnkm2nkmwq3mmm4zju4in0.sdqh56azpcbil2rvs4eakq'; var map = l.mapbox.map('map', 'mapbox.streets').setview([47, 2], 6); var markergroup = []; function clearmarkers() { markergroup.foreach(function(marker) { marker.clearlayers(); }); markergroup = []; } map.on('moveend', function(move) { var coordinates = map.getcenter(); console.log(coordinates.lat) console.log(coordinates.lng) $.ajax({ type: 'get', url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng, crossdomain: true, datatype: 'json', contenttype: "application/json", success: function(response) { clearmarkers(); $.each(response, function(i) { title = response[i].title; latitude = response[i].latitude; longitude = response[i].longitude; markergroup.push(l.mapbox.featurelayer({ // feature in geojson format: see geojson.org // full specification type: 'feature', geometry: { type: 'point', // coordinates here in longitude, latitude order because // x, y standard geojson , many formats coordinates: [ longitude, latitude ] }, properties: { title: title, description : '', // 1 can customize markers adding simplestyle properties // https://www.mapbox.com/guides/an-open-platform/#simplestyle 'marker-size': 'large', 'marker-color': '#ffa5ff', 'marker-symbol': 'suitcase' } }).addto(map)); }); } }); }); $(document).ready(function() { $.ajax({ type: 'get', url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/emploi/', crossdomain: true, datatype: 'json', contenttype: "application/json", success: function(response) { clearmarkers(); $.each(response, function(i) { title = response[i].title; latitude = response[i].latitude; longitude = response[i].longitude markergroup.push(l.mapbox.featurelayer({ // feature in geojson format: see geojson.org // full specification type: 'feature', geometry: { type: 'point', // coordinates here in longitude, latitude order because // x, y standard geojson , many formats coordinates: [ longitude, latitude ] }, properties: { title: title, description : '', // 1 can customize markers adding simplestyle properties // https://www.mapbox.com/guides/an-open-platform/#simplestyle 'marker-size': 'large', 'marker-color': '#ffa500', 'marker-symbol': 'suitcase' } }).addto(map)); }); } }); }); </script> </body> </html> 
Comments
Post a Comment