Vue Website: Map with custom hillshade

Job ID: 36740817

Budget: €30 – €250 EUR

Basic functionality:
- map with custom (azimut and colors) hillshade
-- azimut set by current weather (wind)
-- azimut set by hourly weather (wind) forecast for 3 days at least
- User login (Firebase)
- POIs (user, global - must be accepted by admin)
-- POIS have a heading and width, if the wind is inside this its good, if it's outside its bad.

Long description:
I need a map (base: opentopomap or similar) with custom hillshading.
The hillshade needs to have adjustable colors (default red/green) and adjustable azimut.

Using the open-meteo.com API you need to query for the current wind (in low zoom scales) and adjust the azimut according to the wind. "Luv" sides (slopes facing the wind) will be green, "lee" sides (slopes fasing away) will be red. the basic idea is to show where the wind hits mountains (https://en.wikipedia.org/wiki/Ridge_lift)

POIs will indicate the wind at special locations. POIs can be made by users individually or globally. Global POIs need to be accepted by the admin. The POIs can best be described like in the https://www.paraglidingmap.com/app/. They can be simplified though (heading, heading width, minimum, maximum wind, geolocation, picture, description, name)

WRITTEN IN JS (Vue) if possible (and some style framework like bootstrap, vuetify, ...)
HOSTED on my custom domain

---------

Please, in your message, offer me two things
1. The complete web-app
2. Only the map, without users and POIs
Related categories: Cartography & Maps Vue.js