In this challenge, students will use OpenFreeMap with the MapLibre library to visualize bike-sharing stations in Madrid using the CityBik API.
After initializing the map in index.js, you should:
- Configure the map for a global view centering it on Madrid.
- Use the endpoint
https://api.citybik.es/v2/networks/bicimadto retrieve all available bike-sharing networks in Madrid city.
- For each network retrieved, add a marker on the map at the coordinates of each station.
- Add a button that centers the map on the user’s location using the
https://api.techniknews.net/ipgeo/API.
- Change the color of the markers based on bike availability (e.g., green for high availability, yellow for medium, red for low or no availability) Check if the API gives this information already.
- When clicking a marker, show a popup with the station’s name, address, the number of available bikes, and the number of available bike slots.
- Each 10 seconds, update the markers on the map to show updated information about bike availability.
