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 © <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.