ruby on rails - Mapbox 1.6 - Javascript error with Marker layer (GeoJSON) -
i having 2 issues i'm hoping can me with.
1) marker layer renders (geojson), renders before map loads, need implement wait on ready, not sure how to. 2) getting error on heroku: typeerror: argument 1 of node.appendchild not implement interface node, , can't select actual marker, while works fine on development laptop.
thanks!
typeerror: argument 1 of node.appendchild not implement interface node <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' /> <div id="map" style="width: 600px; height: 400px"></div> <style> #open-popup { position:absolute; top:5px; right:5px; } </style> <div id='map'></div> <button id='open-popup'>open popup</button> <script> var doctor = <%=raw @hash_product.to_json %>; var map = l.mapbox.map('map', 'secret') .setview([doctor.lat, doctor.lng], 9); $.ajax({ datatype: 'json', url: product.id + '.json', success: function(data) { map.markerlayer.setgeojson(data); } }); map.markerlayer.on('layeradd', function(e) { var feature, marker, popupcontent; marker = e.layer; properties = marker.feature.properties; if (properties.name || properties.address){ popupcontent = '<div class="popup">' + '<h3>' + properties.name + '</h3>' + '<p>' + properties.address + '</p>' + '</div>'; return marker.bindpopup(popupcontent, { closebutton: false, minwidth: 320 }); } }); $('article li').click(function(e) { var current, currentlyclickedname; current = $(this); currentlyclickedname = current.find('h2').text(); return map.markerlayer.eachlayer(function(layer) { var id; if (layer.feature.properties.name === currentlyclickedname) { id = layer._leaflet_id; return map._layers[id].openpopup(); } }); }); </script>
you try adding event listener map 'load' event , setting view after set map, before setview:
var map = l.mapbox.map('map', 'secret'); map.on('load', function () { $.ajax({ datatype: 'json', url: product.id + '.json', success: function(data) { map.markerlayer.setgeojson(data); } }); }); map.setview([doctor.lat, doctor.lng], 9);
this should take care of first problem. onload execute ajax call after setview.
as second problem. i'm searching answer, keep updated
update problem .bindpopup method. me problem in having outdated version of leaflet. in older leaflet. pass , html element (object) string or html string. in new leaflet can pass instance of popup.
i'm not sure rest of application or how mapbox' leaflet version works, nor know version of leaflet running in mapbox version on heroku, can try checking if popup bound e.g.:
if (layer.feature.properties.name === currentlyclickedname) { id = layer._leaflet_id; if (map._layers[id].getproperty() !== undefined) { return map._layers[id].openpopup(); } }
Comments
Post a Comment