From 7fcca2f8729e933c8844e596db961729c9178a15 Mon Sep 17 00:00:00 2001
From: Thor Galle <thorgalle@gmail.com>
Date: Mon, 31 Jul 2023 16:15:21 +0300
Subject: [PATCH] wip: zoom restriction for non-members

---
 src/lib/components/Map/GardenLayer.svelte | 12 +++++++++++-
 src/lib/components/Map/Map.svelte         |  5 ++++-
 src/lib/constants.ts                      |  7 +++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Map/GardenLayer.svelte b/src/lib/components/Map/GardenLayer.svelte
index 3c8e9ef8..b5d296b9 100644
--- 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
index a93ce7e2..893244ac 100644
--- 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
index 97ffe1e5..d13174dd 100644
--- 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;