3

I have a geojson file(Polygons).I want to display it on a leaflet map and when user clicks on a polygon, a popup with an information should be visible. The information is 'type'. I am able to see the layer but no pop up window appears when i click on any polygon. here is the geojson sample:

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [{
    "type": "Feature",
    "properties": {
      "osm_id": "32741378",
      "name": "Azam Television",
      "type": "industrial"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [39.2463013, -6.8431187],
          [39.2470392, -6.8427426],
          [39.2471654, -6.8429866],
          [39.2464274, -6.8433627],
          [39.2463013, -6.8431187]
        ]
      ]
    }
  }]
}

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

</head>
<body>

<div id="map" style="width: 800px; height: 800px"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

<script src="jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>


    var map = L.map('map').setView([ 13.3844, 52.5177], 12);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map);



 $.getJSON("landuse.geojson",function(landuse){

        L.geoJson(landuse ,{
                    style:  function (feature)
                        {
                            return {"color": "#78c679","weight": 5,"opacity": 0.9}
                        }
                },
                {
                    onEachFeature: function( feature, layer ){
                             layer.bindPopup(feature.properties.type);
                        }
                }
        ).addTo(map);

    });
</script>

</body>
</html>

PS: i am viewing in FireFox.

4

That is simply because your onEachFeature option should be a member of the 2nd argument (options) of L.geoJSon factory, alongside style option, rather than a 3rd argument:

L.geoJson(landuse, {
  style: function(feature) {
    return {
      "color": "#78c679",
      "weight": 5,
      "opacity": 0.9
    }
  },
  // Put onEachFeature within the options object, not as 3rd argument.
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.type);
  }
}/*, { // Original position (as 3rd argument) of onEachFeature.
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.type);
  }
}*/).addTo(map);

Demo: http://plnkr.co/edit/J1VqeTQuA4m5y7J8m88d?p=preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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