From c9da4fe4d173bd1ebf4994c88824f8fd052836d7 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Fri, 5 Jan 2024 21:36:51 +0100 Subject: [PATCH 01/17] Changed locations --- src/assets/scss/_leaflet.scss | 2 +- src/components/maps/WorldMap.astro | 3 --- src/components/maps/data/markers.json | 18 ++++++++++++++---- src/layouts/Layout.astro | 2 +- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss index 919bda58..20009365 100644 --- a/src/assets/scss/_leaflet.scss +++ b/src/assets/scss/_leaflet.scss @@ -5,7 +5,7 @@ width: 100%; max-width: 100%; max-height: 100%; - background: #f1f5f9; + background: #98BDD0; .leaflet-map-pane { .leaflet-popup-pane { diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro index c5260c23..40435c37 100644 --- a/src/components/maps/WorldMap.astro +++ b/src/components/maps/WorldMap.astro @@ -1,5 +1,4 @@ --- -import CountryOverlay from './overlay/CountryOverlay.astro'; import type { MapMarker, PlayerMarker } from '@/types/Leaflet'; import markersData from '@/components/maps/data/markers.json' @@ -11,8 +10,6 @@ const players = playersData as PlayerMarker
- -
+ + + + \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index e8e6c7b1..86484244 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,4 +7,4 @@ import WorldMapOverlay from '../components/maps/WorldMapOverlay.astro' - + \ No newline at end of file From fbd58c4a5ed253e579c76fb6f6ad97f847aa407b Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Fri, 5 Jan 2024 23:55:32 +0100 Subject: [PATCH 03/17] Added custom marker saving --- public/icon/push-pin-shadow.png | Bin 0 -> 851 bytes public/icon/push-pin.png | Bin 0 -> 1734 bytes src/components/maps/WorldMap.astro | 77 ++++++++++++++++-- src/components/maps/overlay/MarkerCreator.vue | 59 +++++++------- 4 files changed, 97 insertions(+), 39 deletions(-) create mode 100644 public/icon/push-pin-shadow.png create mode 100644 public/icon/push-pin.png diff --git a/public/icon/push-pin-shadow.png b/public/icon/push-pin-shadow.png new file mode 100644 index 0000000000000000000000000000000000000000..fc38abc9a55ad829fc8b05770b5e7bfa00336cc8 GIT binary patch literal 851 zcmeAS@N?(olHy`uVBq!ia0vp^X+Z49!3HERDI{AmFfdDbx;TbZ%y~PryKjwxfXl_Z z|NlP<&C64o?U!q+fADzT+>}L+HN4~-+c=##6k7y{ChnY9Vt38yc_eEtYXA7)qvoPz zCw{$7vJvEdqrT{-+Yh@b=T}~>lT#IZ)2yPn`=(kO=dZU(QLbyw)gAKs`Tu6${qGmo zKHuK?GE;E%=2)#GYue|WmD&8f>~oo+rQpIKhOUT*Q7lK7d~Vw|Z}-tFD)Mo=c1`#j zw0(<^;F{7W^G;9O>AdrB)cL7NMJqFWXU)>yyft)+%a%O`Z(MKm-Cs2Ex=Q-C8F!*% zt=g_99*s!YbFjLF!^U3jd&h;ThK|(>_sE|S3O0U`v|!JHsk=7K;jrnSTDh&SlfOtu zs_@63$h3})jS&xhzwHv+qi4eMUQ4h?Bx6mn$=AF*-Nd5q$o}mbwR;-POHOR~p7`4~ z^=i`ns%=6I^YzvVe9nAwr7Y6+`|MVAB>~Q|M<+LJ&T{MicueqGYpm#vusyC`>s{X{ z9Id-w6@5O#aHp5SJcTDc9NT0sEj|0{l+qg2n~&v>|C<{Wb(}Ltv_d9)R^(6LGh)g6 z-HZ26;b`e*-S}Xm!t*F*y`3ALPQT1O)A-1eJ+`)ArdgJo{@%=bwZzk><+^TV>;r+c z^U0Hz+~xUoWAEB?UzHE8$!uSJy zR|VUt`kfpuUYUQp*8ba6ef7{We(luapqmRHACZjGnip-gGV=eask>)fZQSxzZINX} z+g0VKWm&t8*0WX!-8i&Zyrbl9orkC9)?C|*6DNCD7mD?5{^-u-d8K3J%!7+N?l7EE zi{bwA(|XOuO5J1GiWVmpPgv)9f9e*Ve;RDeQzkd$s|!EoJbLuJ!>J^voM%U$$@ec? zs_iWJu!TcR;{Dq6WWRSc`9(jt6g#5~S32z$mf3cG-TA5e9Taj81oqUzvbaoy*haWxasg>Cb!Pj+raA Z)cZuN;#W`4-w(_z44$rjF6*2UngAi9lxqM0 literal 0 HcmV?d00001 diff --git a/public/icon/push-pin.png b/public/icon/push-pin.png new file mode 100644 index 0000000000000000000000000000000000000000..34ff09245975d217a8d3b940987cfd411d586747 GIT binary patch literal 1734 zcmV;%208hOP)-6q}-<*yeGY*50&TIblbZ?auD(?#$lZO+N_S-PxTv z`^(Ji&Y3fVv+||{-KA+-6!BdMpi=+c1K?zkh0hGKFrS(QpaDP%Ks|u-Oxf)QumeCZ zfL*GMiAs%I3E)`(7YSa!6+jDstSW<|0PZOOO&;zW0Pp~SK?OF29-LQbOeX*=R{?K^ z>eSf%sohwb|pKe-Pb!eDNpdM6sj60 z0&V%~t~ukGNy{$go;xa!fA~)Qs7(>BYaXx0g{F`53yrjS+febnYkJFUieWX+cb^vu za5A7V1qCnX;ABE$3IbkE!Kr}8q#9n%z^R1Bq!M0Ezy$$~Nfo@n!37D8Nd>$>!Q}!P zlWcfWM-EyhMfoi;ogM@5D}eR6g2qJf=%>v`vhWDQ7dS1Gs@9!~^*XTmUh)Y78j~z| zu7_M&CRL|{x)Z>qKAvGpK|(W1ba=*dNeS0DEt6US;4T2G{1|LhuAsq1&Evsy1gB+E zR{&V6*Dz_yB{U{K@SHrr_XF4{+u$%jGs;V|wF9>az2uS7_@|en+@P{b1L;| z8(xfWf96LFT#Z#8yMGv+8Mn8l8&zFga*A{L(6oi(q@~wXWG}G>_cwq8XTe#BA_HFA zboDqVnd0yMZ>s%PS1hV6J4u-YWN#=$&%3i@*%9L~(WEI~8v{pP+TYAq%qcH8z5a>n zqtk?$2(&)|bi*{~&}(&NOLO%E4MUVz8X^fmBRvD)7);=}5jHgZh%-DvXl($#UB>(BL&9Qxx8+o96xN)i6K0wxJ@c5*mDlvfgbsETb5a zZ@UlkW{H&Q)6a*CZ1VRF4PL?JGL~0VHdA}w$jIOIgGB)vX=F6ZD__bSv8#vk1C2WD zAp5)@e;&=}BwZ;Ze_?Qbq0w8e^P{CBadCzUfs+A^z2)NKNp=J$6B<(x@UFjZF7H#R zM@Ig(;8Z|kQVownXgNtEGV-?rrwkgCDtJ^rr|gMDGHp5e?p8c-x2lH5qyip|95_jq zbH`p}1#X^Qh`vl{OtRrM-h4jqv!`2D8CKvZz|eA)odjsg9Rp;??YCXPD@SRKGq3)e zk_2dNL3mYY{}GCLu}C_UNT#Lj@+A!J!H4^1`+-ISYt=3(vgPqdE}P&a@9>f*Pi7D_ zLA}80+Wx)cXAEJy_`OuZv#D*ci;eLjGdPXc517Z9ew>9W;MFWBowV5^XsgU-3QkkC z1o!^ibz=-38R^%@3vR!260-+4x+|IK}aC zlBu>ei`c@k&+@!gjr$6~FJ23B>tPkGc?8ECR!heY&_?xDkkZ9lJy;8%(?emN-O?g8 zkJeq#5(0KiG0HYC1JXl@Wcm{?_89E4Ja4yN)$Jl*Zb+01Il^ 0 ) { - console.log(players) const playersPosition =[ convertYToScale(players.markerCoords.y), convertXToScale(players.markerCoords.x) @@ -288,16 +287,76 @@ map.setMaxBounds( ) /** - * SVG LAYERS + * CUSTOM MARKERS */ -// const svgElement = document.getElementById('svg-overlay') -// const latLngBounds = L.latLngBounds([baseTileLayer.getBounds().getSouth() + 0.9875, baseTileLayer.getBounds().getWest()], [baseTileLayer.getBounds().getNorth(), baseTileLayer.getBounds().getEast() - 1.675]); -// const svgOverlay = L.svgOverlay(svgElement, latLngBounds, { -// opacity: 0.25, -// interactive: true, -// zIndex: 10, -// }).addTo(map); +// List to be persisted in localStorage +let customMarkersList = [] + +function saveCustomMarkers() { + localStorage.setItem('custom-markers', JSON.stringify(customMarkersList)) +} + +// Stores last map coords on context +map.addEventListener('contextmenu', storeLastHeldPositions) +map.addEventListener('click', storeLastHeldPositions) + +function storeLastHeldPositions(e) { + localStorage.setItem('lastHeldXPosition', e.latlng.lng) + localStorage.setItem('lastHeldYPosition', e.latlng.lat) +} + +/** + * Function that creates custom markers and places them on the map + */ +function addCustomMarker() { + const lon = Number(localStorage.getItem('lastHeldXPosition')) + const lat = Number(localStorage.getItem('lastHeldYPosition')) + + const customMarkerIconOptions = { + iconUrl: `icon/push-pin.png`, + shadowUrl: `icon/push-pin-shadow.png`, + iconSize: [20, 20], + shadowSize: [30, 25], + iconAnchor: [0, 13], + shadowAnchor: [0, 15], + className: "fade-in" + } + const customMarkerIcon = L.icon(customMarkerIconOptions) + + // Sticks the custom marker on the map + const customMarker = L.marker([lat, lon], { icon: customMarkerIcon }).addTo(map) + customMarkersList.push({ + lat, + lon, + icon: customMarkerIconOptions + }) + + saveCustomMarkers() +} + +// Listeners for the custom add marker event +// See MarkerCreator.vue component for more details +document.addEventListener('add-custom-marker', addCustomMarker) + +/** + * Load all custom markers onto the map + */ +function loadCustomMarkersFromStorage() { + const customMarkersData = JSON.parse(localStorage.getItem('custom-markers')) + + if (!customMarkersData) return + + customMarkersList = customMarkersData + + for (let i = 0; i < customMarkersData.length; i++) { + const m = customMarkersData[i]; + console.log(m) + + L.marker([m.lat, m.lon], { icon: L.icon(m.icon) }).addTo(map) + } +} +loadCustomMarkersFromStorage() /** * UTILITIES diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue index 8f2b997c..5104c618 100644 --- a/src/components/maps/overlay/MarkerCreator.vue +++ b/src/components/maps/overlay/MarkerCreator.vue @@ -1,5 +1,5 @@