Create Animated Weather Maps with Leaflet and AerisWeather

Leaflet is the leading open-source JavaScript library for responsive, detailed, and extensible maps. Encompassing just 39 kilobytes of JavaScript code, this lightweight dependency takes advantage of the powerful OpenStreetMap basemap and supports both standard geocoded raster and vector imagery as well as WMS tile layers. AerisWeather users have long requested a tutorial teaching how to integrate with this library and we’re excited to deliver a solution.

Building on previous iterations of tutorials where we’ve shown AerisWeather users how to use multiple tile servers, we’ll walk through integrating AerisWeather Maps with Leaflet’s powerful tile mapping library to create striking and informative weather maps that display radar alongside various locations of importance to track incoming storms. At the end of this quick tutorial, we’ll summarize the code for easy modification.

Getting Started – CSS and Leaflet Libraries

Within the Header tags of our document, we will need to incorporate basic CSS to style our map and force it to occupy the full width of its container. We’ll also need to load our Leaflet libraries and stylesheet:

Place and Configure Your Map

Now let’s move into the body content of the target site or application. To place your map within a container or on a page, denote your map’s location in the destination app or webpage by copy-pasting the below div tag into your site:

Afterwards, let’s incorporate our basic script and start setting attributes for our map. In script tags, let’s begin by specifying some locations for map pins (via GPS coordinates), defining our total intervals (the number of frames you want your animation to include) and time offset (how far in the past you want your animation to begin):

The above will require you to fill in values with your unique CLIENT_ID and CLIENT_SECRET from your AerisWeather account dashboard, these spaces have been denoted in the code. If your clients utilize slow internet connections or utilize 3G or slower in the field, NUM_COLORS is set to 256 to improve imagery load times. You can set this blank for applications where a fast and reliable internet connection are guaranteed.

Now let’s add an AerisWeather map layer! You can add as many as you like, but we’ll utilize global radar for the purpose of this project.

Here comes the fun part, constructing our URL to request AerisWeather Maps’ tile layers and instructing it to request from multiple servers simultaneously:

Render Your Map and Pins

If you’re thinking this is even easier than our other mapping integration tutorials, that’s because it is! Fewer keys, fewer variables – and loads of configurable options. Let’s render our map and generate those pins we added coordinates for to highlight locations we care about – after all, one of the best parts of Leaflet is all of the extra features available to include within your maps! The following code block contains editable constants to denote different wait times (to give data time to load before trying to render it) as well as step times (to define how long to wait between each animated frame). These constants are blatantly named in the code example. Feel free to adjust these as needed depending on your network performance and business needs.

An Easy Integration

If you noticed the </script> tag in the previous code block, that’s because we’re done! You may view a functioning embed of this code without the pins on the Leaflet example page.

Leaflet’s ability to work in tandem with AerisWeather’s powerful Maps as well as our Weather API underscore its ease-of-use in a business setting. With no auth token or account to manage on the Leaflet side, it’s clear why many developers flock to this choice when they simply need to represent geospatial data in a clean and legible manner. Interested in this solution or similar weather map making solutions utilizing Mapbox or Google Maps? Try our free developer account for 30 days or contact our sales team to discuss your unique needs!

As promised, the full code block sits below:

Share this post: