prvni commit
This commit is contained in:
hlad
commit
df4556a682
6 changed files with 480 additions and 0 deletions
30
dve.css
Normal file
30
dve.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
.map-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.selector {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1000;
|
||||
background: rgba(255,255,255,0.9);
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
101
dve.js
Normal file
101
dve.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
const json_files = [
|
||||
"tileconfig/osm.json",
|
||||
"tileconfig/mapycom.json",
|
||||
"tileconfig/praha.json"
|
||||
];
|
||||
|
||||
const center = [50.08804, 14.42076];
|
||||
const zoom = 14;
|
||||
|
||||
let syncing = false;
|
||||
|
||||
let TILE_SERVERS = [];
|
||||
|
||||
function fillDropdown(select) {
|
||||
for (const name in TILE_SERVERS) {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = name;
|
||||
opt.textContent = name;
|
||||
select.appendChild(opt);
|
||||
}
|
||||
}
|
||||
|
||||
function sync(source, target) {
|
||||
if (syncing) return;
|
||||
syncing = true;
|
||||
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
||||
syncing = false;
|
||||
}
|
||||
|
||||
function setLayer(map, config, currentLayer) {
|
||||
if (currentLayer) map.removeLayer(currentLayer);
|
||||
|
||||
if (config.type === "xyz") {
|
||||
return L.tileLayer(config.url, {
|
||||
maxZoom: 19,
|
||||
tileSize: 256,
|
||||
referrerPolicy: "strict-origin-when-cross-origin"
|
||||
}).addTo(map);
|
||||
}
|
||||
|
||||
if (config.type === "wms") {
|
||||
return L.tileLayer.wms(config.url, {
|
||||
layers: config.layers,
|
||||
format: config.format || "image/png",
|
||||
transparent: config.transparent ?? true,
|
||||
version: config.version || "1.3.0",
|
||||
attribution: config.attribution || "",
|
||||
referrerPolicy: "strict-origin-when-cross-origin"
|
||||
}).addTo(map);
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
fillDropdown(document.getElementById("select1"));
|
||||
fillDropdown(document.getElementById("select2"));
|
||||
|
||||
// Create maps
|
||||
const map1 = L.map("map1", { center, zoom, zoomControl: false });
|
||||
const map2 = L.map("map2", { center, zoom, zoomControl: false });
|
||||
|
||||
map1.on("move", () => sync(map1, map2));
|
||||
map2.on("move", () => sync(map2, map1));
|
||||
|
||||
map1.on("zoom", () => sync(map1, map2));
|
||||
map2.on("zoom", () => sync(map2, map1));
|
||||
|
||||
L.control.zoom({ position: "topright" }).addTo(map1);
|
||||
L.control.zoom({ position: "topright" }).addTo(map2);
|
||||
|
||||
// Active tile layers
|
||||
let layer1 = null;
|
||||
let layer2 = null;
|
||||
|
||||
// Initialize with first server
|
||||
layer1 = setLayer(map1, TILE_SERVERS[document.getElementById("select1").value], layer1);
|
||||
layer2 = setLayer(map2, TILE_SERVERS[document.getElementById("select2").value], layer2);
|
||||
|
||||
// Dropdown change handlers
|
||||
document.getElementById("select1").addEventListener("change", e => {
|
||||
const key = e.target.value;
|
||||
layer1 = setLayer(map1, TILE_SERVERS[key], layer1);
|
||||
});
|
||||
|
||||
document.getElementById("select2").addEventListener("change", e => {
|
||||
const key = e.target.value;
|
||||
layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadTileConfigs(json_files) {
|
||||
const results = await Promise.all(
|
||||
json_files.map(f => fetch(f).then(r => r.json()))
|
||||
);
|
||||
|
||||
// Merge all JSON objects into TILE_SERVERS
|
||||
results.forEach(obj => Object.assign(TILE_SERVERS, obj));
|
||||
}
|
||||
|
||||
loadTileConfigs(json_files).then(() => {
|
||||
init();
|
||||
});
|
||||
43
index.html
Normal file
43
index.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Tile Server Comparison Viewer</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="dve.css"
|
||||
/>
|
||||
|
||||
<script
|
||||
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""
|
||||
></script>
|
||||
|
||||
<script
|
||||
src="dve.js"
|
||||
></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="map-wrapper">
|
||||
<select id="select1" class="selector"></select>
|
||||
<div id="map1" class="map"></div>
|
||||
</div>
|
||||
<div class="map-wrapper">
|
||||
<select id="select2" class="selector"></select>
|
||||
<div id="map2" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
38
tileconfig/mapycom.json
Normal file
38
tileconfig/mapycom.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"Mapy.com Zakladni": {
|
||||
"url": "tiles/base-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Turisticka": {
|
||||
"url": "tiles/turist-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto ": {
|
||||
"url": "tiles/bing/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2019-2021": {
|
||||
"url": "tiles/ophoto1921/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2016-2018": {
|
||||
"url": "tiles/ophoto1618-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2013-2015": {
|
||||
"url": "tiles/ophoto1415-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2010-2012": {
|
||||
"url": "tiles/ophoto1012-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2004-2007": {
|
||||
"url": "tiles/ophoto0406-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
},
|
||||
"Mapy.com Orto 2001-2003": {
|
||||
"url": "tiles/ophoto0203-m/{z}/{x}/{y}",
|
||||
"type": "xyz"
|
||||
}
|
||||
}
|
||||
6
tileconfig/osm.json
Normal file
6
tileconfig/osm.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"OpenStreetMap": {
|
||||
"url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
"type": "xyz"
|
||||
}
|
||||
}
|
||||
262
tileconfig/praha.json
Normal file
262
tileconfig/praha.json
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
{
|
||||
"Ortofotomapa 2025": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "1",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2025 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "5",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2024": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "9",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2024 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "13",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2023": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "17",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2023 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "21",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2022": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "25",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2022 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "29",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2021": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "33",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2021 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "37",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2020": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "41",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2020 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "45",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2019": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "49",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2019 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "53",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2019 - okolí": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "57",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2018": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "61",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2018 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "65",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2017": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "69",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2017 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "73",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2016": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "77",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2016 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "81",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2016 - okolí": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "85",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2015": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "89",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2015 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "93",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2014": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "97",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2014 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "101",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2013": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "105",
|
||||
"type": "wms"
|
||||
},
|
||||
"Zaplavená území 2013 - ortofotomapa": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "109",
|
||||
"type": "wms"
|
||||
},
|
||||
"TrueOrto 2012 - střed města": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "113",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2012": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "117",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2012 mimovegetační": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "121",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2011": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "125",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2011 - okolí": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "129",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2010": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "133",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2009": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "137",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2008": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "141",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2007": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "145",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2006 - okoli": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "149",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2005 - jih": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "153",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2004 - sever": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "157",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2003": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "161",
|
||||
"type": "wms"
|
||||
},
|
||||
"Zaplavená území 2002 - ortofotomapa": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "165",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2002 - jih": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "169",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2001 - sever": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "173",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 2000 - jih": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "177",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1996": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "181",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1988_9": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "185",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1975": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "189",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1966": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "193",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1953": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "197",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1945": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "201",
|
||||
"type": "wms"
|
||||
},
|
||||
"Ortofotomapa 1938": {
|
||||
"url": "https://gs-pub.praha.eu/arcgis/services/ort/ortofotomapa_archiv/MapServer/WmsServer",
|
||||
"layers": "205",
|
||||
"type": "wms"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue