diff --git a/dve.css b/dve.css index 5520557..5876ad9 100644 --- a/dve.css +++ b/dve.css @@ -53,3 +53,31 @@ html, body { 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; +} diff --git a/dve.js b/dve.js index acf47bd..c9a1741 100644 --- a/dve.js +++ b/dve.js @@ -10,10 +10,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) { @@ -68,6 +72,7 @@ function sync(source) { syncing = false; writeUrlPosition(source); + updateCrosshairs(); } function setLayer(map, config, currentLayer) { @@ -113,6 +118,8 @@ function setMapCount(count) { wrapper.classList.toggle("hidden", i > count); } + hideCrosshairs(); + setTimeout(() => { maps.forEach((map, index) => { if (index < count) map.invalidateSize(false); @@ -120,6 +127,72 @@ function setMapCount(count) { }, 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 urlPosition = readUrlPosition(); const mapCountSelector = document.getElementById("mapCountSelector"); @@ -137,6 +210,8 @@ function init() { maps.push(map); layers.push(null); + crosshairs.push(createCrosshair(map)); + initCrosshair(map); layers[i - 1] = setLayer(map, TILE_SERVERS[select.value], layers[i - 1]);