Change map layer

Help and support
1

Hi all,
I would like to give the possibility to change the map layer to user, but I do not know how to do it.
I create a map in mymap div and then give the instruction

mymap.setZoom(12);
				L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token="+token, {
					maxZoom: 18,
					attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors,<a href=\"https://www.keyfor.it/\">KeyFor</a>",
					id: "mapbox/satellite-streets-v12",
					tileSize: 512,
					zoomOffset: -1
				}).addTo(mymap);

I think that I have to change on fly the row

id: "mapbox/with_map_I_whant"

but I think again that is wrong!!
How can I change map on fly?
Best regards and cheers

Sergio

1 Like
2

Hello Sergio, you need a basemap layer selector, e.g. like this:

mymap.setZoom(12);
				var satellite=L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token="+token, {
					maxZoom: 18,
					attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors,<a href=\"https://www.keyfor.it/\">KeyFor</a>",
					id: "mapbox/satellite-streets-v12",
					tileSize: 512,
					zoomOffset: -1
				}).addTo(mymap);
var what-you-want=L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token="+token, {
					maxZoom: 18,
					attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors,<a href=\"https://www.keyfor.it/\">KeyFor</a>",
					id: "mapbox/what-you-want",
					tileSize: 512,
					zoomOffset: -1
				});
var baseMaps = {"Satellite":satellite,"What you want":what-you-want};
L.control.layers(baseMaps).addTo(mymap);
1 Like