Getting Started

<link href="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.css" rel="stylesheet" />
<script defer src="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.js"></script>
 
<script defer src="{% $paths.sdk %}"></script>
<link href="{% $paths.css %}" rel="stylesheet" />
 
<div id="map"></div>
 
<script>
 
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
        controller.addWeatherLayer('temperatures');
    });
 
});
 
</script>