https://github.com/rainviewer/rainviewer-api-example

How to use RainViewer API: simple HTML + JS code which render an animated weather radar overlay on the map
https://github.com/rainviewer/rainviewer-api-example

animation example leaflet leafletjs weather weather-api

Last synced: 2 months ago
JSON representation

How to use RainViewer API: simple HTML + JS code which render an animated weather radar overlay on the map

• Host: GitHub
• URL: https://github.com/rainviewer/rainviewer-api-example
• Owner: rainviewer
• Created: 2019-06-12T22:05:43.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-07-06T22:13:02.000Z (over 2 years ago)
• Last Synced: 2023-08-06T10:50:44.470Z (over 1 year ago)
• Topics: animation, example, leaflet, leafletjs, weather, weather-api
• Language: HTML
• Size: 14.6 KB
• Stars: 67
• Watchers: 5
• Forks: 25
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# RainViewer API Example

Easy to understand HTML + JS code, which displays weather radar (past and future) and infrared satellite tiles on the map. The main using the [Leaflet.js](https://leafletjs.com) library with [OpenStreetMap](https://openstreetmap.org) as a base map solution. Version for [Google Maps](https://developers.google.com/maps/documentation/javascript/overview) and [MapBox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) also available in a separate files.

Check it in your browser: [rainviewer-api-example.html](https://rainviewer.github.io/rainviewer-api-example/rainviewer-api-example.html)

### What covered here

* How to download the latest available API JSON with the available map products and frames.

* How to add tiled layers into the mapping library.

* How to animate, move forward or backward in the animation.

* How to display frame time.

* How to change options and map products.

### What does not covered here

* How to update the API JSON periodically and add new frames or replace completely outdated forecast.

* Memory and performance optimizations.

## Mapbox and Google Maps examples

For MapBox and Google Maps, you need to use a pretty similar code, but you need to put your API key in that examples to display the base map. Search for YOUR_API_KEY_HERE in the source code and replace it with your own key. These files will not display the map until you put your API KEY in it.