Mortal/wmts-dimensions.html

## wmts-dimensions.html
<!--
  Example of using a custom tileLoadFunction to switch to a different tileserver
  when a tileserver is down.

  Based on the example at https://openlayers.org/en/latest/examples/wmts-dimensions.html
-->
<!DOCTYPE html>
<html>
  <head>
    <title>WMTS Tile Transitions</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <label>
      Sea-level
      <input id="slider" type="range" value="10" max="100" min="-1">
    </label>
    <span id="theinfo"></span>
    <script>
      // create the WMTS tile grid in the google projection
      var projection = ol.proj.get('EPSG:3857');
      var tileSizePixels = 256;
      var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
      var matrixIds = [];
      var resolutions = [];
      for (var i = 0; i <= 14; i++) {
        matrixIds[i] = i;
        resolutions[i] = tileSizeMtrs / Math.pow(2, i);
      }
      var tileGrid = new ol.tilegrid.WMTS({
        origin: ol.extent.getTopLeft(projection.getExtent()),
        resolutions: resolutions,
        matrixIds: matrixIds
      });

      var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';

      var proxyServer = "ts.scalgo.com";
      // ts14 doesn't exist in DNS.
      // ts16 doesn't actually have the layer.
      // ts18, ts15, ts17, ts5 have the layer and serve it.
      var servers = ["ts14.scalgo.com", "ts16.scalgo.com", "ts18.scalgo.com", "ts15.scalgo.com", "ts17.scalgo.com", "ts5.scalgo.com"];
      var currentServer = 0;

      var wmtsSource = new ol.source.WMTS({
        url: 'http://ts.scalgo.com/olpatch/wmts?token=' + scalgoToken,
        layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
        format: 'image/png',
        matrixSet: 'EPSG:3857',
        attributions: [
          '<a href="http://scalgo.com">SCALGO</a>',
          '<a href="http://www.cgiar-csi.org/data/' +
              'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'
        ],
        tileGrid: tileGrid,
        style: 'default',
        dimensions: {
          'threshold': 100
        }
      });
      function tileLoadFunction(tile, src) {
        if (currentServer >= servers.length) {
          // We have exhausted all available servers. Give up.
          return;
        }
        var serverIndex = currentServer;
        src = src.replace(proxyServer, servers[serverIndex]);
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('loadend', function(evt) {
          self.pendingRequests--;
          var data = this.response;
          const status = evt.currentTarget.status;
          if (200 <= status && status < 400) {
            tile.getImage().src = URL.createObjectURL(data);
          } else {
            if (currentServer == serverIndex) {
              console.log("Bad/missing response from " + servers[currentServer]);
              ++currentServer;
            }
            setTimeout(() => tile.load(), 100);
          }
        });
        xhr.addEventListener('error', function () {
          if (currentServer == serverIndex) {
            console.log("Bad/missing response from " + servers[currentServer]);
            ++currentServer;
          }
          setTimeout(() => tile.load(), 100);
        });
        xhr.open('GET', src);
        xhr.responseType = 'blob';
        xhr.send();
      }
      wmtsSource.setTileLoadFunction(tileLoadFunction);

      var map = new ol.Map({
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: [-9871995, 3566245],
          zoom: 6
        }),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Tile({
            opacity: 0.5,
            source: wmtsSource
          })
        ]
      });

      var updateSourceDimension = function(source, sliderVal) {
        source.updateDimensions({'threshold': sliderVal});
        document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
      };

      updateSourceDimension(wmtsSource, 10);

      document.getElementById('slider').addEventListener('input', function() {
        updateSourceDimension(wmtsSource, this.value);
      });
    </script>
  </body>
</html>
	<!--
	Example of using a custom tileLoadFunction to switch to a different tileserver
	when a tileserver is down.

	Based on the example at https://openlayers.org/en/latest/examples/wmts-dimensions.html
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>WMTS Tile Transitions</title>
	<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>

	</head>
	<body>
	<div id="map" class="map"></div>
	<label>
	Sea-level
	<input id="slider" type="range" value="10" max="100" min="-1">
	</label>
	<span id="theinfo"></span>
	<script>
	// create the WMTS tile grid in the google projection
	var projection = ol.proj.get('EPSG:3857');
	var tileSizePixels = 256;
	var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
	var matrixIds = [];
	var resolutions = [];
	for (var i = 0; i <= 14; i++) {
	matrixIds[i] = i;
	resolutions[i] = tileSizeMtrs / Math.pow(2, i);
	}
	var tileGrid = new ol.tilegrid.WMTS({
	origin: ol.extent.getTopLeft(projection.getExtent()),
	resolutions: resolutions,
	matrixIds: matrixIds
	});

	var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';

	var proxyServer = "ts.scalgo.com";
	// ts14 doesn't exist in DNS.
	// ts16 doesn't actually have the layer.
	// ts18, ts15, ts17, ts5 have the layer and serve it.
	var servers = ["ts14.scalgo.com", "ts16.scalgo.com", "ts18.scalgo.com", "ts15.scalgo.com", "ts17.scalgo.com", "ts5.scalgo.com"];
	var currentServer = 0;

	var wmtsSource = new ol.source.WMTS({
	url: 'http://ts.scalgo.com/olpatch/wmts?token=' + scalgoToken,
	layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
	format: 'image/png',
	matrixSet: 'EPSG:3857',
	attributions: [
	'<a href="http://scalgo.com">SCALGO</a>',
	'<a href="http://www.cgiar-csi.org/data/' +
	'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'
	],
	tileGrid: tileGrid,
	style: 'default',
	dimensions: {
	'threshold': 100
	}
	});
	function tileLoadFunction(tile, src) {
	if (currentServer >= servers.length) {
	// We have exhausted all available servers. Give up.
	return;
	}
	var serverIndex = currentServer;
	src = src.replace(proxyServer, servers[serverIndex]);
	var xhr = new XMLHttpRequest();
	xhr.addEventListener('loadend', function(evt) {
	self.pendingRequests--;
	var data = this.response;
	const status = evt.currentTarget.status;
	if (200 <= status && status < 400) {
	tile.getImage().src = URL.createObjectURL(data);
	} else {
	if (currentServer == serverIndex) {
	console.log("Bad/missing response from " + servers[currentServer]);
	++currentServer;
	}
	setTimeout(() => tile.load(), 100);
	}
	});
	xhr.addEventListener('error', function () {
	if (currentServer == serverIndex) {
	console.log("Bad/missing response from " + servers[currentServer]);
	++currentServer;
	}
	setTimeout(() => tile.load(), 100);
	});
	xhr.open('GET', src);
	xhr.responseType = 'blob';
	xhr.send();
	}
	wmtsSource.setTileLoadFunction(tileLoadFunction);

	var map = new ol.Map({
	target: 'map',
	view: new ol.View({
	projection: projection,
	center: [-9871995, 3566245],
	zoom: 6
	}),
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	}),
	new ol.layer.Tile({
	opacity: 0.5,
	source: wmtsSource
	})
	]
	});

	var updateSourceDimension = function(source, sliderVal) {
	source.updateDimensions({'threshold': sliderVal});
	document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
	};

	updateSourceDimension(wmtsSource, 10);

	document.getElementById('slider').addEventListener('input', function() {
	updateSourceDimension(wmtsSource, this.value);
	});
	</script>
	</body>
	</html>