refactor: abstracting minor repeated MapLibre utilities, add observab…

…le for garden layer load

src/lib/api/mapbox.ts

@@ -1,3 +1,5 @@
+import type maplibregl from 'maplibre-gl';
+
 const { VITE_MAPBOX_ACCESS_TOKEN } = import.meta.env;
 
 const headers = {
@@ -15,6 +17,19 @@ const parseAddressPiece = (address, piece) => {
   return address;
 };
 
+export const lnglatToObject = ([lng, lat]: [number, number]) => ({
+  longitude: lng,
+  latitude: lat
+});
+
+export const objectToLngLat = ({
+  longitude,
+  latitude
+}: {
+  longitude: number;
+  latitude: number;
+}) => [longitude, latitude];
+
 export const geocode = async (addressString: string) => {
   // See response format: https://docs.mapbox.com/api/search/geocoding/#geocoding-response-object
   const response = await fetch(
@@ -109,3 +124,11 @@ export const geocodeCountryCode = async (country_code: string) => {
     return;
   }
 };
+
+export const loadImg = (map: maplibregl.Map, { url, id }: { url: string; id: string }) =>
+  new Promise((resolve) => {
+    map.loadImage(url, (error, res) => {
+      map.addImage(id, res);
+      resolve(true);
+    });
+  });

src/lib/components/Map/GardenLayer.svelte

@@ -14,6 +14,8 @@
   import key from './mapbox-context.js';
   import { tentIcon } from '$lib/images/markers';
   import { nonMemberMaxZoom } from '$lib/constants';
+  import { loadImg } from '$lib/api/mapbox';
+  import { gardenLayerLoaded } from '$lib/stores/app';
 
   type GardenFeatureCollection = {
     type: 'FeatureCollection';
@@ -174,6 +176,15 @@
     await Promise.all(icons.map((icon) => addTentImageToMap(icon.id, icon.colors)));
   };
 
+  function addPointerOnHover(layerId: string) {
+    map.on('mouseenter', layerId, () => {
+      map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', layerId, () => {
+      map.getCanvas().style.cursor = '';
+    });
+  }
+
   const setupMarkers = async () => {
     // Catch all errors to avoid having to reload when working on this component in development
     try {
@@ -184,17 +195,7 @@
         { url: '/images/markers/tent-yellow.png', id: 'tent-saved' }
       ];
 
-      await Promise.all(
-        images.map(
-          (img) =>
-            new Promise((resolve) => {
-              map.loadImage(img.url, (error, res) => {
-                map.addImage(img.id, res);
-                resolve(true);
-              });
-            })
-        )
-      );
+      await Promise.all(images.map((img) => loadImg(map, img)));
 
       calculateData();
 
@@ -304,31 +305,13 @@
       map.on('click', unclusteredPointLayerId, onGardenClick);
       map.on('click', savedGardenLayerId, onGardenClick);
 
-      map.on('mouseenter', clustersLayerId, () => {
-        map.getCanvas().style.cursor = 'pointer';
-      });
-      map.on('mouseleave', clustersLayerId, () => {
-        map.getCanvas().style.cursor = '';
-      });
-
-      map.on('mouseenter', unclusteredPointLayerId, () => {
-        map.getCanvas().style.cursor = 'pointer';
-      });
-      map.on('mouseleave', unclusteredPointLayerId, () => {
-        map.getCanvas().style.cursor = '';
-      });
-
-      map.on('mouseenter', savedGardenLayerId, () => {
-        map.getCanvas().style.cursor = 'pointer';
-      });
-      map.on('mouseleave', savedGardenLayerId, () => {
-        map.getCanvas().style.cursor = '';
-      });
+      [clustersLayerId, unclusteredPointLayerId, savedGardenLayerId].forEach(addPointerOnHover);
     } catch (err) {
       // should not error in prod
       console.log(err);
     } finally {
       mapReady = true;
+      $gardenLayerLoaded = true;
     }
   };
 

src/lib/stores/app.ts

@@ -29,3 +29,9 @@ export const appHasLoaded = derived(
 export const rootModal = writable<ComponentType | null>(null);
 
 export const close = () => rootModal.set(null);
+
+/**
+ * The garden layer loads in an async way.
+ * This observable is useful to know when it is possible to add layers on top of it.
+ */
+export const gardenLayerLoaded = writable(false);