In Leaflet, I really enjoy using Leaflet.Control.Layers.Tree and find its possibilities amazing. That’s why I’ve named the control I describe here Layertree. For now, I want to start small and document the learning steps I’ve taken with vanilla JavaScript. Since I don’t have much experience yet, feedback or suggestions for improvement are very welcome! I hope this post will be helpful to others who are learning as well.
Layertree Control
Base Layers
A base layer is the lowest map layer that provides the general background or geographic context — things like:
- Streets, buildings, rivers, landscapes
- Satellite imagery or simple map drawings
It serves as the foundation on which other data can be displayed as overlays (e.g., markers, routes, thematic layers).
There is already an official control, maplibre-basemaps, which, however, only supports raster sources. I want to make it possible to use vector sources as basemaps as well.
Here’s a simple code example showing how to create a custom basemap layer switcher in MapLibre GL JS to switch between different base maps (layers) — whether vector or raster.