I have been tasked with finishing off an abandoned project in an area I have no expertise in.
I have successfully loaded my 3 geoJSON files into a map, symbolized them and given them popups.
What I can't figure out is how to get my layer control to work for those layers. The basemap toggling works fine, but I am lost on how to make my vector layers toggle, and have a specific one turned on when the map loads.
The material in the map is sensitive (not actually strawberries) so I can't give a demo.
<div id='map' class='map'> </div>
<script>
L.mapbox.accessToken = 'REMOVED';
// define map as an object, set centre and zoom level, add basemap layer from mapbox
var map = L.mapbox.map('map')
.setView([63.168759, -96.680897],5)
// **AJAX request, subject to the Same Origin Policy for loading all geoJSON files **keep them where they are or it will break:
// define Strawberries as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries = L.mapbox.featureLayer()
strawberries.loadURL('strawberries.geojson');
strawberries.on('ready', function(layer){
this.eachLayer(function(marker) {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#7a77a9',
'marker-size': 'medium',
'marker-symbol':'college'
}));
marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
});
map.fitBounds(strawberries.getBounds());
});
strawberries.addTo(map);
// define strawberries2 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties, add to map.
var strawberries2 = L.mapbox.featureLayer()
strawberries2.loadURL('strawberries2.geojson');
strawberries2.on('ready', function(layer){
this.eachLayer(function(marker) {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#a21a4a',
'marker-size': 'small',
'marker-symbol':'hospital'
}));
marker.bindPopup('<h6>' + marker.feature.properties.strawberries2_name + '</h6>', { closeButton: true });
});
});
strawberries2.addTo(map);
// define strawberries3 as a layer, load it, check, when fully loaded, symbolize from simplestyle-spec, bind a pop-up to the object that displays properties add to map.
var strawberries3 = L.mapbox.featureLayer()
strawberries3.loadURL('strawberries3.geojson');
strawberries3.on('ready', function(layer){
this.eachLayer(function(marker) {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#208064',
'marker-size': 'small',
'marker-symbol':'building'
}));
marker.bindPopup('<h6>' + marker.feature.properties.strawberry_name + '</h6>', { closeButton: true });
});
});
strawberries3.addTo(map);
L.control.layers( {
'Topo Map': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10').addTo(map),
'Imagery': L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-v9')
}, {
'Strawberries': L.mapbox.featureLayer('strawberries'),
'Strawberry 2': L.mapbox.featureLayer('strawberries2'),
'Strawberry 3': L.mapbox.featureLayer('strawberries3')
}).addTo(map);
</script>
Can you help with my code or by pointing me to an example that covers layer control in mapbox.js using multiple geoJSON files coming from a URL?
**Update:
L.control.layers( {
'Topo Map': L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10').addTo(map),
'Imagery': L.mapbox.styleLayer('mapbox://styles/mapbox/satellite-v9')
}, {
'Strawberries': strawberries,
'Strawberry 2': strawberries2,
'Strawberry 3': strawberries3
}, {
collapsed: false
}).addTo(map);
gets me so close, but how can I only have the 'strawberries' layer selected in the checkbox on load?
Update 2
L.control.layers( null, {
'<img src="image.png" /> Strawberry': (strawberries).addTo(map),
'<img src="image2.png" /> Strawberry 2': strawberries2,
'<img src="image3.png" /> Strawberry 3': strawberries3
}, {
collapsed: false
}).addTo(map);
Doesn't work either (but also doesn't break it). How can I only have the 'strawberries' layer selected in the legend control checkboxes on load, not all 3?
