From a395f4c81609c0732bd232e88690bd30e9d8b94c Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 9 Dec 2024 16:20:44 +0545 Subject: [PATCH 01/19] feat(entities): store selected entity coordinate to store --- src/mapper/src/store/entities.svelte.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/mapper/src/store/entities.svelte.ts b/src/mapper/src/store/entities.svelte.ts index 3e36e9e160..d941795485 100644 --- a/src/mapper/src/store/entities.svelte.ts +++ b/src/mapper/src/store/entities.svelte.ts @@ -31,6 +31,7 @@ let entitiesShape: Shape; let entitiesStatusList: entitiesStatusListType[] = $state([]); let syncEntityStatusLoading: boolean = $state(false); let updateEntityStatusLoading: boolean = $state(false); +let selectedEntityCoordinate: [number, number] | null = $state(null); function getEntityStatusStream(projectId: number): ShapeStream | undefined { if (!projectId) { @@ -64,6 +65,10 @@ function getEntitiesStatusStore() { selectedEntity = entityOsmId; } + async function setSelectedEntityCoordinate(entityCoordinate: [number, number] | null) { + selectedEntityCoordinate = entityCoordinate; + } + async function syncEntityStatus(projectId: number) { try { syncEntityStatusLoading = true; @@ -98,6 +103,7 @@ function getEntitiesStatusStore() { setSelectedEntity: setSelectedEntity, syncEntityStatus: syncEntityStatus, updateEntityStatus: updateEntityStatus, + setSelectedEntityCoordinate: setSelectedEntityCoordinate, get selectedEntity() { return selectedEntity; }, @@ -110,6 +116,9 @@ function getEntitiesStatusStore() { get updateEntityStatusLoading() { return updateEntityStatusLoading; }, + get selectedEntityCoordinate() { + return selectedEntityCoordinate; + }, }; } From bffb490af6d97b87807f973c2ac1a6cc22d14e79 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 9 Dec 2024 16:21:40 +0545 Subject: [PATCH 02/19] feat(maplibre-gl-directions): package add for maplibre routing feature --- src/mapper/package.json | 1 + src/mapper/pnpm-lock.yaml | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/src/mapper/package.json b/src/mapper/package.json index 36196c6c46..01f55dbaa6 100644 --- a/src/mapper/package.json +++ b/src/mapper/package.json @@ -45,6 +45,7 @@ "@electric-sql/client": "^0.8.0", "@electric-sql/pglite": "^0.2.14", "@hotosm/ui": "0.2.0-b5", + "@maplibre/maplibre-gl-directions": "^0.7.1", "@tiptap/core": "^2.10.3", "@tiptap/pm": "^2.10.3", "@tiptap/starter-kit": "^2.10.3", diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml index 0ede86887b..46de1ff4fa 100644 --- a/src/mapper/pnpm-lock.yaml +++ b/src/mapper/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@hotosm/ui': specifier: 0.2.0-b5 version: 0.2.0-b5(@types/react@18.3.3) + '@maplibre/maplibre-gl-directions': + specifier: ^0.7.1 + version: 0.7.1(@types/geojson@7946.0.14)(maplibre-gl@4.7.1) '@shoelace-style/shoelace': specifier: ^2.15.1 version: 2.18.0(@types/react@18.3.3) @@ -1076,6 +1079,11 @@ packages: resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==} engines: {node: '>=6.0.0'} + '@maplibre/maplibre-gl-directions@0.7.1': + resolution: {integrity: sha512-n2dQkMM1+LO77bnVXXp+rZwD1OVa0UNbP3mgGyDxE6NLFEPU/p+w3G/pxnDfwuapzyHYeevdpYpxrVbwABU4BQ==} + peerDependencies: + maplibre-gl: ^4.0.0 + '@maplibre/maplibre-gl-style-spec@20.4.0': resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==} hasBin: true @@ -1095,6 +1103,11 @@ packages: '@petamoriken/float16@3.9.0': resolution: {integrity: sha512-rYUZ+VFjPHD0NT2JYKj64NxXxrV642IiyaUxxorTEj0S3hT7B5Ixezyc9Fn+XvSk0ETEBp5VWjGIErzh0ug0Xw==} + '@placemarkio/polyline@1.2.0': + resolution: {integrity: sha512-PjXntwUKQFTM/MgXIZHBOtuU2rAkmPgfrIxweOJEf1vyytQJNLDMI4YIRO3LUkt++F4TyAQHjPoRsteYa+gtVQ==} + peerDependencies: + '@types/geojson': '*' + '@playwright/test@1.49.0': resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==} engines: {node: '>=18'} @@ -2820,6 +2833,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanoid@5.0.9: + resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==} + engines: {node: ^18 || >=20} + hasBin: true + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -4710,6 +4728,14 @@ snapshots: '@mapbox/whoots-js@3.1.0': {} + '@maplibre/maplibre-gl-directions@0.7.1(@types/geojson@7946.0.14)(maplibre-gl@4.7.1)': + dependencies: + '@placemarkio/polyline': 1.2.0(@types/geojson@7946.0.14) + maplibre-gl: 4.7.1 + nanoid: 5.0.9 + transitivePeerDependencies: + - '@types/geojson' + '@maplibre/maplibre-gl-style-spec@20.4.0': dependencies: '@mapbox/jsonlint-lines-primitives': 2.0.2 @@ -4735,6 +4761,10 @@ snapshots: '@petamoriken/float16@3.9.0': optional: true + '@placemarkio/polyline@1.2.0(@types/geojson@7946.0.14)': + dependencies: + '@types/geojson': 7946.0.14 + '@playwright/test@1.49.0': dependencies: playwright: 1.49.0 @@ -6637,6 +6667,8 @@ snapshots: nanoid@3.3.8: {} + nanoid@5.0.9: {} + natural-compare@1.4.0: {} node-fetch-native@1.6.4: {} From 12dea50056eab5832fc7eb9aacc784178b242567 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 9 Dec 2024 16:22:31 +0545 Subject: [PATCH 03/19] feat(main): store clicked entity coordinate to store --- src/mapper/src/lib/components/map/main.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte index c4208f433f..6f187be33c 100644 --- a/src/mapper/src/lib/components/map/main.svelte +++ b/src/mapper/src/lib/components/map/main.svelte @@ -120,8 +120,10 @@ if (clickedEntityFeature && clickedEntityFeature?.length > 0) { const clickedEntityId = clickedEntityFeature[0]?.properties?.osm_id; entitiesStore.setSelectedEntity(clickedEntityId); + entitiesStore.setSelectedEntityCoordinate([e.lngLat.lng, e.lngLat.lat]); } else { entitiesStore.setSelectedEntity(null); + entitiesStore.setSelectedEntityCoordinate(null); } // if clicked point contains task layer From dd2a82ecc8a99e486f1d55e9b14ccd2108cd6ced Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 9 Dec 2024 16:24:25 +0545 Subject: [PATCH 04/19] feat(geolocation): route path add from user location to selected entity --- .../src/lib/components/map/geolocation.svelte | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte index 65a012c7a7..4aa773e7f7 100644 --- a/src/mapper/src/lib/components/map/geolocation.svelte +++ b/src/mapper/src/lib/components/map/geolocation.svelte @@ -1,9 +1,11 @@ {#if isTaskActionModalOpen && selectedTab === 'map' && selectedEntity} @@ -99,15 +108,16 @@ {#if selectedEntity?.status !== 'SURVEY_SUBMITTED'}
{ - // todo: navigate to feature + navigateToEntity(); }} onkeydown={(e: KeyboardEvent) => { if (e.key === 'Enter') { - // todo: navigate to feature + navigateToEntity(); } }} role="button" From b7954c1aa39e87ddfd39bd254800137a88dc2419 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Thu, 12 Dec 2024 17:04:41 +0545 Subject: [PATCH 11/19] refactor(main): geolocation status handle on child component, select payload for setSelectedEntityCoordinate action --- src/mapper/src/lib/components/map/main.svelte | 50 ++----------------- 1 file changed, 5 insertions(+), 45 deletions(-) diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte index e49142b5b0..8d930d76d4 100644 --- a/src/mapper/src/lib/components/map/main.svelte +++ b/src/mapper/src/lib/components/map/main.svelte @@ -75,8 +75,6 @@ let loaded: boolean = $state(false); let selectedBaselayer: string = $state('OSM'); let taskAreaClicked: boolean = $state(false); - let toggleGeolocationStatus: boolean = $state(false); - let toggleNavigationMode: boolean = $state(false); let projectSetupStep = $state(null); // Trigger adding the PMTiles layer to baselayers, if PmtilesUrl is set let allBaseLayers: maplibregl.StyleSpecification[] = $derived( @@ -151,12 +149,14 @@ const clickedTaskFeature = map?.queryRenderedFeatures(e.point, { layers: ['task-fill-layer'], }); - // if clicked point contains entity then set it's osm id else set null to store if (clickedEntityFeature && clickedEntityFeature?.length > 0) { const clickedEntityId = clickedEntityFeature[0]?.properties?.osm_id; entitiesStore.setSelectedEntity(clickedEntityId); - entitiesStore.setSelectedEntityCoordinate([e.lngLat.lng, e.lngLat.lat]); + entitiesStore.setSelectedEntityCoordinate({ + entityId: clickedEntityId, + coordinate: [e.lngLat.lng, e.lngLat.lat], + }); } else { entitiesStore.setSelectedEntity(null); entitiesStore.setSelectedEntityCoordinate(null); @@ -281,20 +281,6 @@ } } - // if navigation mode on, tilt map by 50 degrees - $effect(() => { - if (toggleNavigationMode && toggleGeolocationStatus) { - map?.setPitch(50); - } else { - map?.setPitch(0); - } - }); - - // if map loaded, turn on geolocation by default - $effect(() => { - if (loaded) toggleGeolocationStatus = true; - }); - onMount(async () => { // Register pmtiles protocol if (!maplibre.config.REGISTERED_PROTOCOLS.hasOwnProperty('pmtiles')) { @@ -340,20 +326,6 @@ - - - { - toggleGeolocationStatus = !toggleGeolocationStatus; - toggleNavigationMode = false; - }} - > - - - - (toggleNavigationMode = !toggleNavigationMode)} - > - - {#if toggleGeolocationStatus} - - {/if} + Date: Thu, 12 Dec 2024 17:08:10 +0545 Subject: [PATCH 12/19] fix(geolocation): handle toggle geolocation on geolocation component itself --- .../src/lib/components/map/geolocation.svelte | 127 +++++++++++++----- 1 file changed, 96 insertions(+), 31 deletions(-) diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte index 3d56229d87..ad37645b4d 100644 --- a/src/mapper/src/lib/components/map/geolocation.svelte +++ b/src/mapper/src/lib/components/map/geolocation.svelte @@ -1,5 +1,5 @@ - - - + + + { + entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation); + if (!entitiesStore.toggleGeolocation) { + exitNavigationMode(); + } + }} + > + + +{#if entitiesStore.toggleGeolocation} + + + +{/if} + +{#if entitiesStore.toggleGeolocation && entityToNavigate} +
+
+

Distance: {entityDistance}m

+ { + e.key === 'Enter' && exitNavigationMode(); + }} + role="button" + tabindex="0" + size="small" + class="secondary" + disabled={entitiesStore.syncEntityStatusLoading} + > + Exit Navigation + +
+
+{/if} From a49376c735a33fa0f91bca937cc8e66724c618cc Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Fri, 13 Dec 2024 13:41:47 +0545 Subject: [PATCH 13/19] feat(location): location img add --- src/mapper/src/assets/images/location.png | Bin 0 -> 2233 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/mapper/src/assets/images/location.png diff --git a/src/mapper/src/assets/images/location.png b/src/mapper/src/assets/images/location.png new file mode 100644 index 0000000000000000000000000000000000000000..185d0d0cef05043bfd269e18f4559aa80611e240 GIT binary patch literal 2233 zcmV;q2uAmbP)`|L4wZ>?#SU6;J_nKoyR6-87}j!w$CB-X;S2sR7zV0+kO{Lt62YK&W3@galL~ z5~YeDMNL0|=!cf3kXWh;Es5859DALlZPL__q~%dsm571~as1ewnZvmoT2)aKdmeXo z*1JE++R=Jv_ul{9x%b?2&b$`AwzpxKncXtQk7~Ix0j( zgr4kNf4yf}-xd*eiogwshZ1>sf-Lo5OMZ9)F%zrMCqBD&c|)=B0rv1+xwUOn0%k{k zdyhSb2bv3o{~{)06M8(?_9gbb-30Y9Bmmu|NbSGb+CTbx#DH<3&)j-zgERB*U2^y> zBoOINezV+BJDY}wXJHVdLXX|@nNKLk-Oq$iBhm1S4)bj$%|c^BpU$>tJmNo!iPePa z;4Nw0pHB}KPQm~R26!dc-sX~bxQay9e3TXUO?GYC2m?gkqF>2vxIuX|AYXkAst{(J zQ;clXEjv=7&-Aoi=P(UPaaW;=DO)7A-O+mJ$lnkVk#!wq>w>wr+C|osXQ{5!`+Hdg{|qn!U2RNw9peB9Vk(T zH7Ro3dk~O7LW>VW$?WONs4*CPr;cwT0D**_$hK|KqcLg>ZC#DM{ns7@AXwL-qt!JE zxmKXM2kbid7R1YQOtgcPn=UrYuF!vqR7R@(HL>KMM~n~!tGjQjL#GH>wjG&Q>q^L2 zFew*x#|{0XgID_8Saw5}NbQxw)rbL`(A1nSyy52@-!0m*tq#NibN@Wew=X2Jrgh-x zK*>$D%i#cGpyZKn4SWl&)3jh1-IC{2aqG?bm;STZbJiX{JSAdpm9x*lFyd(Pt$}Z$ zbuJtXBcuC0enfr;Ew-4Qcf&L;`|hFwv}iQLDBkm#{74=F(cK6!9fU~;=7p9fZ8R3h zOiv;tGJyUT24V8Afq$WiR=^<2@(v>;N-490B4Z_d5OvZ(lLR~L?_0uOiJFi~sIa*|U znYTamimpY#3ceE{eG6T*`2{ZfeT1u=Is~Z zlR#1M@od{MIddIiLi;ZCwAum<7FA<8D}R|c*W`k`q#Szij4=>FM>G8+zH_JpCaxKWY?uTc{znjoo-RFt5QGw1UtzIvzlSA`P4t~GtyvS=L7pBM=@pZ9 zDVuxyTKY$xMMxrvL=ZVUWMKRUmL6}x=D?}C?W{dBR$p;b(T#j+5yD|qy z|Ah#MEVkC#H~Nfx*^jV9knZpY>HP2?5D}4j45Ss%c=yI92xcQ3G4Q)|f8lnD@D7bM zTC59JYM8rAiZ_BPMNGM&3)9Y>6md6b#0U1;mUSO27VU#^x>6(JM9EF%bPgXP#+bA5 zOjp;3OKSd4dQCN|gAMfaxjg~t&Su}9v@3-vuq=Rn_t$}q;{Zg0&WJB1iA-gR6` zy6@OzBVDBz_QW2c(VGd1jl3alk;}i03NqHc@e9OwM7&bh!X)DGV#W8i=0_{$WsJQ= zzZbnP=$tC1= zwe|e}x12u^ez!621&6UUNn6k-ZjXPRMe4D2M2Z$@nVnt?YLU}va+Vi_iuTd(hZe{s z-X`JwdH6)mnX?pcPnyV@#0jlglRx^BOl*DzpGZXHp_aZ;<7ve~NTkpja_tA9V|I&$ z`K&#c$Z39=#0s4r8agjQyG8Fe$4cEF=brt3NvzPCvuOO)V$#korfZdcjRccup>z4X z1L6fUgv3Gg^RNjnrb)EW8b$7-+M2lB{~0_Bi}xboBwpyUsYd9%-2VxDz_imo3KB20 zhFD#8YY7G!-7+F7szT@$C3;rxy?^QZ`n{D!E3zaPlT?M!`e8IO;5~fl`$Txi^n+@m zB9YHCd_VLyofF+{_e+7xdnS3n-b{bt$4PjEUY$C1>KNjGG(7>1ow_3K00000NkvXX Hu0mjfi?uU5 literal 0 HcmV?d00001 From f29f108906086e0756c35c1b77ff7dd4b3227a2c Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Fri, 13 Dec 2024 14:45:27 +0545 Subject: [PATCH 14/19] fix(main): upate entity fill-color --- src/mapper/src/lib/components/map/main.svelte | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte index 8d930d76d4..d6a9aade11 100644 --- a/src/mapper/src/lib/components/map/main.svelte +++ b/src/mapper/src/lib/components/map/main.svelte @@ -410,18 +410,29 @@ Date: Fri, 13 Dec 2024 15:19:16 +0545 Subject: [PATCH 15/19] feat(maplibre-directions): custom styling for direction routes --- src/mapper/src/assets/maplibre-directions.ts | 68 ++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/mapper/src/assets/maplibre-directions.ts diff --git a/src/mapper/src/assets/maplibre-directions.ts b/src/mapper/src/assets/maplibre-directions.ts new file mode 100644 index 0000000000..8338ffb6ed --- /dev/null +++ b/src/mapper/src/assets/maplibre-directions.ts @@ -0,0 +1,68 @@ +// snapline: line from waypoint to road +export const layers = [ + { + id: 'maplibre-gl-directions-snapline', + type: 'line', + source: 'maplibre-gl-directions', + layout: { + 'line-cap': 'round', + 'line-join': 'round', + }, + paint: { + 'line-dasharray': [2, 2], + 'line-color': '#000000', + 'line-opacity': 0.65, + 'line-width': 2, + }, + filter: ['==', ['get', 'type'], 'SNAPLINE'], + }, + + // primary route + { + id: 'maplibre-gl-directions-routeline', + type: 'line', + source: 'maplibre-gl-directions', + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + }, + paint: { + 'line-width': 12, + 'line-opacity': 1, + 'line-color': '#4285f4', + }, + filter: ['==', ['get', 'route'], 'SELECTED'], + }, + + // alternative route + { + id: 'maplibre-gl-directions-alt-routeline', + type: 'line', + source: 'maplibre-gl-directions', + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + }, + paint: { + 'line-width': 12, + 'line-opacity': 0.8, + 'line-color': '#547fff', + }, + filter: ['==', ['get', 'route'], 'ALT'], + }, + + // only apply icon-style to the destination waypoint as we have icon for the origin + { + id: 'maplibre-gl-directions-waypoint', + type: 'symbol', + source: 'maplibre-gl-directions', + layout: { + 'icon-image': 'location', + 'icon-anchor': 'bottom', + 'icon-ignore-placement': true, + 'icon-overlap': 'always', + 'icon-size': 0.5, + }, + filter: ['all', ['==', ['get', 'type'], 'WAYPOINT'], ['==', ['get', 'category'], 'DESTINATION']], + }, +]; From 3d2160353775338989250969f5ed886c196e03f8 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Fri, 13 Dec 2024 15:20:44 +0545 Subject: [PATCH 16/19] fix(geolocation): load destination location image, custom layer style load --- .../src/lib/components/map/geolocation.svelte | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte index ad37645b4d..af545029b5 100644 --- a/src/mapper/src/lib/components/map/geolocation.svelte +++ b/src/mapper/src/lib/components/map/geolocation.svelte @@ -7,6 +7,8 @@ import { getAlertStore } from '$store/common.svelte.ts'; import { getEntitiesStatusStore } from '$store/entities.svelte.ts'; import { getCommonStore } from '$store/common.svelte.ts'; + import { layers } from '$assets/maplibre-directions.ts'; + import locationUrl from '$assets/images/location.png'; interface Props { map: maplibregl.Map | undefined; @@ -29,7 +31,20 @@ // initialize MapLibreGlDirections $effect(() => { if (map) { - directions = new MapLibreGlDirections(map); + // load location image for destination + map.loadImage(locationUrl).then((image) => { + if (image) { + map.addImage('location', image.data); + } + }); + directions = new MapLibreGlDirections(map, { + // custom styled direction layer + layers, + sensitiveWaypointLayers: ['maplibre-gl-directions-waypoint'], + sensitiveSnappointLayers: ['maplibre-gl-directions-snappoint'], + sensitiveRoutelineLayers: ['maplibre-gl-directions-routeline'], + sensitiveAltRoutelineLayers: ['maplibre-gl-directions-alt-routeline'], + }); directions.interactive = false; map.addControl(new LoadingIndicatorControl(directions)); directions.clear(); From bc821e95f91597f53b073b0a6411c8ead1d4d9d5 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 16 Dec 2024 14:17:22 +0545 Subject: [PATCH 17/19] fix(entities): turn off geolocation by default --- src/mapper/src/store/entities.svelte.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapper/src/store/entities.svelte.ts b/src/mapper/src/store/entities.svelte.ts index 52a4433833..b9ef0f0ea3 100644 --- a/src/mapper/src/store/entities.svelte.ts +++ b/src/mapper/src/store/entities.svelte.ts @@ -38,7 +38,7 @@ let syncEntityStatusLoading: boolean = $state(false); let updateEntityStatusLoading: boolean = $state(false); let selectedEntityCoordinate: entityIdCoordinateMapType | null = $state(null); let entityToNavigate: entityIdCoordinateMapType | null = $state(null); -let toggleGeolocation: boolean = $state(true); +let toggleGeolocation: boolean = $state(false); function getEntityStatusStream(projectId: number): ShapeStream | undefined { if (!projectId) { From b39ecfa7fcafb8e1dc0262c6df9d177c4bbe0a7c Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 16 Dec 2024 14:19:11 +0545 Subject: [PATCH 18/19] feat(geolocation): show tooltip popup to users indicating geolocation feature to be turned on --- .../src/lib/components/map/geolocation.svelte | 48 ++++++++++++++----- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/src/mapper/src/lib/components/map/geolocation.svelte b/src/mapper/src/lib/components/map/geolocation.svelte index af545029b5..7fdc3ef67f 100644 --- a/src/mapper/src/lib/components/map/geolocation.svelte +++ b/src/mapper/src/lib/components/map/geolocation.svelte @@ -25,6 +25,7 @@ let watchId: number | undefined = $state(); let directions: MapLibreGlDirections = $state(); let entityDistance: number = $state(0); + let tooltipRef: any = $state(); const entityToNavigate = $derived(entitiesStore.entityToNavigate); @@ -206,20 +207,43 @@ - { - entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation); - if (!entitiesStore.toggleGeolocation) { - exitNavigationMode(); - } + tooltipRef.hide()} + onkeydown={(e: KeyboardEvent) => { + e.key === 'Enter' && tooltipRef.hide(); }} - > - +
+ For the best experience, turn on location + +
+ { + entitiesStore.setToggleGeolocation(!entitiesStore.toggleGeolocation); + if (!entitiesStore.toggleGeolocation) { + exitNavigationMode(); + } + }} + > + + + + + {#if entitiesStore.toggleGeolocation} From 3bb4df4a3d1161c5d15e96d2ba85d6939cbb9e48 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 16 Dec 2024 15:02:30 +0545 Subject: [PATCH 19/19] fix(main): remove zoom buttons from map --- src/mapper/src/lib/components/map/main.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte index d6a9aade11..053bf55e27 100644 --- a/src/mapper/src/lib/components/map/main.svelte +++ b/src/mapper/src/lib/components/map/main.svelte @@ -324,7 +324,7 @@ ]} > - +