Google Maps API with Sentinel Hub Images

Apps / Services
1

Hi. How can i integrate service Google Maps API?

Previously there was an about page in the FAQ and also a code tool in Sentinel Playground.

Anyone can help me? I found reference in this webinar about Google Maps API on the Sentinel Hub channel on YouTube: https://www.youtube.com/watch?v=CBIlTOl2po4

Thanks for attention

2

Hi, please read into our OGC API services documentation. This should help you out

3

Thanks for the answer. Previously it seemed like there was something more specific about Google Maps API both on the FAQ page and in the Sentinel Playground integration tool. Possibly tutorials or code examples. Is there no other option like this?

4

Sentinel Playground generated something close to the code below, but the approach is too old - now you need the google maps api key.

Code in Playground that generated the code is available in github repository

You can follow Google’s instructions for setting up Google maps on your website and use the part for adding Sentinel Hub layer from below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
  <title>Simple SH in Google Maps example</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }

    #devTestingDemo {
      height: 100%;
      width: 100%;
    }
  </style>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>

<body>
  <div id="devTestingDemo"></div>
  <script>
    let map;
    let zoom = 10;
    let lat = 41.9;
    let lng = 12.5;
    let showDates = false;
    let SH_WMS_URL = "https://services.sentinel-hub.com/ogc/wms/<your-instance-id>";
    let SH_WMS_LAYER = "<your-layer-id>";
    let layers = SH_WMS_LAYER + (showDates ? ",DATES" : "");
    let evalscript = undefined;
    let evalscripturl = undefined;

    //Define OSM as base layer in addition to the default Google layers
    let osmMapType = new google.maps.ImageMapType({
      getTileUrl: function (coord, zoom) {
        return "http://tile.openstreetmap.org/" +
          zoom + "/" + coord.x + "/" + coord.y + ".png";
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: true,
      alt: "OpenStreetMap",
      name: "OSM",
      maxZoom: 19
    });

    //Define custom WMS tiled layer
    let SHLayer = new google.maps.ImageMapType({
      getTileUrl: function (coord, zoom) {
        let proj = map.getProjection();
        let zfactor = Math.pow(2, zoom);
        // get Long Lat coordinates
        let top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 512 / zfactor, coord.y * 512 / zfactor));
        let bottom = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 512 / zfactor, (coord.y + 1) * 512 / zfactor));

        //create the Bounding box string
        let bbox = (top.lng()) + "," + (bottom.lat()) + "," + (bottom.lng()) + "," + (top.lat());

        //base WMS URL
        let url = SH_WMS_URL;
        url += "?REQUEST=GetMap"; //WMS operation
        url += "&SERVICE=WMS";    //WMS service
        url += "&VERSION=1.1.1";  //WMS version  
        url += `&LAYERS=${layers}`; //WMS layers
        url += "&FORMAT=image/jpg"; //WMS format
        url += "&SRS=EPSG:4326";     //set WGS84 
        url += "&BBOX=" + bbox;      // set bounding box
        url += "&WIDTH=512";         //tile size in google
        url += "&HEIGHT=512";
        if(evalscript){ // evalscript is optional, overrides the visualization from dashboard if provided 
          url += `&EVALSCRIPT=${evalscript}`;
        }
        if(evalscripturl){ // evalscript url is optional, overrides the visualization from dashboard if provided 
           url += `&EVALSCRIPTURL=${evalscripturl}`;
        }
        return url;                 // return URL for the tile

      },
      tileSize: new google.maps.Size(512, 512)
    });



    initialize();
    function initialize() {
      let mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: 'OSM',
        mapTypeControlOptions: {
          mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN],
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
      };
      map = new google.maps.Map(document.getElementById("devTestingDemo"), mapOptions);
      map.mapTypes.set('OSM', osmMapType);
      map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      //add WMS layer
      map.overlayMapTypes.push(SHLayer);

    }

  </script>
</body>

</html>
1 Like
5

Thank you very much. Your answer was very helpful.

1 Like