Switch Map Styles
Dynamically change between different basemap styles at runtime Each library has its own approach: here's how they compare.
Quick Recommendations
Leaflet — A strong fit when switching between raster tile layers using the built-in L.control.layers radio button UI: no code needed for the switcher.
MapLibre GL JS — Best when you need smooth vector style transitions with map.setStyle() that preserve the map state and camera position.
OpenLayers — Ideal when style switching must work with mixed raster/vector layers or when using ol-mapbox-style for MapTiler vector styles.
MapTiler SDK — Best for the cleanest API: pass MapStyle values directly to map.setStyle() with auto-resolved MapTiler URLs.
At a Glance
| Leaflet | MapLibre | OpenLayers | SDK | |
|---|---|---|---|---|
| Coordinates | [lat, lng] | [lng, lat] | fromLonLat([lng, lat]) | [lng, lat] |
| Rendering | DOM + Canvas (2D) | WebGL (GPU, 60fps) | Canvas + WebGL | WebGL (GPU, 60fps) |
| Bundle size | ~42 KB gzipped | ~250 KB gzipped | ~290 KB gzipped (tree-shakeable) | ~280 KB gzipped (includes MapLibre) |
| Learning curve | Easiest (simple API, great tutorials) | Moderate (source/layer model, expressions) | Steepest (projections, OGC standards, verbose API) | Easy (MapLibre API with convenience helpers) |
| 3D support | No native 3D (2D only) | Full: terrain, fill-extrusion, globe, sky | Limited: WebGL layers, no native globe | Full (same as MapLibre) |
| Code lines | 10 | 14 | 13 | 7 |
Code Snippets
Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.
Leaflet10 linesShow code
const streets = L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
const topo = L.tileLayer('https://api.maptiler.com/maps/topo-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
});
const map = L.map('map', { layers: [streets] }).setView([50.0755, 14.4378], 12);
L.control.layers({ 'Streets': streets, 'Topo': topo }).addTo(map);MapLibre GL JS14 linesShow code
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [2.3522, 48.8566],
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
const styles = ['streets-v4', 'satellite', 'outdoor-v4', 'dataviz-dark'];
let idx = 0;
document.getElementById('switch-style').addEventListener('click', () => {
idx = (idx + 1) % styles.length;
map.setStyle(`https://api.maptiler.com/maps/${styles[idx]}/style.json?key=YOUR_MAPTILER_KEY`);
document.getElementById('switch-style').textContent = styles[idx];
});OpenLayers13 linesShow code
var currentMap;
function setStyle(styleName) {
var url = 'https://api.maptiler.com/maps/' + styleName + '/style.json?key=YOUR_MAPTILER_KEY';
var center = currentMap ? currentMap.getView().getCenter() : ol.proj.fromLonLat([2.3522, 48.8566]);
var zoom = currentMap ? currentMap.getView().getZoom() : 12;
document.getElementById('map').innerHTML = '';
olms.apply('map', url).then(function(map) {
map.getView().setCenter(center);
map.getView().setZoom(zoom);
currentMap = map;
});
}
setStyle('streets-v4');MapTiler SDK7 linesShow code
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 12
});Things to Know
Implementation-specific details that matter for switch map styles.
Style switch means swapping raster tile layer URLs; L.control.layers provides a built-in UI but each style is a separate tile layer.
map.setStyle() replaces the entire style; any custom sources and layers added after init are lost and must be re-added.
Style switching with ol-mapbox-style requires re-applying the style to the map; more complex than other libraries.
MapStyle constants (STREETS, SATELLITE, OUTDOOR, etc.) provide type-safe style references; setStyle() behavior matches MapLibre.
Which Library to Use?
Switch between MapTiler raster tile styles at runtime using Leaflet's built-in L.control.layers switcher.
A strong fit when switching between raster tile layers using the built-in L.control.layers radio button UI: no code needed for the switcher.
Change the map style at runtime using map.setStyle() to switch between MapTiler vector tile styles.
Best when you need smooth vector style transitions with map.setStyle() that preserve the map state and camera position.
Dynamically switch between MapTiler vector tile styles using ol-mapbox-style in OpenLayers.
Ideal when style switching must work with mixed raster/vector layers or when using ol-mapbox-style for MapTiler vector styles.
Dynamically change between MapTiler map styles using the MapStyle constants and the setStyle method.
Best for the cleanest API: pass MapStyle values directly to map.setStyle() with auto-resolved MapTiler URLs.
Build Maps with AI
Generate code like these examples using mapping library skills in your IDE.