18

This is my simple GeoJSON with Leaflet map. I want to display properties as popup but I don't know why it is empty.

Can you tell me my mistake?

<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>
Improve this question

3 Answers 3

Reset to default
30

The line where you create and bind your popup should have been included in the onEachFeature option of your L.geoJSON factory.

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

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

Having this line outside the factory makes it access your outer scope layer variable, which is actually the GeoJSON Layer Group that holds all the features from your GeoJSON data, therefore it tries to bind a popup on each of these features (in your case, there is only 1 marker, but it could be more).

Above all, it does not know any feature variable, which creates an error.

Improve this answer
11

Build a simple popup content for any properties in a simple way, in one line:

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

You can use below codes: 

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);
Improve this answer
2
  • 1
    How come this answer is also published as a question: gis.stackexchange.com/questions/354704/… ?
    – TomazicM
    Mar 21, 2020 at 17:49
  • I have done this part. my attribute value is now showing on click basis. But now I want to use this as label. This is why I have asked the question. I am finding it hard to make label of geojson data in leaflet.
    – M. Abrar Rubaiyat Islam
    Mar 21, 2020 at 21:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.