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.

Improve this question

1 Answer 1

Reset to default
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

Improve this answer

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.