MapTilerLayer

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

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

Read more

<html>
  <head>
    <title>Add Map</title>
    <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=default"></script>
    <style>
/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

      /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
 #map {
  height: 100%;
  width:100%;
  margin:0;
  padding:0;
}
    </style>
  </head>
  <body>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR_GOOGLE_API_KEY", v: "beta"});</script>
    <script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
    <script type="module">
      // Initialize and add the map
let map;

const key = 'YOUR_MAPTILER_API_KEY_HERE';

async function initMap() {
  const position = { lat: 31.433639, lng: -100.470039 };
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const {LatLngBounds, LatLng} = await google.maps.importLibrary("core");

  map = new Map(document.getElementById("map"), {
    zoom: 3,
    center: position,
    streetViewControl: false,
  });

  var mapBounds = new LatLngBounds(
    new LatLng(31.433639, -100.470039),
    new LatLng(31.444161, -100.448983));
  var mapMinZoom = 12;
  var mapMaxZoom = 18;

  map.fitBounds(mapBounds);

  var overlay = new klokantech.MapTilerMapType(map, function (x, y, z) {
    return `https://api.maptiler.com/tiles/YOUR_MAPTILER_TILESET_ID_HERE/{z}/{x}/{y}.png?key=${key}`.replace('{z}', z).replace('{x}', x).replace('{y}', y);
  },
  mapBounds, mapMinZoom, mapMaxZoom);

  var opacitycontrol = new klokantech.OpacityControl(map, overlay);

  var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);
}

initMap();
    </script>
  </body>
</html>
HTML

Reference

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

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.
  • opt_dontAdd {boolean} Layer should be created but not added to the map.

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>

klokantech.GeolocationControl(map, opt_maxZoom, opt_controlPosition)

Params

  • map {google.maps.Map} Map object.
  • opt_zoom {number} Zoom to use when first position is obtained.
  • opt_controlPosition {google.maps.ControlPosition}

Learn more

Checkout the example Two overlays on GoogleMaps with Opacity Control