2/4/6/9 maps

Signed-off-by: K1 <git@karoh.net>

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

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"));
+  const mapCountSelector = document.getElementById("mapCountSelector");
-  fillDropdown(document.getElementById("select2"));
+  fillMapCountDropdown(mapCountSelector);
 
-  // Create maps
+  for (let i = 1; i <= 9; i++) {
-  const map1 = L.map("map1", { center, zoom, zoomControl: false });
+    const select = document.getElementById("select" + i);
-  const map2 = L.map("map2", { center, zoom, zoomControl: false });
+    fillDropdown(select);
 
-  map1.on("move", () => sync(map1, map2));
+    const map = L.map("map" + i, { center, zoom, zoomControl: false });
-  map2.on("move", () => sync(map2, map1));
+    map.on("move", () => sync(map));
+    map.on("zoom", () => sync(map));
 
-  map1.on("zoom", () => sync(map1, map2));
+    L.control.zoom({ position: "topright" }).addTo(map);
-  map2.on("zoom", () => sync(map2, map1));
 
-  L.control.zoom({ position: "topright" }).addTo(map1);
+    maps.push(map);
-  L.control.zoom({ position: "topright" }).addTo(map2);
+    layers.push(null);
 
-  // Active tile layers
+    layers[i - 1] = setLayer(map, TILE_SERVERS[select.value], layers[i - 1]);
-  let layer1 = null;
-  let layer2 = null;
 
-  // Initialize with first server
+    select.addEventListener("change", e => {
-  layer1 = setLayer(map1, TILE_SERVERS[document.getElementById("select1").value], layer1);
+      const key = e.target.value;
-  layer2 = setLayer(map2, TILE_SERVERS[document.getElementById("select2").value], layer2);
+      layers[i - 1] = setLayer(map, TILE_SERVERS[key], layers[i - 1]);
+    });
+  }
 
-  // Dropdown change handlers
+  mapCountSelector.value = "2";
-  document.getElementById("select1").addEventListener("change", e => {
+  mapCountSelector.addEventListener("change", e => {
-    const key = e.target.value;   
+    setMapCount(parseInt(e.target.value, 10));
-    layer1 = setLayer(map1, TILE_SERVERS[key], layer1);      
   });
 
-  document.getElementById("select2").addEventListener("change", e => {
+  setMapCount(parseInt(mapCountSelector.value, 10));
-    const key = e.target.value;
-    layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
-  });
 }
 
 async function loadTileConfigs(json_files) {

index.html

@@ -29,7 +29,7 @@
 
 </head>
 <body>
-  <div id="container">
+  <div id="container" data-count="2">
     <div class="map-wrapper">
       <select id="select1" class="selector"></select>
       <div id="map1" class="map"></div>
@@ -38,6 +38,40 @@
       <select id="select2" class="selector"></select>
       <div id="map2" class="map"></div>
     </div>
+    <div class="map-wrapper hidden">
+      <select id="select3" class="selector"></select>
+      <div id="map3" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select4" class="selector"></select>
+      <div id="map4" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select5" class="selector"></select>
+      <div id="map5" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select6" class="selector"></select>
+      <div id="map6" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select7" class="selector"></select>
+      <div id="map7" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select8" class="selector"></select>
+      <div id="map8" class="map"></div>
+    </div>
+    <div class="map-wrapper hidden">
+      <select id="select9" class="selector"></select>
+      <div id="map9" class="map"></div>
+    </div>
   </div>
+  <select id="mapCountSelector" class="selector layout-selector">
+    <option value="2">2 mapy</option>
+    <option value="4">4 mapy</option>
+    <option value="6">6 map</option>
+    <option value="9">9 map</option>
+  </select>
 </body>
 </html>