From 7783aeba2947e56a0ee3e9266d2e3902350f9874b3e0bd8f006b3e773375b626 Mon Sep 17 00:00:00 2001 From: K1 Date: Sat, 2 May 2026 18:24:13 +0200 Subject: [PATCH 1/4] 2/4/6/9 maps Signed-off-by: K1 --- dve.css | 29 +++++++++++++++++-- dve.js | 84 ++++++++++++++++++++++++++++++++++++------------------ index.html | 36 ++++++++++++++++++++++- 3 files changed, 119 insertions(+), 30 deletions(-) diff --git a/dve.css b/dve.css index fb654cd..5520557 100644 --- a/dve.css +++ b/dve.css @@ -6,13 +6,33 @@ html, body { font-family: sans-serif; } #container { - display: flex; + display: grid; height: 100vh; width: 100vw; } +#container[data-count="2"] { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; +} +#container[data-count="4"] { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); +} +#container[data-count="6"] { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); +} +#container[data-count="9"] { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} .map-wrapper { - flex: 1; position: relative; + min-width: 0; + min-height: 0; +} +.map-wrapper.hidden { + display: none; } .map { height: 100%; @@ -28,3 +48,8 @@ html, body { border-radius: 4px; font-size: 14px; } +.layout-selector { + position: fixed; + top: auto; + bottom: 10px; +} diff --git a/dve.js b/dve.js index 5f874af..287adf8 100644 --- a/dve.js +++ b/dve.js @@ -6,10 +6,13 @@ const json_files = [ const center = [50.08804, 14.42076]; const zoom = 14; +const mapCounts = [2, 4, 6, 9]; let syncing = false; let TILE_SERVERS = []; +let maps = []; +let layers = []; function fillDropdown(select) { for (const name in TILE_SERVERS) { @@ -20,10 +23,14 @@ function fillDropdown(select) { } } -function sync(source, target) { +function sync(source) { if (syncing) return; syncing = true; - target.setView(source.getCenter(), source.getZoom(), { animate: false }); + maps.forEach(target => { + if (target !== source) { + target.setView(source.getCenter(), source.getZoom(), { animate: false }); + } + }); syncing = false; } @@ -50,41 +57,64 @@ function setLayer(map, config, currentLayer) { } } +function fillMapCountDropdown(select) { + select.innerHTML = ""; + + mapCounts.forEach(count => { + const opt = document.createElement("option"); + opt.value = count; + opt.textContent = count + (count === 2 || count === 4 ? " mapy" : " map"); + select.appendChild(opt); + }); +} + +function setMapCount(count) { + const container = document.getElementById("container"); + container.dataset.count = count; + + for (let i = 1; i <= maps.length; i++) { + const wrapper = document.getElementById("map" + i).parentElement; + wrapper.classList.toggle("hidden", i > count); + } + + setTimeout(() => { + maps.forEach((map, index) => { + if (index < count) map.invalidateSize(false); + }); + }, 0); +} + function init() { - fillDropdown(document.getElementById("select1")); - fillDropdown(document.getElementById("select2")); + const mapCountSelector = document.getElementById("mapCountSelector"); + fillMapCountDropdown(mapCountSelector); - // Create maps - const map1 = L.map("map1", { center, zoom, zoomControl: false }); - const map2 = L.map("map2", { center, zoom, zoomControl: false }); + for (let i = 1; i <= 9; i++) { + const select = document.getElementById("select" + i); + fillDropdown(select); - map1.on("move", () => sync(map1, map2)); - map2.on("move", () => sync(map2, map1)); + const map = L.map("map" + i, { center, zoom, zoomControl: false }); + map.on("move", () => sync(map)); + map.on("zoom", () => sync(map)); - map1.on("zoom", () => sync(map1, map2)); - map2.on("zoom", () => sync(map2, map1)); + L.control.zoom({ position: "topright" }).addTo(map); - L.control.zoom({ position: "topright" }).addTo(map1); - L.control.zoom({ position: "topright" }).addTo(map2); + maps.push(map); + layers.push(null); - // Active tile layers - let layer1 = null; - let layer2 = null; + layers[i - 1] = setLayer(map, TILE_SERVERS[select.value], layers[i - 1]); - // Initialize with first server - layer1 = setLayer(map1, TILE_SERVERS[document.getElementById("select1").value], layer1); - layer2 = setLayer(map2, TILE_SERVERS[document.getElementById("select2").value], layer2); + select.addEventListener("change", e => { + const key = e.target.value; + layers[i - 1] = setLayer(map, TILE_SERVERS[key], layers[i - 1]); + }); + } - // Dropdown change handlers - document.getElementById("select1").addEventListener("change", e => { - const key = e.target.value; - layer1 = setLayer(map1, TILE_SERVERS[key], layer1); + mapCountSelector.value = "2"; + mapCountSelector.addEventListener("change", e => { + setMapCount(parseInt(e.target.value, 10)); }); - document.getElementById("select2").addEventListener("change", e => { - const key = e.target.value; - layer2 = setLayer(map2, TILE_SERVERS[key], layer2); - }); + setMapCount(parseInt(mapCountSelector.value, 10)); } async function loadTileConfigs(json_files) { diff --git a/index.html b/index.html index df18083..5f1763b 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@ -
+
@@ -38,6 +38,40 @@
+ + + + + + +
+ From 1bb6f70c9269ba0178064c564150540b7757a838bb05ee1fb634e53dc4266023 Mon Sep 17 00:00:00 2001 From: K1 Date: Sat, 2 May 2026 18:35:58 +0200 Subject: [PATCH 2/4] map position in url Signed-off-by: K1 --- dve.js | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/dve.js b/dve.js index 287adf8..acf47bd 100644 --- a/dve.js +++ b/dve.js @@ -9,6 +9,7 @@ const zoom = 14; const mapCounts = [2, 4, 6, 9]; let syncing = false; +let urlUpdateTimer = null; let TILE_SERVERS = []; let maps = []; @@ -23,6 +24,39 @@ function fillDropdown(select) { } } +function readUrlPosition() { + const match = window.location.hash.match(/^#map=([0-9.]+)\/(-?[0-9.]+)\/(-?[0-9.]+)/); + + if (match) { + const z = parseFloat(match[1]); + const lat = parseFloat(match[2]); + const lng = parseFloat(match[3]); + + if (Number.isFinite(lat) && Number.isFinite(lng) && Number.isFinite(z)) { + return { + center: [lat, lng], + zoom: z + }; + } + } + + return { + center, + zoom + }; +} + +function writeUrlPosition(map) { + if (urlUpdateTimer) clearTimeout(urlUpdateTimer); + + urlUpdateTimer = setTimeout(() => { + const c = map.getCenter(); + const hash = "#map=" + map.getZoom() + "/" + c.lat.toFixed(5) + "/" + c.lng.toFixed(5); + + history.replaceState(null, "", hash); + }, 100); +} + function sync(source) { if (syncing) return; syncing = true; @@ -32,6 +66,8 @@ function sync(source) { } }); syncing = false; + + writeUrlPosition(source); } function setLayer(map, config, currentLayer) { @@ -85,6 +121,7 @@ function setMapCount(count) { } function init() { + const urlPosition = readUrlPosition(); const mapCountSelector = document.getElementById("mapCountSelector"); fillMapCountDropdown(mapCountSelector); @@ -92,7 +129,7 @@ function init() { const select = document.getElementById("select" + i); fillDropdown(select); - const map = L.map("map" + i, { center, zoom, zoomControl: false }); + const map = L.map("map" + i, { center: urlPosition.center, zoom: urlPosition.zoom, zoomControl: false }); map.on("move", () => sync(map)); map.on("zoom", () => sync(map)); From 5094fd1fb2d84c6154281a0cec94262376fd8bb3353eec39d8162ff08263434f Mon Sep 17 00:00:00 2001 From: K1 Date: Sat, 2 May 2026 18:36:55 +0200 Subject: [PATCH 3/4] crosshair Signed-off-by: K1 --- dve.css | 28 +++++++++++++++++++++ dve.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) diff --git a/dve.css b/dve.css index 5520557..5876ad9 100644 --- a/dve.css +++ b/dve.css @@ -53,3 +53,31 @@ html, body { top: auto; bottom: 10px; } + +.crosshair { + position: absolute; + display: none; + width: 24px; + height: 24px; + z-index: 999; + pointer-events: none; + transform: translate(-50%, -50%); +} +.crosshair::before, +.crosshair::after { + content: ""; + position: absolute; + background: #000; +} +.crosshair::before { + left: 11px; + top: 0; + width: 2px; + height: 24px; +} +.crosshair::after { + left: 0; + top: 11px; + width: 24px; + height: 2px; +} diff --git a/dve.js b/dve.js index acf47bd..c9a1741 100644 --- a/dve.js +++ b/dve.js @@ -10,10 +10,14 @@ const mapCounts = [2, 4, 6, 9]; let syncing = false; let urlUpdateTimer = null; +let activeMouseMap = null; +let activeMousePoint = null; +let activeMouseLatLng = null; let TILE_SERVERS = []; let maps = []; let layers = []; +let crosshairs = []; function fillDropdown(select) { for (const name in TILE_SERVERS) { @@ -68,6 +72,7 @@ function sync(source) { syncing = false; writeUrlPosition(source); + updateCrosshairs(); } function setLayer(map, config, currentLayer) { @@ -113,6 +118,8 @@ function setMapCount(count) { wrapper.classList.toggle("hidden", i > count); } + hideCrosshairs(); + setTimeout(() => { maps.forEach((map, index) => { if (index < count) map.invalidateSize(false); @@ -120,6 +127,72 @@ function setMapCount(count) { }, 0); } +function isVisibleMap(map) { + return !map.getContainer().parentElement.classList.contains("hidden"); +} + +function createCrosshair(map) { + const crosshair = document.createElement("div"); + crosshair.className = "crosshair"; + map.getContainer().parentElement.appendChild(crosshair); + return crosshair; +} + +function hideCrosshairs() { + activeMouseMap = null; + activeMousePoint = null; + activeMouseLatLng = null; + + crosshairs.forEach(crosshair => { + crosshair.style.display = "none"; + }); +} + +function updateCrosshairs() { + if (!activeMouseMap || !activeMousePoint || !isVisibleMap(activeMouseMap)) return; + + activeMouseLatLng = activeMouseMap.containerPointToLatLng(activeMousePoint); + + maps.forEach((map, index) => { + const crosshair = crosshairs[index]; + + if (map === activeMouseMap || !isVisibleMap(map)) { + crosshair.style.display = "none"; + return; + } + + const point = map.latLngToContainerPoint(activeMouseLatLng); + const size = map.getSize(); + + if (point.x < 0 || point.y < 0 || point.x > size.x || point.y > size.y) { + crosshair.style.display = "none"; + return; + } + + crosshair.style.left = point.x + "px"; + crosshair.style.top = point.y + "px"; + crosshair.style.display = "block"; + }); +} + +function initCrosshair(map) { + const container = map.getContainer(); + + map.on("mousemove", e => { + activeMouseMap = map; + activeMousePoint = map.mouseEventToContainerPoint(e.originalEvent); + activeMouseLatLng = e.latlng; + updateCrosshairs(); + }); + + map.on("mouseout", e => { + if (!container.contains(e.originalEvent.relatedTarget)) hideCrosshairs(); + }); + + map.on("move", () => updateCrosshairs()); + map.on("zoom", () => updateCrosshairs()); +} + function init() { const urlPosition = readUrlPosition(); const mapCountSelector = document.getElementById("mapCountSelector"); @@ -137,6 +210,8 @@ function init() { maps.push(map); layers.push(null); + crosshairs.push(createCrosshair(map)); + initCrosshair(map); layers[i - 1] = setLayer(map, TILE_SERVERS[select.value], layers[i - 1]); From b1a10262d54f9cb06e08803e21484ad4c7af3c0eea0419194a9250deb73df7d5 Mon Sep 17 00:00:00 2001 From: K1 Date: Sat, 2 May 2026 18:43:42 +0200 Subject: [PATCH 4/4] map types in url Signed-off-by: K1 --- dve.js | 71 +++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 56 insertions(+), 15 deletions(-) diff --git a/dve.js b/dve.js index c9a1741..936bbcb 100644 --- a/dve.js +++ b/dve.js @@ -28,7 +28,14 @@ function fillDropdown(select) { } } -function readUrlPosition() { +function readUrlState() { + const state = { + center, + zoom, + count: 2, + layers: [] + }; + const match = window.location.hash.match(/^#map=([0-9.]+)\/(-?[0-9.]+)\/(-?[0-9.]+)/); if (match) { @@ -37,25 +44,52 @@ function readUrlPosition() { const lng = parseFloat(match[3]); if (Number.isFinite(lat) && Number.isFinite(lng) && Number.isFinite(z)) { - return { - center: [lat, lng], - zoom: z - }; + state.center = [lat, lng]; + state.zoom = z; } } - return { - center, - zoom - }; + const params = new URLSearchParams(window.location.hash.replace(/^#map=[^&]*/, "")); + const count = parseInt(params.get("count"), 10); + + if (mapCounts.includes(count)) { + state.count = count; + } + + for (let i = 1; i <= state.count; i++) { + const layer = params.get("layer" + i); + + if (layer) state.layers.push(layer); + } + + return state; } -function writeUrlPosition(map) { +function getSelectedLayers(count) { + const selected = []; + + for (let i = 1; i <= count; i++) { + const select = document.getElementById("select" + i); + if (select && select.value) selected.push(select.value); + } + + return selected; +} + +function writeUrlState(map) { if (urlUpdateTimer) clearTimeout(urlUpdateTimer); urlUpdateTimer = setTimeout(() => { const c = map.getCenter(); - const hash = "#map=" + map.getZoom() + "/" + c.lat.toFixed(5) + "/" + c.lng.toFixed(5); + const count = parseInt(document.getElementById("mapCountSelector").value, 10); + let hash = "#map=" + map.getZoom() + "/" + c.lat.toFixed(5) + "/" + c.lng.toFixed(5); + + hash += "&count=" + count; + + const selected = getSelectedLayers(count); + selected.forEach((name, index) => { + hash += "&layer" + (index + 1) + "=" + encodeURIComponent(name); + }); history.replaceState(null, "", hash); }, 100); @@ -71,7 +105,7 @@ function sync(source) { }); syncing = false; - writeUrlPosition(source); + writeUrlState(source); updateCrosshairs(); } @@ -194,7 +228,7 @@ function initCrosshair(map) { } function init() { - const urlPosition = readUrlPosition(); + const urlState = readUrlState(); const mapCountSelector = document.getElementById("mapCountSelector"); fillMapCountDropdown(mapCountSelector); @@ -202,7 +236,11 @@ function init() { const select = document.getElementById("select" + i); fillDropdown(select); - const map = L.map("map" + i, { center: urlPosition.center, zoom: urlPosition.zoom, zoomControl: false }); + if (urlState.layers[i - 1] && TILE_SERVERS[urlState.layers[i - 1]]) { + select.value = urlState.layers[i - 1]; + } + + const map = L.map("map" + i, { center: urlState.center, zoom: urlState.zoom, zoomControl: false }); map.on("move", () => sync(map)); map.on("zoom", () => sync(map)); @@ -218,15 +256,18 @@ function init() { select.addEventListener("change", e => { const key = e.target.value; layers[i - 1] = setLayer(map, TILE_SERVERS[key], layers[i - 1]); + writeUrlState(map); }); } - mapCountSelector.value = "2"; + mapCountSelector.value = urlState.count; mapCountSelector.addEventListener("change", e => { setMapCount(parseInt(e.target.value, 10)); + writeUrlState(maps[0]); }); setMapCount(parseInt(mapCountSelector.value, 10)); + writeUrlState(maps[0]); } async function loadTileConfigs(json_files) {