Soy nuevo en trabajar con la API de Leaflet y estoy teniendo problemas para crear ventanas emergentes para una capa GeoJSON. He visto la siguiente publicación como referencia y todavía tengo dificultades: vincular matrices anidadas como ventanas emergentes de geojson en el folleto
Mis datos de GeoJson se ven así:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-73.97364044189453,
40.66893768310547
]
},
"type": "Feature",
"properties": {
"lon": -73.97364044189453,
"lat": 40.66893768310547,
"version": "1.1",
"t": 1381167616,
"device": "iPhone3,3",
"alt": 67,
"os": "6.1.3"
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-73.96121215820312,
40.66240692138672
]
},
"type": "Feature",
"properties": {
"lon": -73.96121215820312,
"lat": 40.66240692138672,
"version": "1.1",
"t": 1381171200,
"device": "iPhone3,3",
"alt": 45,
"os": "6.1.3"
}
}
]
}
Mi folleto js es el siguiente:
// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");
// initialize and set map center and zoom
var map = L.map('map', {
center: new L.LatLng(40.67, -73.94),
zoom: 12
});
// create the map
map.addLayer(layer);
// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {
if (feature.properties) {
var popupContent;
popupContent = feature.properties.t;
console.log(popupContent);
}
layer.bindPopup(popupContent);
}
// grab the processed GeoJSON through ajax call
var geojsonFeature = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "/data/test_random.json",
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
// create an object to store marker style properties
var geojsonMarkerOptions = {
radius: 10,
fillColor: "rgb(255,0,195)",
color: "#000",
weight: 0,
opacity: 1,
fillOpacity: 1
};
// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions)
}
}).addTo(map);
La console.log(popupContent);
llamada dentro de la onEachFeature
función está devolviendo datos, sin embargo, cuando hago clic en los puntos GeoJSON en el mapa, aparece el siguiente error:
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
He intentado investigar esto sin éxito hasta ahora.
fuente