Google Map Layers
For displaying map tiles over Google Maps you must first make a Google Account and get an API Key from the Google API Console (https://developers.google.com/maps/documentation/javascript/get-api-key). After the API Key is obtained you can use the following approach for displaying the tiles:
1) Load the Google Maps Javascript API, substitute YOUR_API_KEY in the code below with your API key:
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” type=”text/javascript”></script>
2) Get current time slot value t from metadata call (the subscriptionKey key variable is your Earth Networks subscription key)
var t;
var subscriptionKey;
var json = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "https://earthnetworks.azure-api.net/maps/overlays/v2/metadata?lid=Radar.NA.LoAlt&subscription-key=" + subscriptionKey,
'dataType': "json",
'success': function(data) {
json = data;
}
});
return json;
})();
t = json.Result.LatestSlot;
3) Initiate the map with the following code where the t variable is the current time slot value got from metadata call
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 37.514938, lng: -99.337306 }
});
var imageMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "https://earthnetworks.azure-api.net/maps/overlays/tile?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom + "&t=" + t + "&lid=pulserad&epsg=3857&subscription-key=" + subscriptionKey
},
tileSize: new google.maps.Size(256, 256)
});
map.overlayMapTypes.push(imageMapType);
}