1. Help Center
  2. Documentation
  3. Documentation
  4. Examples

AerisWeather Maps

HERE Maps API Integration

AerisWeather provides a suite of tools for using our layers with various mapping libraries, including the AerisWeather JavaScript SDK. In some use cases, you may have existing applications using the HERE platform and associated HERE Maps Javascript API, which you can add Maps layers to. The following provides an example of AerisWeather radar layer integrated with the HERE Maps Javascript API library.

 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>HERE Integration - AerisWeather Maps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

</head>
<body>
<div id='map'></div>

<script>

const AERIS_ID = 'CLIENT_ID';
const AERIS_KEY = 'CLIENT_SECRET';

window.addEventListener('load', () => {
    const platform = new H.service.Platform({
        apikey: 'HERE_API_KEY'
    });
    const defaultLayers = platform.createDefaultLayers();

    const map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
        center: new H.geo.Point(44.96, -93.27),
        zoom: 5
    });
    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    const tileProvider = new H.map.provider.ImageTileProvider({
        getURL: function(column, row, zoom) {
            const server = Math.abs(column + row) % 4 + 1;
            return `https://maps${server}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/radar/${zoom}/${column}/${row}/0.png`;
        }
    });
    const tileLayer = new H.map.layer.TileLayer(tileProvider);
    map.addLayer(tileLayer);
});

</script>

</body>
</html>

Last modified: August 02, 2021