I am utilizing the leaflet api in conjunction with L.geoJson. Below are snippets of the relevant code:
var indiaLayer = L.geoJson(india, {style: {weight: 2,
opacity: 1,
color: '#F7BE81',
dashArray: '10',
fillOpacity: 0.2}});
Next, I set up an event listener on indiaLayer like so:
indiaLayer.on('click', clicked);
If I want to access the first argument, in this case, 'india,' inside the clicked function, what syntax should I use? After consulting the DOM tree, I came up with:
alert(this._layers.22.feature.id);
Unfortunately, it resulted in a syntax error. Can anyone provide assistance with resolving this issue? Thank you.
I have also included the full code below:
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="india.js" type="text/javascript"></script>
</head>
<body>
<div id = "map1" style="width: 1100px; height: 400px"> </div>
<div id = "zoom" style="width: 100px; height: 100px"></div>
<div id = "select" style="width: 100px; height:100px"></div>
<script>
var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 });
L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area);
function zoomDeal()
{
var zoom=document.getElementById("zoom");
zoom.innerHTML= area.getZoom();
}
area.on('zoomend',zoomDeal);
var indiaLayer= L.geoJson(india, {style: {weight: 2,
opacity: 1,
color: '#F7BE81',
dashArray: '10',
fillOpacity: 0.2}});
area.addLayer(indiaLayer);
function clicked(){
if (area.getZoom() == 4) {
if (this.options.style.fillOpacity == 0.5)
{
this.setStyle({fillOpacity: 0.2});
this.options.style.fillOpacity=0.2;
var select = document.getElementById("select");
select.innerHTML = "";
}
else
{
this.setStyle({fillOpacity: 0.5});
this.options.style.fillOpacity=0.5;
var select = document.getElementById("select");
alert(this._layers.22.feature.id);
}
}
}
indiaLayer.on('click', clicked);
</script>
</body>
</html>