klokan/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">
html, body { margin:0; padding: 0; height: 100%; width: 100%; }
body { width:100%; height:100%; background: #ffffff; }
#map { position: absolute; height: 100%; width: 100%;}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var url = location.hash.substr(1);
if (!url) {
  alert('Specify URL in location hash.');
} else {
  fetch(url).then(function(response) {
    return response.text();
  }).then(function(text) {
    var data = JSON.parse(text);

    var extent = data.bounds;
    var mapMinZoom = data.minzoom;
    var mapMaxZoom = data.maxzoom;

    var mapMaxResolution = 180 / 256 / Math.pow(2, mapMaxZoom);
    var mapResolutions = [];
    for (var z = 0; z <= mapMaxZoom; z++) {
      mapResolutions.push(Math.pow(2, mapMaxZoom - z) * mapMaxResolution);
    }

    var mapTileGrid = new ol.tilegrid.TileGrid({
      origin: [-180, 90],
      extent: extent,
      minZoom: mapMinZoom,
      resolutions: mapResolutions
    });

    url = url.split('/');
    url.pop();
    url.push('{z}/{x}/{y}');

    var layer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        projection: 'EPSG:4326',
        tileGrid: mapTileGrid,
        url: url.join('/')
      })
    });

    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
          opacity: 0.4
        }),
        layer
      ],
      view: new ol.View({
        projection: 'EPSG:4326',
        extent: extent,
        maxResolution: mapTileGrid.getResolution(mapMinZoom)
      })
    });
    map.getView().fit(extent, map.getSize());
    map.addControl(new ol.control.MousePosition());
  });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta http-equiv="imagetoolbar" content="no"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
	html, body { margin:0; padding: 0; height: 100%; width: 100%; }
	body { width:100%; height:100%; background: #ffffff; }
	#map { position: absolute; height: 100%; width: 100%;}
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">
	var url = location.hash.substr(1);
	if (!url) {
	alert('Specify URL in location hash.');
	} else {
	fetch(url).then(function(response) {
	return response.text();
	}).then(function(text) {
	var data = JSON.parse(text);

	var extent = data.bounds;
	var mapMinZoom = data.minzoom;
	var mapMaxZoom = data.maxzoom;

	var mapMaxResolution = 180 / 256 / Math.pow(2, mapMaxZoom);
	var mapResolutions = [];
	for (var z = 0; z <= mapMaxZoom; z++) {
	mapResolutions.push(Math.pow(2, mapMaxZoom - z) * mapMaxResolution);
	}

	var mapTileGrid = new ol.tilegrid.TileGrid({
	origin: [-180, 90],
	extent: extent,
	minZoom: mapMinZoom,
	resolutions: mapResolutions
	});

	url = url.split('/');
	url.pop();
	url.push('{z}/{x}/{y}');

	var layer = new ol.layer.Tile({
	source: new ol.source.XYZ({
	projection: 'EPSG:4326',
	tileGrid: mapTileGrid,
	url: url.join('/')
	})
	});

	var map = new ol.Map({
	target: 'map',
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM(),
	opacity: 0.4
	}),
	layer
	],
	view: new ol.View({
	projection: 'EPSG:4326',
	extent: extent,
	maxResolution: mapTileGrid.getResolution(mapMinZoom)
	})
	});
	map.getView().fit(extent, map.getSize());
	map.addControl(new ol.control.MousePosition());
	});
	}
	</script>
	</body>
	</html>