November 19

Storm Reports with the AerisWeather API

In a 24-hour period from noon on Tuesday, Nov 17 through noon on Wednesday, Nov 18th, more than 1,000 storm reports were reported across the U.S. The AerisWeather API provides quick access to these reports for use within applications, including many of the available javascript and mobile mapping platforms. Today, we will step through adding storm reports to an interactive map using the AerisWeather API, GeoJSON and the Leaflet mapping library.

AerisWeather API now has GeoJSON Support

The 1.4 release of the AerisWeather API added several new features, including GeoJSON support. GeoJSON is a common method for transferring geospatial data between systems and is supported by many modern mapping platforms, including Leaflet and Google Maps.  More information about GeoJSON can be found within its specification.

With most AerisWeather API endpoints, you now have the option to return data in our default JSON format or as GeoJSON. To request data in GeoJSON, simply use the new “format” parameter with a value of “geojson”:

Alternatively, when making the API request you can pass the following “Accepts” header to change the response format:

Adding Storm Reports to a Leaflet Map

Leaflet is an open source JavaScript library used within several products at AerisWeather, including our open source AerisJS library and the AerisWeather Interactive Maps SDK.  Leaflet includes native support for GeoJSON and offers a great tutorial.

In our examples, we will be adding the past 12 hours of storm reports within the U.S. to a Leaflet map.  The following is the API request we will be using for each example:

The full source code for all of the following examples is available from our examples repo.

Example 1 – Simple GeoJSON Integration

In our first example, we start by creating a Leaflet Map with an OpenStreetMap base layer:

Next, we will perform an AJAX request for the storm report data from the AerisWeather API. Once received, we use the Leaflet L.geoJson method to add the data layer to the map:

Since no styling information was included, Leaflet displays the storm reports as default markers as seen in this live demo.

Example 2 – Storm Reports with Basic Styling

While it’s simple to add the storm reports to a map using the default Leaflet markers, they would definitely look and read better with some additional styling. In this second example, we adjust the earlier code to render the storm reports as filled circles:

The ‘pointToLayer’ callback was used to create each circle marker with basic styles for each storm report returned by the AerisWeather API.

Example 3 – Fully Stylized Storm Report Integration

Storm Reports with Aeris Weather API

In our third example, we demonstrate a more complete integration of storm reports via the AerisWeather API. A separate AerisStormReports class is utilized to manage fetching, adding and updating the storm reports on the map. Additionally, each storm report is styled per category, such as wind, rain, snow or tornado.

You can review the complete AerisStormReports class and accompanying project files at our Github repo.

In summary, the AerisWeather API provides many tools that allow developers to quickly integrate weather data into existing mapping platforms to create unique offerings for both web and mobile users. Check out our FREE developer accounts and start integrating weather into your apps today!


Share this post:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.