DEV Community

Cover image for Change Leaflet Tile control to accordion
Leslie Perjes
Leslie Perjes

Posted on • Updated on

Change Leaflet Tile control to accordion

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: https://github.com/CosmicLaca/leaflet_accordion

Top comments (0)