94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Custom Tile Server</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
|
|
|
|
<style>
|
|
html, body, #map {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
// permalink support: based on https://github.com/MarcChasse/leaflet.Permalink
|
|
L.Permalink = {
|
|
//gets the map center, zoom-level and rotation from the URL if present, else uses default values
|
|
getMapLocation: function (zoom, center) {
|
|
'use strict';
|
|
zoom = (zoom || zoom === 0) ? zoom : 18;
|
|
center = (center) ? center : [52.26869, -113.81034];
|
|
|
|
if (window.location.hash.startsWith('#map=')) {
|
|
var parts = window.location.hash.substring(5).split('/');
|
|
if (parts.length >= 3) {
|
|
zoom = parseInt(parts[0]);
|
|
center = {
|
|
lat: parseFloat(parts[1]),
|
|
lng: parseFloat(parts[2])
|
|
};
|
|
}
|
|
}
|
|
return {zoom: zoom, center: center};
|
|
},
|
|
|
|
setup: function (map) {
|
|
'use strict';
|
|
var shouldUpdate = true;
|
|
var updatePermalink = function () {
|
|
if (!shouldUpdate) {
|
|
// do not update the URL when the view was changed in the 'popstate' handler (browser history navigation)
|
|
shouldUpdate = true;
|
|
return;
|
|
}
|
|
|
|
var center = map.getCenter();
|
|
var hash = '#map=' +
|
|
map.getZoom() + '/' +
|
|
Math.round(center.lat * 100000) / 100000 + '/' +
|
|
Math.round(center.lng * 100000) / 100000
|
|
var state = {
|
|
zoom: map.getZoom(),
|
|
center: center
|
|
};
|
|
window.history.pushState(state, 'map', hash);
|
|
};
|
|
|
|
map.on('moveend', updatePermalink);
|
|
|
|
// restore the view state when navigating through the history, see
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
|
|
window.addEventListener('popstate', function (event) {
|
|
if (event.state === null) {
|
|
return;
|
|
}
|
|
map.setView(event.state.center, event.state.zoom);
|
|
shouldUpdate = false;
|
|
});
|
|
}
|
|
};
|
|
|
|
var mapPos = L.Permalink.getMapLocation(3, [0, 0]);
|
|
var map = L.map('map', { center: mapPos.center, zoom: mapPos.zoom });
|
|
L.tileLayer('/tile/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
|
id: 'base'
|
|
}).addTo(map);
|
|
L.Permalink.setup(map);
|
|
</script>
|
|
</body>
|
|
</html>
|