prvni commit

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();
+});