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
31

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/… ? Commented 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. Commented Mar 21, 2020 at 21:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.