Affichage des propriétés de GeoJSON dans une popup sur Leaflet?

9

Ceci est ma simple carte GeoJSON avec Leaflet. Je veux afficher les propriétés sous forme de popup mais je ne sais pas pourquoi il est vide.

Pouvez-vous me dire mon erreur?

<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
la source

Réponses:

18

La ligne où vous créez et liez votre popup devrait avoir été incluse dans l' onEachFeatureoption de votre L.geoJSONusine.

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

Démo: http://playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

Le fait d'avoir cette ligne en dehors de l'usine lui permet d'accéder à votre layervariable de portée externe , qui est en fait le groupe de couches GeoJSON qui contient toutes les fonctionnalités de vos données GeoJSON, donc elle essaie de lier une fenêtre contextuelle sur chacune de ces fonctionnalités (dans votre cas, il y a seulement 1 marqueur, mais il pourrait être plus).

Surtout, il ne connaît aucune featurevariable, ce qui crée une erreur.

ghybs
la source
3

Créez un contenu contextuel simple pour toutes les propriétés de manière simple, en une seule ligne:

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

Vous pouvez utiliser les codes ci-dessous: 

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
la source
Comment se fait-il que cette réponse soit également publiée sous forme de question: gis.stackexchange.com/questions/354704/… ?
TomazicM
J'ai fait cette partie. ma valeur d'attribut s'affiche maintenant sur la base du clic. Mais maintenant, je veux l'utiliser comme étiquette. C'est pourquoi j'ai posé la question. J'ai du mal à faire une étiquette de données geojson dans la brochure.
M. Abrar Rubaiyat Islam