Load or display differents geojson data on zoom level for leaflet maps
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://leafletjs.com/examples/sample-geojson.js"></script>
<body onload="init()">
Leaflet load Layers with dropdown choice
<div id="info"></div>
<select name="Layerchoice" id="select1" onchange="dropdown_onchange(this.value)">
<option value="dummy" disabled selected>Please select</option>
<option value="testlayer1">Testlayer1</option>
<option value="testlayer2">Testlayer2</option>
</select>
<div id="map"></div>Data from http://leafletjs.com/examples/geojson.html</body>
CSS
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#info {
margin:10px;
}
#map {
height: 85%;
margin-top:10px;
border: 1px solid grey;
}
#zoomlevel {
color:green;
font-weight:bold;
}
#layername {
color:orange;
font-weight:bold;
}
JavaScript
var map, layerControl;
var dropdownlayers = {};
dropdownlayers[choice=="testlayer1"] =
{
name: "Testlayer1",
layer: L.geoJson(),
url: "https://gist.githubusercontent.com/anonymous/6622d04d71ed2dd7927a/raw/0eb6c1145cbd60a050d8e46c2a7805504b901d7d/us_states.js"
}
;
dropdownlayers[choice=="testlayer2"] =
{
name: "Testlayer2",
layer: L.geoJson(),
url: "https://gist.githubusercontent.com/anonymous/559d9a178f4b8ed90518/raw/a65e110c173737af958a481b33feeef57bba5b4a/geojsontest.js"
}
;
function init() {
map = L.map('map').setView([39.74739, -105], 11);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
attribution: osmAttrib
}).addTo(map);
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
});
}
}).addTo(map);
var baseLayers = {
"OpenStreetMap": osm
};
var overlays = {
};
layerControl= L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);
} // end init
function clean_map() {
map.eachLayer(function (layer) {
if (layer instanceof L.GeoJSON)
//Do marker specific actions here
{
layerControl.removeLayer(layer);
map.removeLayer(layer);
}
console.log(layer);
});
}
function load_layer(dropdownchoice) {
clean_map();
$.ajax({
dataType: "json",
url: dropdownchoice.url,
success: function (data) {
var layer = dropdownchoice.layer;
layer.clearLayers();
layer.addTo(map);
$(data.features).each(function (key, data) {
layer.addData(data);
});
layerControl.addOverlay(layer, dropdownchoice.name);
map.fitBounds(layer.getBounds());
...