MapTilerLayer

Image overlay for GoogleMaps with Opacity Control

A simple library which adds easy support for Overlay to Google Maps API. I also adds a simple Opacity Control for use with Google Maps, which allows you to change the opacity of your tile overlay.

The easiest way to prepare map for Google Maps overlay is to use MapTiler.

Read more about MapTiler

Usage in page

<!DOCTYPE html>
<html>
  <head>
    <title>Grand Canyon USGS</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://www.maptiler.com/maptilerlayer/v1/index.js"></script>
    <script>

      function init() {
        var opts = {
          streetViewControl: false,
          tilt: 0,
          center: new google.maps.LatLng(0, 0),
          zoom: 3
        };

        var map = new google.maps.Map(document.getElementById('map'), opts);
          var mapBounds = new google.maps.LatLngBounds(
              new google.maps.LatLng(35.98245136, -112.26379395),
              new google.maps.LatLng(36.13343831, -112.10998535));
          var mapMinZoom = 10;
          var mapMaxZoom = 16;
        var overlay = new klokantech.MapTilerMapType(map, function(x,y,z) {
          return "http://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png".replace('{z}',z).replace('{x}',x).replace('{y}',y); },
        mapBounds, mapMinZoom, mapMaxZoom);

        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        var opacitycontrol = new klokantech.OpacityControl(map, overlay);

        map.fitBounds(mapBounds);
      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>
          

Documentation

klokantech.MapTilerMapType(map, tileurl, opt_bounds, opt_minZoom, opt_maxZoom)

Params
  • map {google.maps.Map} Map object.
  • tileurl {function} function(number, number, number) Function which returns url to tile.
  • opt_bounds {google.maps.LatLngBounds} Overlay bounds.
  • opt_minZoom {number} Minimal zoom of layer.
  • opt_maxZoom {number} Maximal zoom of layer.
Methods
  • getTile(tileCoord, zoom, ownerDocument)
  • setOpacity(value) Sets opacity to value <0,1>

klokantech.OpacityControl(map, layer, opacity)

Params
  • map {google.maps.Map} Map object.
  • layer {Object} Layer for opacity change.
  • opacity {number} Default opacity of layer.
Methods
  • setOpacity(value) Sets opacity to value <0,1>