January 9

AerisWeather JavaScript SDK Beta 3 Released

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:

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   method on the AerisWeather instance you’ve instantiated. This method takes three arguments, but only the first one is required:

  •  : 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.
  •  : An optional object containing the configuration options for your map. If omitted, your interactive map will use the default configuration.
  •  : 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   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:

Aeris JavaScript SDK using the default LeafletJS mapping library

Alternatively, using a callback function as the third argument to the   method instead of a Promise:

Then within your Promise’s   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:

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   to   and setting the value for   to your Mapbox account’s access token:

After making this change, your interactive map will use Mapbox GL as the base mapping library:

Aeris JavaScript SDK using the Mapbox GL 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:

Your interactive map will now use the OpenLayers mapping library instead:

Aeris JavaScript SDK using the OpenLayers mapping library

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.


Share this post:

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.