Examples
Create an Interactive Map App using MapLibre

Create an InteractiveMapApp using MapLibre

An InteractiveMapApp can be created using MapLibre by changing the map config strategy to 'maplibre'. Also notice in the config how we moved the legend over to the lower left as well as slightly bumping the timeline up.

Maplibre as the baselayer in an InteractiveMapApp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Aeris JavaScript SDK - Create an Interactive Map App using MapLibre</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">
 
  <style>
  #map {
      height: 600px;
      margin: 30px auto;
      width: 1000px;
 
  }
  </style>
 
</head>
<body>
 
<div id="map"></div>
 
<script>
 
    window.onload = () => {
 
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
 
        aeris.apps().then((apps) => {
            const map = new apps.InteractiveMapApp('#map', {
                map: {
                    strategy: 'maplibre',
                    style: 'https://demotiles.maplibre.org/style.json',
                    zoom    : 4,
                    layers  : 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id   : 'radar',
                            value: 'radar:80',
                            title: 'Radar'
                        }, {
                            id   : 'satellite',
                            value: 'satellite:75',
                            title: 'Satellite'
                        }, {
                            id   : 'alerts',
                            value: 'alerts',
                            title: 'Alerts'
                        }]
                    }, 
                    legends: {
                        position: {
                            pin: 'bottomleft',
                            translate: { x: 10, y: -30 }
                        }
                    },
                     timeline: {
                        position: {
                            translate: {x: 0, y: -15}
                        }
                    }
                },
            });
        });
    };
 
</script>
</body>
</html>