WMTS with Google Maps and Open Layers

by HoffZ

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true&amp;libraries=drawing"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol-debug.js"></script>
<div id="gmap">

</div>

<div id="olmap"></div>

CSS

#gmap,
#olmap {
  height: 999px;
  width: 999px;
}

JavaScript

jsvar gmap = new google.maps.Map(document.getElementById('gmap'), {
  disableDefaultUI: true,
  keyboardShortcuts: false,
  draggable: false,
  disableDoubleClickZoom: true,
  scrollwheel: false,
  streetViewControl: false
});        

var epsgCode = 'EPSG:3857', // UTM 33N
  projection = ol.proj.get(epsgCode),
  projectionExtent = projection.getExtent(),
  size = ol.extent.getWidth(projectionExtent) / 256,
  resolutions = [],
  matrixIds = [];

for (var z = 0; z <= 21; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = epsgCode + ':' + z;
}

var view = new ol.View({
  maxZoom: 21
});

view.on('change:center', function() {
  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
  gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
  gmap.setZoom(view.getZoom());
});

view.setCenter([0,0]);
view.setZoom(1);

var vector = new ol.layer.Vector({
  source: new ol.source.WMTS({
    url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?',
    layer: 'topo4graatone',
    matrixSet: epsgCode,
    format: 'image/png',
    projection: 'EPSG:3857',
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.6)'
    }),
    stroke: new ol.style.Stroke({
      color: '#319FD3',
      width: 1
    })
  })
  
});

var tile = new ol.layer.Tile({
  source: new ol.source.WMTS({
    url: 'https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?',
    //layer: 'norges_grunnkart_graatone',
    layer: 'topo4graatone',
    matrixSet: epsgCode,
    format: 'image/png',
    projection: projection,
    tileGrid: new ol.tilegrid.WMTS({
      origin: ol.extent.getTopLeft(projection.getExtent()),
      resolutions: resolutions,
      matrixIds: matrixIds
    }),
    attributions: [new ol.Attribution({
      html: '<a href="http://kartverket.no/">Kartverket</a>'
    })]
  })
})


var olMapDiv = document.getElementById('olmap');

var map = new ol.Map({
...