refactor(location overview): use ownPositionMarker for own position…

… on map SVA-298
smart-village-solutions · Oct 25, 2021 · 2a479f1 · 2a479f1
1 parent cc0b035
commit 2a479f1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/components/map/LocationOverview.tsx b/src/components/map/LocationOverview.tsx
@@ -4,7 +4,12 @@ import { LocationObject } from 'expo-location';
 import React, { useCallback, useContext, useState } from 'react';
 import { useQuery } from 'react-apollo';
 import { ActivityIndicator, ScrollView, View } from 'react-native';
-import { MapMarker, WebviewLeafletMessage } from 'react-native-webview-leaflet';
+import {
+  AnimationType,
+  INFINITE_ANIMATION_ITERATIONS,
+  MapMarker,
+  WebviewLeafletMessage
+} from 'react-native-webview-leaflet';
 
 import { colors, texts } from '../../config';
 import { graphqlFetchPolicy } from '../../helpers';
@@ -98,15 +103,20 @@ export const LocationOverview = ({
 
   const mapMarkers = mapToMapMarkers(overviewData);
 
-  position &&
-    mapMarkers?.push({
-      icon: ownLocation(colors.accent),
-      iconAnchor: ownLocationIconAnchor,
-      position: {
-        lat: position.coords.latitude,
-        lng: position.coords.longitude
-      }
-    });
+  const ownPositionMarker = position && {
+    icon: ownLocation(colors.accent),
+    size: ownLocationIconAnchor,
+    position: {
+      lat: position.coords.latitude,
+      lng: position.coords.longitude
+    },
+    animation: {
+      type: AnimationType.BOUNCE,
+      duration: 1,
+      delay: 0,
+      iterationCount: INFINITE_ANIMATION_ITERATIONS
+    }
+  };
 
   if (!mapMarkers?.length) {
     return (
@@ -120,7 +130,11 @@ export const LocationOverview = ({
     <SafeAreaViewFlex>
       <ScrollView>
         <WrapperWithOrientation>
-          <WebViewMap locations={mapMarkers} onMessageReceived={onMessageReceived} />
+          <WebViewMap
+            locations={mapMarkers}
+            ownPositionMarker={ownPositionMarker}
+            onMessageReceived={onMessageReceived}
+          />
           <View>
             {!selectedPointOfInterest && (
               <Wrapper>

diff --git a/src/components/map/WebViewMap.tsx b/src/components/map/WebViewMap.tsx
@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import { MapMarker, WebViewLeaflet, WebviewLeafletMessage } from 'react-native-webview-leaflet';
+import { OwnPositionMarker } from 'react-native-webview-leaflet/models';
 
 import { colors } from '../../config';
 import { imageHeight, imageWidth } from '../../helpers';
 
 type Props = {
   locations?: MapMarker[];
+  ownPositionMarker?: OwnPositionMarker;
   mapCenterPosition?: {
     lat: number;
     lng: number;
@@ -18,6 +20,7 @@ type Props = {
 
 export const WebViewMap = ({
   locations,
+  ownPositionMarker,
   mapCenterPosition,
   onMessageReceived,
   style,
@@ -44,6 +47,7 @@ export const WebViewMap = ({
           }
         ]}
         mapMarkers={locations}
+        ownPositionMarker={ownPositionMarker}
         mapCenterPosition={mapCenterPosition ?? locations?.[0]?.position}
         zoom={zoom}
       />