Using with HERE Maps

Xweather provides a suite of tools for using our layers with various mapping libraries, including the Xweather JavaScript SDK (opens in a new tab). In some use cases, you may have existing applications using the HERE platform (opens in a new tab) and associated HERE Maps Javascript SDK (opens in a new tab), 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 (opens in a new tab) 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>

Using with ArcGIS Globe Animating with Mapbox