https://github.com/rudokemper/map-gl-dynamic-legend-template

A Mapbox HTML map template that constructs a dynamic legend using layer properties from the map stylesheet
https://github.com/rudokemper/map-gl-dynamic-legend-template

Last synced: 19 days ago
JSON representation

A Mapbox HTML map template that constructs a dynamic legend using layer properties from the map stylesheet

• Host: GitHub
• URL: https://github.com/rudokemper/map-gl-dynamic-legend-template
• Owner: rudokemper
• License: gpl-3.0
• Created: 2024-01-09T22:36:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-11T18:23:05.000Z (almost 1 year ago)
• Last Synced: 2024-12-12T14:39:41.338Z (29 days ago)
• Language: HTML
• Homepage:
• Size: 288 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Map GL dynamic legend

This is a sample Mapbox HTML template that creates a legend div based on the layer IDs you provide in the `layerIds` array. The template dynamically pulls the layer color and type (currently supporting `fill`, `line`, and `circle` types) from the map stylesheet, and uses these to populate the layers in the legend div. Depending on the type, the legend item will show a box, line, or circle, respectively, and apply the layer's color. Additionally, it applies minor regex transformations to make the layer IDs more readable.

![Example](example.png)

The template uses Mapbox GL JS but the same code could be used with Maplibre GL JS.