Overlay Map Types

by hoogw

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

function tile2long(x,z) {
  return (x/Math.pow(2,z)*360-180);
 }
 function tile2lat(y,z) {
  var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
  return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
 }



/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  
  
  //********** open street map tiles overlay ************
  
  /*
  var tile_url = 'https://tile.openstreetmap.org/' +zoom+ '/' +coord.x + '/' +coord.y + '.png'
  
  var tile_img = document.createElement("IMG");
  tile_img.setAttribute("src", tile_url);
   tile_img.setAttribute("width", this.tileSize.width);
    tile_img.setAttribute("height", this.tileSize.height);
    tile_img.setAttribute("alt", "open street tiles");
  */
   //***** End ***** open street map tiles overlay ************
  
  
  
  // ------------ arcgis server overlay ----------------
  
  	var x = coord.x;
        var y = coord.y;
        var z = zoom;

        var NW_long = tile2long(x,z);

        var SW_long = tile2long(x,z);
        var SW_lat =  tile2lat(y+1,z);

        var NE_long = tile2long(x+1,z);
        var NE_lat =  tile2lat(y,z);


        
       	var export_bbox...