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:
To get started with the Aeris.js library, you will need to add a link to the library code in your page.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Animated Weather with Aeris.js</title> <!-- Link to Aeris.js library --> <script type="text/javascript" src="//cdn.aerisjs.com/aeris.min.js"></script> </head> <body> </body> </html> |
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.
|
1 2 3 4 5 6 |
<!--Link to Leaflet Library and stylesheet--> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css"/> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script> <!-- Link to Aeris.js library --> <script type="text/javascript" src="//cdn.aerisjs.com/aeris.min.js" ></script> |
Aeris.js also supports Google Maps, if you prefer:
|
1 2 3 4 5 |
<!-- Link to Google Maps Library --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script> <!-- Link to Aeris.js library (google maps version) --> <script type="text/javascript" src="cdn.aerisjs.com/aeris-gmaps.min.js"></script> |
To access Aeris.js weather features, you will need to sign up for a free AerisWeather 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 AerisWeather API account, you will need to register API keys for your website. From your account dashboard, click on the AerisWeather API-Application/Website Registration Link.
So let’s get back to your code. To tell the Aeris.js library about your AerisWeather API account, you will need to configure your keys.
|
1 2 3 4 5 6 7 8 9 |
<body> <script type="text/javascript> aeris.config.set({ apiId: my-consumer-id', apiSecret: 'my-consumer-secret' }); </script> </body> |
Now we’re ready to start making weather maps!
To start, you’ll need to create an HTML element which will serve as the home for your AerisWeathermap.
|
1 2 3 |
<body> <div id="map-canvas"style=width: 800px; height: 600px;"></div> </body> |
The AerisWeather 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 AerisWeather map:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <div id="map-canvas" style="width: 800px; height: 600px;"></div> <script type="text/javascript"> var map; // Don't forget your API keys! aeris.config.set ({ apiId: 'my-consumer-id' apiSecret: 'my-consumer-secret' }); // Create an Aeris map map=new aeris.maps.Map ( 'map-canvas' ) ; </script> </body> |
Open the page, and you’ll see our map. But a plain map is kind of boring — it’s time to add some weather!
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:
|
1 2 3 4 5 6 7 8 |
// Our base map var map = new aeris.maps.Map( 'map-canvas' ) ; // Create a radar layer var radar = new aeris.maps.layers.Radar() ; // Create a satellite layer var satellite = new aeris.maps.layers.Satellite( ) ; |
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?!
|
1 2 3 |
// Add our radar and satellite layers to the map radar.setMap(map) ; satellite.setMap(map) ; |
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 | |
|---|---|
| ADVISORIES | aeris.maps.layers.Advisories |
| CHLOROPHYLL | aeris.maps.layers.Chlorophyll |
| DEW POINTS | aeris.maps.layers.DewPoints |
| HUMIDITY | aeris.maps.layers.Humidity |
| RADAR | aeris.maps.layers.Radar |
| SATELLITE | aeris.maps.layers.Satellite |
| GLOBAL SATELLITE | aeris.maps.layers.SatelliteGlobal |
| VISIBLE SATELLITE | aeris.maps.layers.SatelliteVisible |
| SEA SURFACE TEMPS | aeris.maps.layers.SeaSurfaceTemps |
| SNOW DEPTH | aeris.maps.layers.SnowDepth |
| TEMPERATURES | aeris.maps.layers.Temperatures |
| WIND CHILL | aeris.maps.layers.WindChill |
| WIND SPEED | aeris.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:
|
1 2 3 4 |
// Create the layer var temps = new aeris.maps.layers.Temps( ) ; temps.setMap(map) ; |
To remove any layer, you can set the map to null.
|
1 2 3 4 5 |
// Remove the temps layer temps.setMap (null) ; // And add it back again temps.setMap (map) ; |
You can also manipulate existing layers:
|
1 2 3 4 5 6 |
// Change the opacity of the radar layer radar.setOpacity(0.5) ; // Move the temps layer in front of the satellite layer satellite.setZIndex(1) ; temps.setZIndex(2) ; |
To see all of the Aeris.js layers in action, check out the tile layers demo. (source)
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:
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.
3 Comments
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
Hello, this is a fab service and post, is this US only or available for Europe?
How do I specify the long and lat