Moved compass icon loading to load event

facebookarchive · Aug 8, 2022 · 762c995 · 762c995
1 parent e68b1c7
commit 762c995
Showing 1 changed file with 34 additions and 39 deletions.
diff --git a/frontend/src/components/taskSelection/map.js b/frontend/src/components/taskSelection/map.js
@@ -178,9 +178,7 @@ export const TasksMap = ({
             positionOptions: {
               enableHighAccuracy: true
             },
-            // When active the map will receive updates to the device's location as it changes.
             trackUserLocation: true,
-            // Draw an arrow next to the location dot to indicate which direction the device is heading.
             showUserHeading: true
           })
         );
@@ -265,6 +263,40 @@ export const TasksMap = ({
           }
         });
 
+        map.loadImage(compassIcon, (error, image) => {
+          if (error) throw error;
+
+          map.addImage('compass', image);
+
+        })
+
+        map.addSource('point', {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [
+              {
+                'type': 'Feature',
+                'geometry': {
+                  'type': 'Point',
+                  'coordinates': [0, 0]
+                }
+              }
+            ]
+          }
+        });
+
+        map.addLayer({
+          'id': 'mapillary-compass',
+          'type': 'symbol',
+          'source': 'point', // reference the data source
+          'layout': {
+            'icon-image': 'compass', // reference the image
+            'icon-size': 0.5,
+            'visibility': 'none'
+          }
+        })
+
         map.addLayer({
           id: 'selected-tasks-border',
           type: 'line',
@@ -444,44 +476,7 @@ export const TasksMap = ({
         }
       });
 
-      map.loadImage(compassIcon, (error, image) => {
-        if (error) throw error;
 
-        if (!map.hasImage('compass')) {
-          map.addImage('compass', image);
-        }
-
-        if (!map.getSource('point')) {
-          map.addSource('point', {
-            'type': 'geojson',
-            'data': {
-              'type': 'FeatureCollection',
-              'features': [
-                {
-                  'type': 'Feature',
-                  'geometry': {
-                    'type': 'Point',
-                    'coordinates': [0, 0]
-                  }
-                }
-              ]
-            }
-          });
-        }
-
-        if (!map.getLayer('mapillary-compass')) {
-          map.addLayer({
-            'id': 'mapillary-compass',
-            'type': 'symbol',
-            'source': 'point', // reference the data source
-            'layout': {
-              'icon-image': 'compass', // reference the image
-              'icon-size': 0.5,
-              'visibility': 'none'
-            }
-          });
-        }
-      })