Ribbit-Network / ribbit-network-dashboard

The web dashboard for the world's largest crowdsourced network of open-source, low-cost, CO2 Gas Detection Sensors.
MIT License
17 stars 16 forks source link

Add day/night shading to Sensor map #77

Open keenanjohnson opened 2 years ago

keenanjohnson commented 2 years ago

From a Ribbit Network user: It would be great to have some sort of night/ day shading of the graph background, so you know where you are at in time.

spestana commented 2 years ago

Here's an implementation with leaflet alone (not dash): https://github.com/joergdietrich/Leaflet.Terminator

benorloff commented 2 years ago

To clarify, which would be better for user experience?

  1. To display night and day regions on the global map
  2. Render the global map in either 'light' or 'dark' mode based on the user's location and timestamp

If #1, then I think adding overlays per @spestana 's suggestion makes sense.

If #2, I think it would just be a matter of dynamically updating the map style of the tileset based on geolocation and timestamp.

spestana commented 1 year ago

I have a work in progress on a branch here with some promising results now, but it still needs some fine tuning with the map display.

image

It's a dash-leaflet (python) version of the plain leaflet (js) code here: https://github.com/joergdietrich/Leaflet.Terminator

keenanjohnson commented 1 year ago

oh wow! This is awesome @spestana ! I continue to be impressed with the capabilities of dash / plotly.