From 0fef86bb0c5efff5d97bff1ce5422fef7bbed067 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Fri, 8 Dec 2023 17:17:46 +0100 Subject: [PATCH] Changes before rebase of main --- src/components/maps/WorldMap.astro | 51 +++++++++++++------ src/components/maps/overlay/SearchMarkers.vue | 2 + 2 files changed, 37 insertions(+), 16 deletions(-) diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index f13cc3aa..7e969e2a 100644 --- a/src/components/maps/WorldMap.astro +++ b/src/components/maps/WorldMap.astro @@ -22,17 +22,37 @@ const zoomRatio = .75 const xOffset = 0 const yOffset = -27.63442 +const flyToDuration = 1.2; // In seconds +const flyToZoomLevel = 6.5 + +/** + * Convert x coords to scale with ratio, zoom and offset + * @param {number} x + */ +function convertXToScale(x) { + return (x * xRatio * zoomRatio) + xOffset +} +/** + * Convert y coords to scale with ratio, zoom and offset + * @param {number} y + */ +function convertYToScale(y) { + return (y * yRatio * zoomRatio) + yOffset +} + const distanceRatio = 2 const map = L.map('world', { crs: L.CRS.Simple, - maxZoom: 12, - minZoom: 2.5, - zoom: 2.5, + maxZoom: 8.5, + minZoom: 4, + zoom: 4, zoomSnap: 0, zoomControl: false }); +// Immediately set center of map + L.control.zoom({ position: 'bottomright', }).addTo(map); @@ -51,15 +71,13 @@ const layerGroups = { landmarks: L.layerGroup(), }; -const flyToDuration = 1.2; // In seconds - /** * Build all markers and their related info */ for (let i = 0; i < markers.length; i++) { const m = markers[i]; - const coords = [(m.markerCoords.y * yRatio * zoomRatio) + yOffset, (m.markerCoords.x * xRatio * zoomRatio) + xOffset]; + const coords = [convertYToScale(m.markerCoords.y), convertXToScale(m.markerCoords.x)]; let markerIcon @@ -130,7 +148,7 @@ for (let i = 0; i < markers.length; i++) { * Display popup of marker */ document.addEventListener(`fly-to-${m.title}`, () => { - map.flyTo(coords, 5, { duration: flyToDuration }) + map.flyTo(coords, flyToZoomLevel, { duration: flyToDuration }) setTimeout(() => { marker.openPopup() }, flyToDuration * 1000) @@ -141,7 +159,13 @@ for (let i = 0; i < markers.length; i++) { * Add player's position marker */ if ( players ) { - const playersPosition =[(players.markerCoords.y * yRatio * zoomRatio) + yOffset, (players.markerCoords.x * xRatio * zoomRatio) + xOffset]; + const playersPosition =[ + convertYToScale(players.markerCoords.y), + convertXToScale(players.markerCoords.x) + ]; + + console.log(players) + console.log(playersPosition) const playerIcon = L.icon({ iconUrl: `icon/location-pin.png`, @@ -163,11 +187,8 @@ if ( players ) { `; playerMarker.bindPopup(popupContent).openPopup(); - /** - * Flying to players - */ document.addEventListener('fly-to-players', () => { - map.flyTo(playersPosition, 5, { duration: flyToDuration }) + map.flyTo(playersPosition, flyToZoomLevel, { duration: flyToDuration }) setTimeout(() => { playerMarker.openPopup() }, flyToDuration * 1000) @@ -225,10 +246,8 @@ measureControl.addTo(map); * DEBUGS */ map.addEventListener('click', (event) => { - let lat = Math.round(event.latlng.lat * 100000) / 100000; - let lon = Math.round(event.latlng.lng * 100000) / 100000; - lat = (lat * xRatio * zoomRatio) + xOffset - lon = (lon * yRatio * zoomRatio) + yOffset + const lat = convertXToScale(event.latlng.lat) + const lon = convertYToScale(event.latlng.lng) console.log(lat, lon); }) diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index b71475da..009cbcf4 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/src/components/maps/overlay/SearchMarkers.vue @@ -10,6 +10,8 @@ const props = defineProps<{ const markers = props.markers +$world.off() + // Search functions const qInput = ref() const { focused: isFocused } = useFocus(qInput)