Leaflet WMTS

Leaflet WMTS TileLayer

by Mladen Petrovic

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map"></div>

CSS

#map { height: 500px; }

JavaScript

// parser function: load GetCapabilities XML from given URL
function parseGetCapabilitiesXML(getCapabilitiesURL, layerName, callback) {

	var xhr = new XMLHttpRequest();

		xhr.open("GET", getCapabilitiesURL);
		xhr.onload = function() {
    
      var getCapabilitiesXML = xhr.responseXML;

      getServiceURLTemplates(getCapabilitiesXML, layerName, callback);

    };
		
    xhr.send();

};

// XMLHttpRequest.onload function: extract <Style>, <TileMatrixSet> and <ressourceURL> values from parsed GetCapabilities XML
function getServiceURLTemplates(getCapabilitiesXML, layerName, callback) {

	var layerNodes = getCapabilitiesXML.getElementsByTagName("Layer");
  
  for (var i = 0; i < layerNodes.length; i++) {
  
  	var title = layerNodes[i].getElementsByTagName("ows:Title")[0].childNodes[0].nodeValue;
  
  	if (title == layerName) {

      var style = layerNodes[i].getElementsByTagName("Style")[0].children[0].childNodes[0].nodeValue;
      var tileMatrixSet = layerNodes[i].getElementsByTagName("TileMatrixSetLink")[0].children[0].childNodes[0].nodeValue;   
 
    	var serviceURLTemplates = layerNodes[i].getElementsByTagName("ResourceURL")[4].attributes.getNamedItem("template").nodeValue
      
			callback(serviceURLTemplates, tileMatrixSet, style, layerName);
    
    };
  
  };

};

// callback function: create Leaflet tileLayer when ready and add to map
function createLeafletLayer(serviceURLTemplates, tileMatrixSet, style, layerName) {
  
  var sharding = ["maps", "maps1", "maps2", "maps3", "maps4"];
  
  var baseURL = serviceURLTemplates.replace("maps", "{s}")
  																 .replace("{Style}", style)
                                   .replace("{TileMatrixSet}", tileMatrixSet)
                                   .replace("{TileMatrix}", "{z}")
                                   .replace("{TileRow}", "{y}")
                                   .replace("{TileCol}", "{x}");
  
  var WMTSLayer = L.tileLayer(baseURL, {
    id: layerName,
    subdomains:...