javascript - Moving a Marker after Locate function is called -
i trying move created movable marker points results of locate() function.
this allow recalculation of other closest markers in datasource.
presently, works when manually drag movable matker.
i can't seem able coordinates of location found , move marker there.
thanks help!
here's code:
<!doctype html> <html> <head> <meta charset=utf-8 /> <title>reorder marker list based on proximity</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> <style> .info { background:#fff; position: fixed; width:90%; top:70%; right:5%; left:5%; bottom: 5%; border-radius:2px; max-height:30%; overflow:auto; } .info .item { display:block; border-bottom:1px solid #eee; padding:5px; text-decoration:none; } .info .item small { color:#888; } .info .item:hover, .info .item.active { background:#f8f8f8; } .info .item:last-child { border-bottom:none; } </style> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/l.control.locate.min.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/l.control.locate.mapbox.css' rel='stylesheet' /> <!--[if lt ie 9]> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/l.control.locate.ie.css' rel='stylesheet' /> <![endif]--> <div id='map' class='map'></div> <div id='info' class='info'></div> <script> l.mapbox.accesstoken = 'pk.eyj1ijoiamznawfyzcisimeioij6s09pvu5vin0.kn_-bvwarxfnjt1hak0kya'; var map = l.mapbox.map('map', 'jfgiard.9dee89eb') .setview([51.953608, 36.776667], 4); var info = document.getelementbyid('info'); // create control , add map var lc = l.control.locate({ position: 'topleft', // set location of control drawcircle: true, // controls whether circle drawn shows uncertainty location follow: false, // follow user's location setview: true, // automatically sets map view user's location, enabled if `follow` true keepcurrentzoomlevel: true, // keep current map zoom level when displaying user's location. (if `false`, use maxzoom) stopfollowingondrag: false, // stop following when map dragged if `follow` true (deprecated, see below) remainactive: false, // if true locate control remains active on click if user's location in view. markerclass: l.circlemarker, // l.circlemarker or l.marker circlestyle: {}, // change style of circle around user's location markerstyle: {}, followcirclestyle: {}, // set difference style of circle around user's location while following followmarkerstyle: {}, icon: 'fa fa-map-marker', // class icon, fa-location-arrow or fa-map-marker iconloading: 'fa fa-spinner fa-spin', // class loading icon circlepadding: [0, 0], // padding around accuracy circle, value passed setbounds metric: true, // use metric or imperial units onlocationerror: function(err) {alert(err.message)}, // define error callback function onlocationoutsidemapbounds: function(context) { // called when outside map boundaries alert(context.options.strings.outsidemapboundsmsg); }, showpopup: true, // display popup when user click on inner marker strings: { title: "show me am", // title of locate control popup: "you within {distance} {unit} point", // text appear if user clicks on circle outsidemapboundsmsg: "you seem located outside boundaries of map" // default message onlocationoutsidemapbounds }, locateoptions: {} // define location options e.g enablehighaccuracy: true or maxzoom: 10 }).addto(map); // creates single, draggable marker on page. var m = l.marker(new l.latlng(51.953608, 36.776667), { icon: l.mapbox.marker.icon({ 'marker-color': '#000000', 'marker-size': 'large' }), draggable: true }).bindpopup('drag me around map simulate geolocalization!').addto(map); // repopulate features layer in menu listing based on dragged markers proximity them. // console.log(marker.getlatlng()); m.on('dragend', function() { populatelisting(); }); // load features csv files. var features = omnivore.csv('nmoandhtc.csv') .on('ready', function(layer) { // customizing marker styles based on attribute. this.eachlayer(function(marker) { if (marker.togeojson().properties.type === 'national member organization') { // argument l.mapbox.marker.icon based on simplestyle-spec: see specification full description of options. marker.seticon(l.mapbox.marker.icon({ 'marker-color': '#e31837', 'marker-size': 'medium' })); } else { marker.seticon(l.mapbox.marker.icon({ 'marker-color': '#616265', 'marker-size': 'small' })); } // bind popup each icon based on same properties marker.bindpopup(marker.togeojson().properties.name + '<br>' + marker.togeojson().properties.country); }); }) .addto(map); map.on('ready', function() { // display tooltip after marker has been added map. m.openpopup(); }); // when features layer ready (added map), run populatelisting. features.on('ready', populatelisting); function populatelisting() { // clear out listing container first. info.innerhtml = ''; var listings = []; // build listing of markers features.eachlayer(function(marker) { // draggable marker coordinates. var home = m.getlatlng(); var metrestomiles = 0.000621371192; var distance = (metrestomiles * home.distanceto(marker.getlatlng())).tofixed(1); var link = document.createelement('a'); link.classname = 'item'; link.href = '#'; link.setattribute('data-distance', distance); // populate content each markers object. link.innerhtml = marker.feature.properties.type + '<br />' + marker.feature.properties.name + '<br />' + '<small>' + distance + ' mi. away</small>'; link.onclick = function() { if (/active/.test(this.classname)) { this.classname = this.classname.replace(/active/, '').replace(/\s\s*$/, ''); } else { var siblings = info.getelementsbytagname('a'); (var = 0; < siblings.length; i++) { siblings[i].classname = siblings[i].classname .replace(/active/, '').replace(/\s\s*$/, ''); }; this.classname += ' active'; // when menu item clicked, animate map center // associated marker , open popup. map.panto(marker.getlatlng()); marker.openpopup(); } return false; }; listings.push(link); }); // sort listing based on // assigned attribute, 'data-listing' listings.sort(function(a, b) { return a.getattribute('data-distance') - b.getattribute('data-distance'); }); listings.foreach(function(listing) { info.appendchild(listing); }); } </script> </body> </html>
is l.control.locate needed here? why not call map.locate() after binding callback locationfound map.on('locationfound, dostuff) function receives results of geolocation , can proceed there.
Comments
Post a Comment