Skip to content

Weather: Add a weather widget #731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 6, 2024
Merged

Weather: Add a weather widget #731

merged 11 commits into from
Nov 6, 2024

Conversation

Dlurak
Copy link
Collaborator

@Dlurak Dlurak commented Nov 3, 2024

Description

This fixes #730 by introducing a weather widget.

  • It uses Open-Meteo
  • Icons are from OpenWeather
  • It only fetches for zoom levels > 13 and refetches once the user moves 5km

Screenshots

Cloud Snow Sun

ToDo

  • Make it react to changes between the imperial and the metric system without reloading
    • The label already uses celsius/fahrenheit but only reacts to a settings change on reload
    • It needs a context to react to this change, related to Add metric/imperial switch to user settings #572
    • Maybe allow for celsius and miles or for fahrenheit and kilometers at the same time, so decouple temperature from length
  • Open-Meteo requires attribution but I don't know where to put it, maybe we can create a /acknowledgment route where we can put attributions?

Copy link

vercel bot commented Nov 3, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
osmapp ✅ Ready (Inspect) Visit Preview Nov 6, 2024 2:40pm

@zbycz
Copy link
Owner

zbycz commented Nov 3, 2024

This is great, I also thought about it earlier 🙂

The acknowledgement page is a good idea. Also (or for start) we have thanks section on Homepage and in README.md.

If you ever add a tooltip to the weather widget (eg. with explanation what is the red dot) , the attribution should go there as well.

@jvaclavik
Copy link
Collaborator

jvaclavik commented Nov 3, 2024

I think that the UX should be a bit different. I believe it shouldn't be visible by default because in 90% use cases I don't care about the weather and it occupies one of the most precious areas. Also when you react on map changes it could use all free api calls really soon. Also showing it only in some specific zoom is quite counter intuitive in my opinion.
Also usually i want to see weather not just now but also few next days.

In my opinion it should be visible in feature panel for specific feature only or in navigation on the road if you turn it off. Also other option is that the user could activate it in layers, settings or somewhere else.

Actually i think mapy.cz have weather and their ux is pretty nice. But at the same time, i have never used it actually.

EDIT: hope i doesn't sound too negative 😅

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 3, 2024

Just for reference here is the mapy.cz weather widget:
image


  • I don't think that we should put it into the feature panel as the weather exits even when no feature is selected and the user just looks at an area of the map.
  • We could make it smaller by aligning the temperature label and image in a row and making the image smaller. The png has a lot of transparent space to all of its edges so we should probably also crop it.
  • open-meteo offers 10.000 api calls per day for non-commercial applications. A user would need to move 50.000km (1 + 1/4 times around the equator) in 5km steps to use all available calls so it is very unlikely that they use it all.
  • When showing it at all zoom levels there are two problems:
    1. It reacts to minimal movements as 5km might be just a few pixels
    2. It is hard to understand where this weather comes from, imagine all of Spain is visible in the bounding box, how should the user know if they see the weather for Madrid, Barcelona or somewhere completely different?
  • I very much like the option to let the user enable/disable it.
  • When clicking it we could open a window with more information like mapy.cz. Google and Apple also show the air quality very prominently for some reason, I've never really cared about air quality in a map app but if it is usefull we could also show it in that window

Something like this:
image

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 3, 2024

If you ever add a tooltip to the weather widget (eg. with explanation what is the red dot) , the attribution should go there as well.

Now there is this tooltip:
image

@zbycz
Copy link
Owner

zbycz commented Nov 4, 2024

Btw, I use Google Maps a lot and I thought that they have it only on desktop (where there is space enough), but now I checked and they have it also in their mobile app. I haven't really used the widget much, but I was surprised how unobtrusive it is.

I have no problem with having it osmapp if this is small enough especially on mobile.

Screenshot:
IMG_7381

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 4, 2024

I just moved isImperial() to the user settings context, this makes it very easy to fix #572. Should I do it in this pr or open a new one after this one is merged?

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 4, 2024

@jvaclavik What do you think of my proposed design?
So basically to open a dialog when it is clicked

@jvaclavik
Copy link
Collaborator

@jvaclavik What do you think of my proposed design?

So basically to open a dialog when it is clicked

I have few suggestions:

  • padding should be as small as possible to save as much space as possible
  • i suggest not showing loading (or potential error state) because it doesn't tell user anything and it disrupts his attention
  • it should have the same background style as legend (blur and color)
  • i think it should be possible to hide it completely in user settings dialog

@zbycz
Copy link
Owner

zbycz commented Nov 5, 2024

I just moved isImperial() to the user settings context, this makes it very easy to fix #572. Should I do it in this pr or open a new one after this one is merged?

As you wish, but different PR is better 🙂

@zbycz
Copy link
Owner

zbycz commented Nov 5, 2024

It looks very good now.

As this is very visible feature to all, please also mind the light mode. The cloud is almost invisible on light background. I suggest adding a filter to add more contrast.

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 5, 2024

I still have to look through the code once before merging, but how do you feel about the design and functionality now, @zbycz and @jvaclavik?

@Dlurak
Copy link
Collaborator Author

Dlurak commented Nov 6, 2024

I implemented all of the feedback and added a an extensive view once it is clicked. I think we are ready to merge 🎉

@Dlurak Dlurak merged commit d4644ad into zbycz:master Nov 6, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Weather widget
3 participants