Using with Google 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 Google Maps JS SDK (opens in a new tab), which you can add Maps layers to.

The following provides an example of the Xweather Raster Maps radar layer integrated with the Google Maps JS SDK (opens in a new tab) library.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
 
<script>
    var gmap;
    function initMap() {
        gmap = new google.maps.Map(document.getElementById("map"), {
            center: {lat: 44.96, lng: -93.27},
            zoom: 5
        });
 
        var radar = new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return ["https://maps.api.xweather.com/{client_id}_{client_secret}/radar/",
                    zoom, "/", coord.x, "/", coord.y, "/current.png"].join("");
            },
            tileSize: new google.maps.Size(256, 256)
        });
        gmap.overlayMapTypes.push(radar);
 
    }   
</script>
<script src="https://maps.googleapis.com/maps/weather-api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>
</body>
</html>

Using with Mapbox Using with ArcGIS