From df4556a68207a5cb284ca1ff68c39609fdbeca930bd59e009502c59d58b8bf84 Mon Sep 17 00:00:00 2001 From: hlad Date: Sat, 2 May 2026 10:24:59 +0200 Subject: [PATCH] prvni commit --- dve.css | 30 +++++ dve.js | 101 ++++++++++++++++ index.html | 43 +++++++ tileconfig/mapycom.json | 38 ++++++ tileconfig/osm.json | 6 + tileconfig/praha.json | 262 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 480 insertions(+) create mode 100644 dve.css create mode 100644 dve.js create mode 100644 index.html create mode 100644 tileconfig/mapycom.json create mode 100644 tileconfig/osm.json create mode 100644 tileconfig/praha.json diff --git a/dve.css b/dve.css new file mode 100644 index 0000000..fb654cd --- /dev/null +++ b/dve.css @@ -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; +} diff --git a/dve.js b/dve.js new file mode 100644 index 0000000..5f874af --- /dev/null +++ b/dve.js @@ -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(); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..df18083 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + Tile Server Comparison Viewer + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+ + diff --git a/tileconfig/mapycom.json b/tileconfig/mapycom.json new file mode 100644 index 0000000..0c3e53a --- /dev/null +++ b/tileconfig/mapycom.json @@ -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" + } +} diff --git a/tileconfig/osm.json b/tileconfig/osm.json new file mode 100644 index 0000000..5dd483e --- /dev/null +++ b/tileconfig/osm.json @@ -0,0 +1,6 @@ +{ + "OpenStreetMap": { + "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png", + "type": "xyz" + } +} diff --git a/tileconfig/praha.json b/tileconfig/praha.json new file mode 100644 index 0000000..1597bb1 --- /dev/null +++ b/tileconfig/praha.json @@ -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" + } +}