DEV Community

Cover image for Change Leaflet Tile control to accordion

Change Leaflet Tile control to accordion

Leslie Perjes
PHP back-end and database developer, Leaflet/GIS/OSM expert.
Updated on ・1 min read

If you use Leaflet for map based development, and use large number of tile providers, this trick will be useful for grouping the provider names. The tile provider selector will work as vertical accordion.

Alt Text

The trick is class injection to html tags.

  • Define all tile providers you needed.
  • On baseMaps{} object add name to the providers, but the first word must be the main title of the accordion (OSM, Google, Stemen, Stadia, etc...), the other words will be displayed after the radio button.
  • The accordion created by setTitleControl() function.

Git repo:

Discussion (0)

Forem Open with the Forem app