Google Map Layers

By 7425wpczar,

  Filed under: Uncategorized
  Comments: None

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);
}

Be the first to write a comment.

Your feedback