I'm trying to add a Layer Control (for streets and towns) in Leaflet but can't get it to work - not sure where I've gone wrong. My code is made up of two functions. One gets data using AJAX (JSON), and the other plots the data. I wont post all the code, just the parts relating to the layers:
function getJSON () {
var map = L.map('map', {
center: [57.73, -98.99],
zoom: 10,
layers: [streets, towns]
});
var baseMaps = {
"Streets": streets
};
var overlayMaps = {
"Towns": towns
};
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {id: 'mapbox.streets',
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade'})
function plotData {
var townMarkers = L.markerClusterGroup();
var towns = L.layerGroup([marker]);
for (var i = 0; i < townData.length; i++) {
var townLocation = new L.LatLng(townData[i].lat, townData[i].lon);
var marker = new L.Marker(townLocation);
marker.bindPopup("<div class=townInfo><h1>" +
townData[i].name)
townMarkers.addLayer(marker);
}
map.addLayer(townMarkers);
L.control.layers(baseMaps, overlayMaps).addTo(map);
}
}
I think I have one or two of the variables in the wrong location, but have tried them inside the for-loop and inside the plotData function.
Can anyone see where I have gone wrong?