Leaflet toggle Layer-group
HTML
<link rel="stylesheet" href="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.css">
<script src="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
<body>
<div id="mapbox"></div>
</body>
Leaflet toggle Layer-group
CSS
body {
margin: 0;
}
html, body, #mapbox {
height: 100%;
}
JavaScript
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('mapbox', 'mapbox.light').setView([60.37, 95.27], 4);
var collection = [{
"type": "FeatureCollection",
"features": [
{"type":"Feature","properties":{"category":"Aviation","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},
{"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},
{"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates":[104.4140625,62.91523303947614]}}
]
}];
var myStyle = { radius: 10, fillOpacity: 1, stroke: false, weight: 1, opacity: 1, fill: true, clickable: true };
var categories = {},
category;
var allPoints = L.geoJson(collection, {
pointToLayer: function(feature, latlng){
return L.circleMarker(latlng, myStyle);
},
style: function(feature){
switch(feature.properties.category){
case 'Aviation' : return { color: "black" };
case 'Elecrtical' : return { color: "blue" };
case 'Military' : return { color: "red" };
}
},
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.Name);
category = feature.properties.category;
// Initialize the category array if not already set.
if (typeof categories[category] === "undefined") {
categories[category] = [];
}
categories[category].push(layer);
}
});
var basemapsObj = { 'basic': L.mapbox.tileLayer('mapbox.light'), 'satellite': L.mapbox.tileLayer('mapbox.satellite-afternoon') };
var overlaysObj = {},
categoryName,
categoryArray,
categoryLG;
for (categoryName in categories) {
categoryArray = categories[categoryName];
categoryLG = L.layerGroup(categoryArray);
categoryLG.categoryName =...