Getting Started

Getting Started

Getting started with MapsGL is quick and easy and requires that you have an active Xweather Flex subscription (opens in a new tab).

Supported Mapping Libraries

MapsGL current supports integration with the following third-party mapping libraries:

KeyLibrary + VersionController
mapboxMapbox GL (opens in a new tab), version 2.0.0+MapboxMapController
maplibreMapLibre (opens in a new tab), version 2.0.0+MaplibreMapController
googleGoogle Maps (opens in a new tab), version 3.50.9+GoogleMapController
leafletLeaflet (opens in a new tab), version 1.6.0+LeafletMapController


Our MapsGL SDK is distributed as an ES6-compatible Javascript bundle that can be used with all modern browsers. You can install the MapsGL SDK either by using our precompiled CDN assets or our NPM package with a bundler. We also offer a React library (opens in a new tab) for quickly adding MapsGL features into your React applications.

Follow the series of steps outlined below for your desired method to get started using the Xweather MapsGL SDK:

Install Using CDN Assets

Create an Xweather account

Sign up for an Xweather Flex subscription (opens in a new tab) and setup your access keys as described in our Xweather Weather API's getting started guide (opens in a new tab). We offer a free developer account (opens in a new tab) for you to give our weather API a test drive.

Include the MapsGL SDK

Include the MapsGL SDK in your application from our CDN, typically by using a script include in your HTML page:

<script defer src="{% $paths.sdk %}"></script>
<link href="{% $paths.css %}" rel="stylesheet" />

Set up a map view

Set up an interactive map instance using a supported third-party mapping library if your application does not have one already.

Set up MapsGL with your map

Set up your Xweather account access keys (opens in a new tab) for the SDK and create a map controller instance that corresponds to the mapping library you are using.

You can use the following HTML code snippet to get started quickly using Mapbox. Just update the code to use your Xweather account access keys and Mapbox token instead.

<link href="{% $versions.mapbox.current %}/mapbox-gl.css" rel="stylesheet" />
<script defer src="{% $versions.mapbox.current %}/mapbox-gl.js"></script>
<script defer src="{% $paths.sdk %}"></script>
<link href="{% $paths.css %}" rel="stylesheet" />
<div id="map"></div>
window.addEventListener('load', () => {
    // set access token for mapping library as needed
    mapboxgl.accessToken = 'MAPBOX_TOKEN';
     * Create your map instance.
    const map = new mapboxgl.Map({
        container: document.getElementById('map'),
        style: 'mapbox://styles/mapbox/light-v11',
        center: [-74.5, 40],
        zoom: 3,
        projection: 'mercator'
     * Set up your AerisWeather account and access keys for the SDK.
    const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
     * Create a map controller that corresponds to the selected mapping library, passing in
     * your `map` and `account` instances.
    const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
     * Add functionality and data to your map once the controller's `load` event has been triggered.
    controller.on('load', () => {
        // do stuff, like add weather layers

Managing Weather Data

Adding and removing weather layers once you've created your map instance is simple. All you need is the layer code associated with the layer you want to add, which is typically the same as the Aeris Maps (Raster Maps) layer code.

Refer to the Weather Layers documentation for more information on adding and removing weather data with your map.

Adding Custom Layers

In addition to the built-in weather layers, you can also add custom data to your map as long as it is available in one of the supported data formats. Check out our Advanced Usage documentation for more information.

Styling Layers

Since everything is styled client-side, you have full control over the styling and visual appearance of your map data when using the MapsGL SDK. Check out our styling guide for more details and examples to get started.