feat: zoom restriction notice for non-members

src/lib/components/Map/GardenLayer.svelte

@@ -220,8 +220,6 @@
         clusterRadius: 50
       });
 
-      map.on('zoomend', () => console.log('zoom level: ', map.getZoom()));
-
       map.addSource(savedGardenSourceId, {
         type: 'geojson',
         data: fcSavedGardens

src/lib/components/Map/ZoomRestrictionNotice.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+  import { user } from '$lib/stores/auth';
+  import { getContext, onDestroy } from 'svelte';
+  import type { ContextType } from './Map.svelte';
+  import key from './mapbox-context.js';
+  import type { Map, MapEventType, EventData } from 'maplibre-gl';
+  import { nonMemberMaxZoom } from '$lib/constants';
+  import { fade } from 'svelte/transition';
+  import { Anchor } from '../UI';
+  import createUrl from '$lib/util/create-url';
+  import routes from '$lib/routes';
+  import { PlausibleEvent } from '$lib/types/Plausible';
+  const { getMap } = getContext<ContextType>(key);
+  const map = getMap();
+
+  let showNotice = false;
+
+  /**
+   * Determines if the zoom restriciton notice should be shown for map instance in its current state,
+   * and displays it if so.
+   */
+  function toggleNoticeOnMapZoom(map: Map) {
+    if (map.getZoom() >= nonMemberMaxZoom) {
+      showNotice = true;
+    } else {
+      showNotice = false;
+    }
+  }
+
+  const zoomEventHandler = (e: MapEventType['zoom'] & EventData) => {
+    toggleNoticeOnMapZoom(e.target);
+  };
+
+  if (!$user?.superfan) {
+    // Show the notice on load time if needed.
+    toggleNoticeOnMapZoom(map);
+
+    // Using this event instead of 'zoomend' results in a more responsive appearance of the notice.
+    map.on('zoom', zoomEventHandler);
+  }
+
+  onDestroy(() => {
+    map.off('zoom', zoomEventHandler);
+  });
+</script>
+
+{#if showNotice}
+  <div transition:fade>
+    <p>
+      ℹ️{' '}
+      <Anchor
+        href={createUrl(routes.ABOUT_MEMBERSHIP)}
+        track={[PlausibleEvent.VISIT_ABOUT_MEMBERSHIP, { source: 'zoom_notice' }]}
+        newtab>{$_('generics.become-member')}</Anchor
+      >{' '}{$_('map.zoom-restriction-notice')}.
+    </p>
+  </div>
+{/if}
+
+<style>
+  div {
+    padding: 4px 8px;
+    border-radius: 10px;
+    /* Same as the layers & tools background */
+    background-color: rgba(255, 255, 255, 0.9);
+    position: absolute;
+    /* Same as the filter box */
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
+    /* Make it possible to drag the map below the notice. 
+       Should be complemented with an exception for the link inside (see below) */
+    pointer-events: none;
+  }
+
+  /* Make the link clickable */
+  div :global(a) {
+    pointer-events: auto;
+  }
+
+  /* TODO: the absolute positioning here is dependent on the sizing of other components overlaying the map.
+   * Some of those components are not <Map> children, but this component needs to be a child of Map's context to listen to map zoom events.
+   * This hacky approach of absolute positioning from different component parents is now deemed preferrable over refactoring the component structures 
+   * so that they are positioned relative to eachother with e.g. flexbox or such.
+   */
+
+  /* Mobile */
+  @media screen and (max-width: 700px) {
+    div {
+      left: 48px;
+      top: 65px;
+      font-size: 1.6rem;
+    }
+  }
+
+  @media screen and (max-width: 389px) {
+    div {
+      /* iPhone SE */
+      max-width: 252px;
+    }
+  }
+
+  /* Desktop */
+  @media screen and (min-width: 701px) {
+    div {
+      left: 394px;
+      top: 10px;
+      height: 44px;
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>

src/locales/en.json

@@ -1135,7 +1135,8 @@
       "drag-here": "Drag here or {selectFile}",
       "select-file": "select file",
       "added-to-map": "has been added to the map."
-    }
+    },
+    "zoom-restriction-notice": "to zoom in more"
   },
   "terms-of-use": {
     "title": "Terms of use",

src/locales/fr.json

@@ -1122,7 +1122,8 @@
       "drag-here": "Faites glisser ici ou {selectFile}",
       "select-file": "sélectionnez le fichier",
       "added-to-map": "a été ajouté sur la carte."
-    }
+    },
+    "zoom-restriction-notice": "pour zoomer plus"
   },
   "terms-of-use": {
     "title": "Conditions d'utilisation",

src/locales/nl.json

@@ -745,7 +745,8 @@
       "drag-here": "Sleep hier of {selectFile}",
       "select-file": "selecteer een bestand",
       "added-to-map": "is toegevoegd aan de kaart."
-    }
+    },
+    "zoom-restriction-notice": "om meer in te zoomen"
   },
   "rules": {
     "title": "Regels",

src/routes/explore/+layout.svelte

@@ -27,6 +27,7 @@
   import trackEvent from '$lib/util/track-plausible';
   import { PlausibleEvent } from '$lib/types/Plausible';
   import { setExpiringCookie } from '$lib/util/set-cookie';
+  import ZoomRestrictionNotice from '$lib/components/Map/ZoomRestrictionNotice.svelte';
 
   let fallbackLocation = { longitude: 4.5, latitude: 50.5 };
   let geolocationIsLoaded = false;
@@ -178,6 +179,7 @@
     {/if}
     <FileTrails />
     <TrainconnectionsLayer />
+    <ZoomRestrictionNotice />
   </Map>
   <LayersAndTools
     bind:showHiking