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;
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
#container {
|
#container {
|
||||||
display: grid;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
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 {
|
.map-wrapper {
|
||||||
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
.map-wrapper.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
.map {
|
.map {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -48,36 +28,3 @@ html, body {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
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 center = [50.08804, 14.42076];
|
||||||
const zoom = 14;
|
const zoom = 14;
|
||||||
const mapCounts = [2, 4, 6, 9];
|
|
||||||
|
|
||||||
let syncing = false;
|
let syncing = false;
|
||||||
let urlUpdateTimer = null;
|
|
||||||
let activeMouseMap = null;
|
|
||||||
let activeMousePoint = null;
|
|
||||||
let activeMouseLatLng = null;
|
|
||||||
|
|
||||||
let TILE_SERVERS = [];
|
let TILE_SERVERS = [];
|
||||||
let maps = [];
|
|
||||||
let layers = [];
|
|
||||||
let crosshairs = [];
|
|
||||||
|
|
||||||
function fillDropdown(select) {
|
function fillDropdown(select) {
|
||||||
for (const name in TILE_SERVERS) {
|
for (const name in TILE_SERVERS) {
|
||||||
|
|
@ -28,85 +20,11 @@ function fillDropdown(select) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function readUrlState() {
|
function sync(source, target) {
|
||||||
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) {
|
|
||||||
if (syncing) return;
|
if (syncing) return;
|
||||||
syncing = true;
|
syncing = true;
|
||||||
maps.forEach(target => {
|
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
||||||
if (target !== source) {
|
|
||||||
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
syncing = false;
|
syncing = false;
|
||||||
|
|
||||||
writeUrlState(source);
|
|
||||||
updateCrosshairs();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setLayer(map, config, currentLayer) {
|
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() {
|
function init() {
|
||||||
const urlState = readUrlState();
|
fillDropdown(document.getElementById("select1"));
|
||||||
const mapCountSelector = document.getElementById("mapCountSelector");
|
fillDropdown(document.getElementById("select2"));
|
||||||
fillMapCountDropdown(mapCountSelector);
|
|
||||||
|
|
||||||
for (let i = 1; i <= 9; i++) {
|
// Create maps
|
||||||
const select = document.getElementById("select" + i);
|
const map1 = L.map("map1", { center, zoom, zoomControl: false });
|
||||||
fillDropdown(select);
|
const map2 = L.map("map2", { center, zoom, zoomControl: false });
|
||||||
|
|
||||||
if (urlState.layers[i - 1] && TILE_SERVERS[urlState.layers[i - 1]]) {
|
map1.on("move", () => sync(map1, map2));
|
||||||
select.value = urlState.layers[i - 1];
|
map2.on("move", () => sync(map2, map1));
|
||||||
}
|
|
||||||
|
|
||||||
const map = L.map("map" + i, { center: urlState.center, zoom: urlState.zoom, zoomControl: false });
|
map1.on("zoom", () => sync(map1, map2));
|
||||||
map.on("move", () => sync(map));
|
map2.on("zoom", () => sync(map2, map1));
|
||||||
map.on("zoom", () => sync(map));
|
|
||||||
|
|
||||||
L.control.zoom({ position: "topright" }).addTo(map);
|
L.control.zoom({ position: "topright" }).addTo(map1);
|
||||||
|
L.control.zoom({ position: "topright" }).addTo(map2);
|
||||||
|
|
||||||
maps.push(map);
|
// Active tile layers
|
||||||
layers.push(null);
|
let layer1 = null;
|
||||||
crosshairs.push(createCrosshair(map));
|
let layer2 = null;
|
||||||
initCrosshair(map);
|
|
||||||
|
|
||||||
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 => {
|
// Dropdown change handlers
|
||||||
const key = e.target.value;
|
document.getElementById("select1").addEventListener("change", e => {
|
||||||
layers[i - 1] = setLayer(map, TILE_SERVERS[key], layers[i - 1]);
|
const key = e.target.value;
|
||||||
writeUrlState(map);
|
layer1 = setLayer(map1, TILE_SERVERS[key], layer1);
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
mapCountSelector.value = urlState.count;
|
|
||||||
mapCountSelector.addEventListener("change", e => {
|
|
||||||
setMapCount(parseInt(e.target.value, 10));
|
|
||||||
writeUrlState(maps[0]);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
setMapCount(parseInt(mapCountSelector.value, 10));
|
document.getElementById("select2").addEventListener("change", e => {
|
||||||
writeUrlState(maps[0]);
|
const key = e.target.value;
|
||||||
|
layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadTileConfigs(json_files) {
|
async function loadTileConfigs(json_files) {
|
||||||
|
|
|
||||||
36
index.html
36
index.html
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="container" data-count="2">
|
<div id="container">
|
||||||
<div class="map-wrapper">
|
<div class="map-wrapper">
|
||||||
<select id="select1" class="selector"></select>
|
<select id="select1" class="selector"></select>
|
||||||
<div id="map1" class="map"></div>
|
<div id="map1" class="map"></div>
|
||||||
|
|
@ -38,40 +38,6 @@
|
||||||
<select id="select2" class="selector"></select>
|
<select id="select2" class="selector"></select>
|
||||||
<div id="map2" class="map"></div>
|
<div id="map2" class="map"></div>
|
||||||
</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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue