Raster Maps - Using with HERE Maps

Xweather provides a suite of tools for using our layers with various mapping libraries, including the Xweather JavaScript SDK. In some use cases, you may have existing applications using the HERE platform and associated HERE Maps Javascript SDK , which you can add Raster Maps layers to.

The following provides an example of Xweather Raster Maps radar layer integrated with the HERE Maps Javascript API library.


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>HERE Integration - Xweather Raster 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>