May 27

Video: Getting Started With The Aeris.js Library

Aeris.js is an open source javascript library for developing rich interactive weather maps and weather widgets. Access the latest release via the Aeris.js GitHub. Today we’re going to walk through the steps on how to create a weather map using Aeris.js. You can see working demos at demo.aerisjs.com.

In this tutorial, we walk you through:

  1. Embedding the Aeris.js library in our webpage.
  2. Signing up for an Aeris Weather API account & configuring our API keys.
  3. Creating a base map.
  4. Adding & manipulating weather tile layers.

 

Getting Started

To get started with the Aeris.js library, you will need to add a link to the library code in your page.

Aeris.js relies on Leaflet to render the base maps, so we will also need to include the Leaflet library next to the Aeris.js library.

Aeris.js also supports Google Maps, if you prefer:

Configuring your Aeris API Keys

To access Aeris.js weather features, you will need to sign up for a free Aeris Weather API account. This gives you access to a robust weather data API, as well as the radar and satellite tile layers we will need to create our weather map.

Once you’ve created your Aeris API account, you will need to register API keys for your website.  From your account dashboard, click on the Aeris API-Application/Website Registration Link.

So let’s get back to your code. To tell the Aeris.js library about your Aeris API account, you will need to configure your keys.

Now we’re ready to start making weather maps!

Creating a Weather Map

To start, you’ll need to create an HTML element which will serve as the home for your aeris map.

The Aeris map will expand to the full size of its container element, so we made sure to set a width and height on our map canvas.

Next, we create our Aeris map:

Open the page, and you’ll see our map.  But a plain map is kind of boring — it’s time to add some weather!

Adding Radar and Satellite Layers

Aeris.js uses tile layers to render weather data such as radar and satellite.  Tile layers are simply collections of images which are overlaid on top of the map.

To add tile layers to our map, we’ll first need to create some layer objects:

If you open up your application, you’ll see that nothing has changed.  That’s because we’ve created our layers, but we haven’t yet added them to our map.  So what are we waiting for?!

Additional Weather Layers

We’ve taken a quick look at creating a map with a couple of tile layers, but radar and satellite are just two of more than a dozen layers provided by the aeris.js library.  Here’s a full list of layers supported by the current version:

 

TILE LAYERS 
ADVISORIESaeris.maps.layers.Advisories
CHLOROPHYLLaeris.maps.layers.Chlorophyll
DEW POINTSaeris.maps.layers.DewPoints
HUMIDITYaeris.maps.layers.Humidity
RADARaeris.maps.layers.Radar
SATELLITEaeris.maps.layers.Satellite
GLOBAL SATELLITEaeris.maps.layers.SatelliteGlobal
VISIBLE SATELLITEaeris.maps.layers.SatelliteVisible
SEA SURFACE TEMPSaeris.maps.layers.SeaSurfaceTemps
SNOW DEPTHaeris.maps.layers.SnowDepth
TEMPERATURESaeris.maps.layers.Temperatures
WIND CHILLaeris.maps.layers.WindChill
WIND SPEEDaeris.maps.layers.Winds

To use any of layers, simply create the layer object, then add it to your map.  For example, if you want to add a temperatures layer:

To remove any layer, you can set the map to null.

You can also manipulate existing layers:

To see all of the Aeris.js layers in action, check out the tile layers demo.  (source)

More Features, plz! 

Playing with weather layers is a lot of fun, but this is just the tip of the iceberg when it comes to features in the Aeris.js library.  Some of the other features provided by the library include:

  • Tile layer animation
  • Point data markers (storm reports, earthquakes, lightning and more)
  • Weather data models and collections (using Backbone.js)
  • Geolocation and Geocode services
  • Support for Google Maps, Leaflet and Open Layers

Check out demos of some of our features at demo.aerisjs.com.  Want to see how everything works?  Our entire library is open source, so take a peek or contribute your own code at Github.  We’re adding new features every week, so speak up and let us know what you would like to see in Aeris.js.

In our next tutorial, we’ll take a look at animating our tile layers and creating a control panel to manipulate the animation.

Share this post:

3 Comments

  1. remi
    September 21, 2015 at 9:14 am

    hello
    nice explains, if i want to use my own background map and not openmap is possible ?

    sorry for my english but i’m spanish

  2. February 17, 2016 at 9:09 am

    Hello, this is a fab service and post, is this US only or available for Europe?

  3. Peter Kuria
    July 27, 2018 at 1:06 pm

    How do I specify the long and lat

Leave a Reply

Your email address will not be published. Required fields are marked *

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