¿Mostrar propiedades de GeoJSON en una ventana emergente en el folleto?

9

Este es mi GeoJSON simple con mapa de folleto. Quiero mostrar las propiedades como una ventana emergente, pero no sé por qué está vacío.

¿Puedes decirme mi error?

<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>

<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
    var map = L.map('map',{
    center: [49.833352, 18.163662],
    zoom: 10
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var data ={
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              23.4850463378073,
              46.7440954850672
            ]
          },
          "properties": {
            "f1": 11793,
            "f2": "BT"
          }
        }
      ]
    };

var layer = L.geoJson(data, {
}).addTo(map);
layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
</script>
</body>
</html>
leaflet geojson features popup Alex
fuente

Respuestas:

18

La línea donde crea y vincula su ventana emergente debería haberse incluido en la onEachFeatureopción de su L.geoJSONfábrica.

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
  }
}).addTo(map);

Demostración: http://playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

Tener esta línea fuera de la fábrica hace que acceda a su layervariable de alcance externo , que en realidad es el Grupo de capas GeoJSON que contiene todas las características de sus datos GeoJSON, por lo tanto, intenta vincular una ventana emergente en cada una de estas características (en su caso, hay solo 1 marcador, pero podría ser más).

Sobre todo, no conoce ninguna featurevariable, lo que crea un error.

ghybs
fuente
3

Cree un contenido emergente simple para cualquier propiedad de una manera simple, en una línea:

var layer = L.geoJSON(data, {
 onEachFeature: function (f, l) {
   l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
 }
}).addTo(map);
stefcud
fuente
0

Puede usar los siguientes códigos: 

function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.Name && feature.properties.Lat && feature.properties.Lon) {
        layer.bindPopup(feature.properties.Name+"("+feature.properties.Lat+","+feature.properties.Lon+")",);
    }
}
/// for Show in map marker style and popup
    L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 
    onEachFeature: onEachFeature

}).addTo(map);
M. Abrar Rubaiyat Islam
fuente
¿Cómo es que esta respuesta también se publica como una pregunta: gis.stackexchange.com/questions/354704/… ?
TomazicM
He hecho esta parte El valor de mi atributo ahora se muestra en función del clic. Pero ahora quiero usar esto como etiqueta. Es por eso que hice la pregunta. Me resulta difícil etiquetar los datos de Geojson en el folleto.
M. Abrar Rubaiyat Islam