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>