How it works

Leaflet’s L.control.layers() provides a built-in UI for switching between base layers. You create multiple L.tileLayer instances pointing to different MapTiler styles and pass them as base layers to the control. Only one base layer is visible at a time.

The first argument to L.control.layers() is an object of base layers (radio buttons). You can also pass a second argument for overlay layers (checkboxes) that stack on top. The map constructor’s layers option sets which layer is initially visible.

Key APIs

API	Description	Docs
`L.tileLayer()`	Create raster tile layer	leafletjs.com/reference.html#tilelayer
`L.control.layers()`	Layer switcher control	leafletjs.com/reference.html#control-layers

FAQ

How do I set the default style?

Pass the desired default layer in the map constructor’s layers array. The control will automatically select it.

Can I add more than two styles?

Yes. Add as many tile layers as you want to the base layers object: each gets a radio button in the layer control.

Common mistakes

Forgetting to include the default layer in the layers option of L.map(): the map will appear empty
Using deprecated style names like streets-v2 instead of streets-v4
Adding the same layer to both base layers and overlays: it should be one or the other

Switch Tile Layers in Leaflet

How it works

Key APIs

FAQ

Common mistakes

Build maps using Leaflet with AI

Related Examples