Using an Existing Map With an InteractiveMap

Setup an interactive map using an existing third-party map instance. The following example will use an existing Mapbox map when setting up an interactive map instance.

Existing Map with an Interactive Map example
Existing Map with an Interactive Map example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Aeris JavaScript SDK - Existing Map with an Interactive Map</title>
    <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
    <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>

    <style>
    #map {
        height: 400px;
        margin: 30px auto;
        width: 800px;
    }
    </style>

</head>
<body>

<div id="map"></div>

<script>

    window.onload = () => {

        mapboxgl.accessToken = 'MAPBOX_TOKEN';
        const mapboxMap = new mapboxgl.Map({
            container: document.getElementById('map'),
            style: 'mapbox://styles/mapbox/dark-v9',
            center: [-85.7, 43.1],
            zoom: 5
        });

        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

        aeris.views().then(views => {
            const map = new views.InteractiveMap(mapboxMap, {
                layers: 'satellite:80,radar',
                timeline: {
                    from: -6 * 3600,
                    to: 0
                }
            });
        });
    };

</script>

</body>
</html>

Last modified: April 02, 2019