Last November, we released the initial beta of our new, modern AerisWeather JavaScript SDK. The new SDK is designed to be more flexible, easier to use and more lightweight than the previous AerisJS library we released years go. We’ve now released beta 3, getting us even closer to a final 1.0 release.
We released the initial beta with a strong foundation of core features, including:
- configuring and requesting data from the AerisWeather API
- configuring and requesting map imagery from AerisWeather Mapping Platform (AMP)
- a fully-customizable interactive weather map starting with the LeafletJS mapping library
Then in December, we released beta 2 with support for the Mapbox GL mapping library with the interactive weather map feature as well as many bug fixes and improvements. And now with the beta 3 release, we’ve continued this progression of improvements and enhancements by adding support for the OpenLayers mapping library with the interactive weather map.
We covered some basic usage of the SDK in the previous post, so now we’re going to focus on the interactive map and some basic usage and integration examples. In future posts, we’ll dive deeper into the interactive map and outline many of the customization options supported with the library.
In the following examples, we’ll be using the script method for using the AerisWeather JavaScript SDK. Configuring your interactive map using the NPM module would be the same, except the method used to instantiate your map will be different. Refer to the documentation for more information regarding using the NPM module.
Interactive Weather Map
By default, the interactive weather map will use LeafletJS as the default mapping library. So once you’re setup with an active AerisWeather account and have reviewed the documentation on including the SDK library, you’re ready to create your interactive map.
For the interactive map, you’ll be using the
interactive(target, opts, callback)
 method on the AerisWeather instance you’ve instantiated. This method takes three arguments, but only the first one is required:
-
target
 : The DOM element in which you want to render your map. Alternatively, this could also be an instance of the map object for the mapping library you’ve already created.
-
opts
 : An optional object containing the configuration options for your map. If omitted, your interactive map will use the default configuration.
-
callback
 : An optional callback function that is called when your map instance has been initialized. This method will receive the interactive map instance as an argument. Alternatively, the
interactive()
 method also returns a Promise that can be used instead of a callback function.
The following example will render an interactive map using the LeafletJS library centered on Austin, TX (30.26715, -97.74306) with satellite and radar layers:
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<div id="wxmap"></div>
<script>
window.onload = function() {
var aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.interactive('#wxmap', {
center: {
lat: 30.26715,
lon: -97.74306
},
zoom: 6,
layers: 'satellite,radar'
}).then((map) => {
// do stuff with the map
instance...
});
};
</script>
Alternatively, using a callback function as the third argument to the
aeris.interactive()
 method instead of a Promise:
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<div id="wxmap"></div>
<script>
window.onload = function() {
var aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.interactive('#wxmap', {
center: {
lat: 30.26715,
lon: -97.74306
},
zoom: 6,
layers: 'satellite,radar'
}, (map) => {
// do stuff with the map
instance...
});
};
</script>
Then within your Promise’s
then()
 method or your callback function, you can further customize and manipulate your interactive map using any of the available methods on your map instance. For instance, you can add and remove layers using addLayer() and removeLayer() respectively:
map.addLayer('alerts');
map.removeLayer('satellite');
Review our interactive map documentation for additional information and examples regarding configuring and working with your map.
Using Mapbox GL
Instead of the default LeafletJS mapping library, you may wish to use Mapbox GL with your interactive weather map. Doing so requires just a simple change to your map’s configuration — setting the
strategy
 to
mapbox
 and setting the value for
accessToken
 to your Mapbox account’s access token:
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<div id="wxmap"></div>
<script>
window.onload = function() {
var aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.interactive('#wxmap', {
strategy: 'mapbox',
accessToken: 'MAPBOX_TOKEN',
center: {
lat: 30.26715,
lon: -97.74306
},
zoom: 6,
layers: 'satellite,radar'
}).then((map) => {
// do stuff with the map
instance...
});
};
</script>
After making this change, your interactive map will use Mapbox GL as the base mapping library:
Using OpenLayers
You can also use OpenLayers as your mapping library of choice, which will use OpenStreetMaps as the base layer. Just set your map configuration’s strategy property to openlayers:
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<div id="wxmap"></div>
<script>
window.onload = function() {
var aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.interactive('#wxmap', {
strategy: 'openlayers',
center: {
lat: 30.26715,
lon: -97.74306
},
zoom: 6,
layers: 'satellite,radar'
}).then((map) => {
// do stuff with the map
instance...
});
};
</script>
Your interactive map will now use the OpenLayers mapping library instead:
Get Started with the JavaScript SDK
This is just a brief introduction to the interactive map feature of our new JavaScript SDK. Over the coming months, we’ll be expanding our usage documentation and examples as well as posting more in-depth blog posts as we approach our official 1.0 release. Start using the new SDK today! And if you don’t have an AerisWeather account yet, sign up for free to start working with the JavaScript SDK and all of our other toolkits and products.
And while you’re working with the SDK, be sure to provide us with your feedback and suggestions so we can continue to improve it.
Resources
No comments yet.
Be the first to respond to this article.