search

chihacknight / il-solar-map

Explore solar deployments in Illinois
https://ilsolarmap.com
MIT License
3 stars 1 forks source link

style legend to work on different screen sizes #28

Closed derekeder closed 9 months ago

derekeder commented 1 year ago

Our new map has a legend: https://ilsolarmap.com/map2.html

I pulled the styles for it from this Mapbox-GL example: https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/

However, the styles are not responsive and the absolute positioning makes the legend show up in awkward places, especially on mobile:

Screen Shot 2023-08-01 at 3 03 50 PM Screen Shot 2023-08-01 at 3 04 00 PM

Map HTML code is here: https://github.com/chihacknight/il-solar-map/blob/main/index.html CSS is defined here: https://github.com/chihacknight/il-solar-map/blob/main/css/custom.css#L13 Javascript to dynamically set the legend: https://github.com/chihacknight/il-solar-map/blob/main/js/map.js#L91