hlad/dve
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2/4/6/9 maps

Browse source 
Signed-off-by: K1 <git@karoh.net>
This commit is contained in:
K1 2026-05-02 18:24:13 +02:00
parent df4556a682
commit 7783aeba29
3 changed files with 119 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

84
dve.js
View file

@ -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) {