Overlay Map Types

by Wolf

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.
 */

/** @constructor */
class FloodMapType {
  constructor(tileSize) {
    this.tileSize = tileSize;
  }

  getTile(coord, zoom, ownerDocument) {
    const {
      y,
      x
    } = coord;
    const z2 = (2) ** zoom;
    const xCalculated = x >= 0 ? x : z2 + x;
    const url = `https://tiles.floodiq.com/2018-flc3/${zoom}/${xCalculated}/${y}.png`;
    const img = new Image(this.tileSize.width, this.tileSize.height);
    img.src = url;
    img.style.opacity = '0.5';
    const div = ownerDocument.createElement('div');
    //    div.style.width = this.tileSize.width + 'px';
    //    div.style.height = this.tileSize.height + 'px';
    div.appendChild(img);
    return div;
  }
}

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: 'hybrid',
    streetViewControl: false,
    zoom: 12,
    center: {
      lat: 25.7823072,
      lng: -80.3010432
    }
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
    0, new FloodMapType(new google.maps.Size(256, 256)));
}