wip: zoom restriction for non-members

WelcometoMyGarden · Jul 31, 2023 · 7fcca2f · 7fcca2f
1 parent 16b9009
commit 7fcca2f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/lib/components/Map/GardenLayer.svelte b/src/lib/components/Map/GardenLayer.svelte
@@ -13,6 +13,8 @@
   import { getContext, createEventDispatcher } from 'svelte';
   import key from './mapbox-context.js';
   import { tentIcon } from '$lib/images/markers';
+  import { user } from '$lib/stores/auth';
+  import { memberMaxZoom, nonMemberMaxZoom } from '$lib/constants';
 
   type GardenFeatureCollection = {
     type: 'FeatureCollection';
@@ -209,10 +211,18 @@
         type: 'geojson',
         data: fcAllGardens,
         cluster: true,
-        clusterMaxZoom: 14,
+        /** Max zoom on which to cluster points if clustering is enabled.
+         * Defaults to one zoom less than maxzoom (so that last zoom features are not clustered).
+         * https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson-clusterMaxZoom
+         *
+         * Note: the non-member max zoom should be more zoomed out than the member max zoom.
+         */
+        clusterMaxZoom: nonMemberMaxZoom - 1,
         clusterRadius: 50
       });
 
+      map.on('zoomend', () => console.log('zoom level: ', map.getZoom()));
+
       map.addSource(savedGardenSourceId, {
         type: 'geojson',
         data: fcSavedGardens

diff --git a/src/lib/components/Map/Map.svelte b/src/lib/components/Map/Map.svelte
@@ -8,9 +8,10 @@
   import key from './mapbox-context.js';
 
   import 'maplibre-gl/dist/maplibre-gl.css';
-  import { DEFAULT_MAP_STYLE } from '$lib/constants.js';
+  import { DEFAULT_MAP_STYLE, memberMaxZoom, nonMemberMaxZoom } from '$lib/constants.js';
   import FullscreenControl from './FullscreenControl.js';
   import { isFullscreen } from '$lib/stores/fullscreen.js';
+  import { user } from '$lib/stores/auth.js';
 
   export let lat: number;
   export let lon: number;
@@ -75,6 +76,8 @@
       style: DEFAULT_MAP_STYLE,
       center: [lon, lat],
       zoom,
+      /** https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters */
+      maxZoom: $user?.superfan ? memberMaxZoom : nonMemberMaxZoom,
       attributionControl: false,
       hash: false // TODO: discuss if we want this or not
     });

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -34,3 +34,10 @@ export const ICON_SIZE = [
 ];
 
 export const IMAGES_PATH = '/images';
+
+/**
+ * MapBox max zoom level for non-members, in order to preserve privacy
+ */
+export const nonMemberMaxZoom = 12;
+// This is the MapBox default https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters
+export const memberMaxZoom = 22;