I'm trying to combine these two leaflet tutorials:
http://leafletjs.com/examples/layers-control.html
http://leafletjs.com/examples/choropleth.html
I'm using a layer control where the user can switch between tile providers and also can switch on the GeoJSON data. JSFiddle: http://jsfiddle.net/jrzd4448/2/
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
// initialize map
var map = L.map('map', {
center: [37.8, -96],
zoom: 4,
layers: [OpenStreetMap_Mapnik]
});
var baseMaps = {
"Mapnik": OpenStreetMap_Mapnik,
"Black and White": OpenStreetMap_BlackAndWhite
};
loadstates = L.geoJson(statesData);
var states = {
"US States": loadstates
};
L.control.layers(baseMaps, states).addTo(map);
I want that the GeoJSON layer ("US States") is automatically selected when the "Black & White" layer is selected. And accordingly deselected when switching back to "Mapnik".
Do I have to use something like this or addlayer
or a jQuery function?
I guess it would be best not to load the GeoJSON data at all until the according layer is clicked?
I tried building a LayerGroup which does not work.
var baseMaps = {
"Mapnik": OpenStreetMap_Mapnik,
"Black and White": OpenStreetMap_BlackAndWhite
};
loadstates = L.geoJson(statesData);
var group = L.layerGroup([OpenStreetMap_BlackAndWhite, loadstates]);
var statesandlayer = {
"Group": group
};
L.control.layers(baseMaps, statesandlayer).addTo(map);
Thanks for ideas!