Compare commits
No commits in common. "b1a10262d54f9cb06e08803e21484ad4c7af3c0eea0419194a9250deb73df7d5" and "df4556a68207a5cb284ca1ff68c39609fdbeca930bd59e009502c59d58b8bf84" have entirely different histories.
b1a10262d5
...
df4556a682
3 changed files with 30 additions and 300 deletions
57
dve.css
57
dve.css
|
|
@ -6,33 +6,13 @@ html, body {
|
|||
font-family: sans-serif;
|
||||
}
|
||||
#container {
|
||||
display: grid;
|
||||
display: flex;
|
||||
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%;
|
||||
|
|
@ -48,36 +28,3 @@ html, body {
|
|||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.layout-selector {
|
||||
position: fixed;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
237
dve.js
237
dve.js
|
|
@ -6,18 +6,10 @@ const json_files = [
|
|||
|
||||
const center = [50.08804, 14.42076];
|
||||
const zoom = 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) {
|
||||
|
|
@ -28,85 +20,11 @@ function fillDropdown(select) {
|
|||
}
|
||||
}
|
||||
|
||||
function readUrlState() {
|
||||
const state = {
|
||||
center,
|
||||
zoom,
|
||||
count: 2,
|
||||
layers: []
|
||||
};
|
||||
|
||||
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)) {
|
||||
state.center = [lat, lng];
|
||||
state.zoom = z;
|
||||
}
|
||||
}
|
||||
|
||||
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 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 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);
|
||||
}
|
||||
|
||||
function sync(source) {
|
||||
function sync(source, target) {
|
||||
if (syncing) return;
|
||||
syncing = true;
|
||||
maps.forEach(target => {
|
||||
if (target !== source) {
|
||||
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
||||
}
|
||||
});
|
||||
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
||||
syncing = false;
|
||||
|
||||
writeUrlState(source);
|
||||
updateCrosshairs();
|
||||
}
|
||||
|
||||
function setLayer(map, config, currentLayer) {
|
||||
|
|
@ -132,142 +50,41 @@ 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);
|
||||
}
|
||||
|
||||
hideCrosshairs();
|
||||
|
||||
setTimeout(() => {
|
||||
maps.forEach((map, index) => {
|
||||
if (index < count) map.invalidateSize(false);
|
||||
});
|
||||
}, 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 urlState = readUrlState();
|
||||
const mapCountSelector = document.getElementById("mapCountSelector");
|
||||
fillMapCountDropdown(mapCountSelector);
|
||||
fillDropdown(document.getElementById("select1"));
|
||||
fillDropdown(document.getElementById("select2"));
|
||||
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const select = document.getElementById("select" + i);
|
||||
fillDropdown(select);
|
||||
// Create maps
|
||||
const map1 = L.map("map1", { center, zoom, zoomControl: false });
|
||||
const map2 = L.map("map2", { center, zoom, zoomControl: false });
|
||||
|
||||
if (urlState.layers[i - 1] && TILE_SERVERS[urlState.layers[i - 1]]) {
|
||||
select.value = urlState.layers[i - 1];
|
||||
}
|
||||
map1.on("move", () => sync(map1, map2));
|
||||
map2.on("move", () => sync(map2, map1));
|
||||
|
||||
const map = L.map("map" + i, { center: urlState.center, zoom: urlState.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);
|
||||
crosshairs.push(createCrosshair(map));
|
||||
initCrosshair(map);
|
||||
// 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]);
|
||||
writeUrlState(map);
|
||||
});
|
||||
}
|
||||
|
||||
mapCountSelector.value = urlState.count;
|
||||
mapCountSelector.addEventListener("change", e => {
|
||||
setMapCount(parseInt(e.target.value, 10));
|
||||
writeUrlState(maps[0]);
|
||||
// Dropdown change handlers
|
||||
document.getElementById("select1").addEventListener("change", e => {
|
||||
const key = e.target.value;
|
||||
layer1 = setLayer(map1, TILE_SERVERS[key], layer1);
|
||||
});
|
||||
|
||||
setMapCount(parseInt(mapCountSelector.value, 10));
|
||||
writeUrlState(maps[0]);
|
||||
document.getElementById("select2").addEventListener("change", e => {
|
||||
const key = e.target.value;
|
||||
layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadTileConfigs(json_files) {
|
||||
|
|
|
|||
36
index.html
36
index.html
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" data-count="2">
|
||||
<div id="container">
|
||||
<div class="map-wrapper">
|
||||
<select id="select1" class="selector"></select>
|
||||
<div id="map1" class="map"></div>
|
||||
|
|
@ -38,40 +38,6 @@
|
|||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue