refactor: center Wester-Europe instead of Belgium by default

also:
- fix: don't go to current location if a member loads a specific garden
- fix: disable geolocation on the coordinates form (used to be controlled by the /explore layout, but now its' moved to the map, so it's shared)

src/lib/components/Garden/CoordinateForm.svelte

@@ -8,6 +8,7 @@
   import { TextInput, Button } from '$lib/components/UI';
   import Map from '$lib/components/Map/Map.svelte';
   import DraggableMarker from '$lib/components/Map/DraggableMarker.svelte';
+  import { LOCATION_BELGIUM } from '$lib/constants';
 
   const dispatch = createEventDispatcher();
 
@@ -19,10 +20,8 @@
     city: ''
   };
 
-  let coordinates = initialCoordinates || {
-    latitude: 50.5,
-    longitude: 4.5
-  };
+  // TODO: if we can, we should use geolocation here to help the host
+  let coordinates = initialCoordinates || LOCATION_BELGIUM;
 
   let address = {};
   let reverseGeocoded = false;
@@ -67,7 +66,13 @@
 </script>
 
 <div class="map-container">
-  <Map lat={coordinates.latitude} lon={coordinates.longitude} recenterOnUpdate={true} zoom={6}>
+  <Map
+    lat={coordinates.latitude}
+    lon={coordinates.longitude}
+    recenterOnUpdate={true}
+    zoom={6}
+    enableGeolocation={false}
+  >
     {#if isAddressConfirmShown}
       <Button type="button" small inverse={locationConfirmed} on:click={toggleLocationConfirmed}>
         {#if locationConfirmed}

src/lib/components/Map/Map.svelte

@@ -29,7 +29,9 @@
   export let lon: number;
   export let zoom: number;
   export let applyZoom = false; // make this true if the provided zoom level should be applied
+  // Recenter when the lat & long params change
   export let recenterOnUpdate = false;
+  export let enableGeolocation = true;
   export let isShowingGarden = false;
 
   // Was used to prevent an automatic jump to the GPS location after the initial map load.
@@ -77,11 +79,11 @@
     // We can reuse this code when showing the location indicator after initializing
     // on an IP-based location. We also don't want it to jump then.
     // --
-    // if (!isAutoloadingLocation) {
+    if (isAutoloadingLocation && isShowingGarden) {
+      console.log('Ignored geolocation camera update');
+      return;
+    }
     originalUpdateCamera.apply(this, args);
-    // } else {
-    //   console.log('Ignored geolocation camera update');
-    // }
   };
   const geolocationControl = new maplibregl.GeolocateControl({
     trackUserLocation: !!$user?.superfan,
@@ -140,21 +142,6 @@
     return map;
   };
 
-  type Unsubscriber = () => void;
-  const addMapBoundsListener = (listener: () => void): Unsubscriber => {
-    const events = ['zoom', 'drag', 'rotate', 'move'];
-    for (const ev of events) {
-      map.on(ev, listener);
-    }
-    // Return unsubscriber
-    return () => {
-      for (const ev of events) {
-        map.off(ev, listener);
-      }
-      console.log('Unsubscribed bounds listener');
-    };
-  };
-
   onMount(async () => {
     // Before loading the map, clear the mapbox.eventData.uuid:<token_piece>
     // So that Mapbox (Maplibre) GL JS v1.x will generate a new uuid, which prevents tracking our users.
@@ -180,9 +167,12 @@
 
     addMap();
 
-    // Set the initial map location to the current location,
-    // but only if we're NOT loading the map on a specific garden
-    if (geolocationPermission !== 'not-available' && geolocationPermission !== 'denied') {
+    // Initialize geolocation
+    if (
+      enableGeolocation &&
+      geolocationPermission !== 'not-available' &&
+      geolocationPermission !== 'denied'
+    ) {
       const canPromptForLocationPermissionOnLoad =
         (!isOnIDevicePWA() || hasEnabledNotificationsOnCurrentDevice()) && !isShowingGarden;
 
@@ -199,7 +189,6 @@
       }
 
       map.addControl(geolocationControl);
-      // if ($user?.superfan) {
 
       // Trigger geolocation
       if (shouldTriggerGeolocation) {
@@ -270,7 +259,6 @@
 
   // When the given lon/lat change (and other referenced params), this will recenter
   $: if (recenterOnUpdate && map) {
-    console.log('move to given center', 'init', 'center', lat, lon);
     const zoomLevel = applyZoom ? zoom : map.getZoom();
     const params = { center: [lon, lat], zoom: zoomLevel };
     if (!isShowingGarden) {

src/lib/constants.ts

@@ -13,10 +13,17 @@ export const WTMG_BLOG_BASE_URL = 'https://blog.welcometomygarden.org';
 export const WTMG_UTM_SOURCE = 'welcometomygarden.org';
 export const UTM_MEMBERSHIP_CAMPAIGN = 'membership';
 export const DEFAULT_MAP_STYLE = 'mapbox://styles/mapbox/streets-v8';
+
+export const LOCATION_BELGIUM = { longitude: 4.5, latitude: 50.5 };
+export const LOCATION_WESTERN_EUROPE = {
+  longitude: 4.818409187039379,
+  latitude: 50.43017609488834
+};
 export const ZOOM_LEVELS = {
   CITY: 11,
   ROAD: 14, // 14 or 15
-  SMALL_COUNTRY: 7
+  SMALL_COUNTRY: 7,
+  WESTERN_EUROPE: 5.2
 };
 export const VALID_FILETYPE_EXTENSIONS = ['gpx', 'geojson', 'kml', 'tcx'];
 export const ICON_SIZE = [

src/routes/explore/+layout.svelte

@@ -15,7 +15,7 @@
 
   import { getCookie } from '$lib/util';
   import { crossIcon } from '$lib/images/icons';
-  import { ZOOM_LEVELS } from '$lib/constants';
+  import { LOCATION_BELGIUM, LOCATION_WESTERN_EUROPE, ZOOM_LEVELS } from '$lib/constants';
   import LayersAndTools from '$lib/components/LayersAndTools/LayersAndTools.svelte';
   import FileTrailModal from '$lib/components/Map/FileTrailModal.svelte';
   import TrainConnectionsModal from '$lib/components/Map/TrainConnectionsModal.svelte';
@@ -34,8 +34,6 @@
   import { fileDataLayers, removeTrailAnimations } from '$lib/stores/file';
   import { isOnIDevicePWA } from '$lib/api/push-registrations';
 
-  // Defaults to Belgium; TODO: default to IP-based location
-  let belgiumFallback = { longitude: 4.5, latitude: 50.5 };
   let showHiking = false;
   let showCycling = false;
   let showFileTrailModal = false;
@@ -84,7 +82,7 @@
   // TODO check this: It looks like there is no need for a subscribe on page
   let isShowingGarden = !!$page.params.gardenId;
 
-  let zoom = isShowingGarden ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.SMALL_COUNTRY;
+  let zoom = isShowingGarden ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.WESTERN_EUROPE;
 
   $: applyZoom = isShowingGarden ? true : false;
   /**
@@ -95,7 +93,7 @@
   // This variable controls the location of the map.
   // Don't make it reactive based on its params, so that it can be imperatively controlled.
   // This is useful to not recenter the map after defocussing a selected garden
-  let centerLocation = selectedGarden?.location ?? belgiumFallback;
+  let centerLocation = selectedGarden?.location ?? LOCATION_WESTERN_EUROPE;
 
   const setMapToGardenLocation = (garden: Garden) => {
     centerLocation = garden.location!;
@@ -223,10 +221,12 @@
     bind:showFileTrailModal
     bind:showTrainConnectionsModal
   />
+  <!-- TODO: the $currentPosition should be based on IP
+    (if it isn't already by default) -->
   <Filter
     on:goToPlace={goToPlace}
     bind:filteredGardens
-    closeToLocation={$currentPosition ?? belgiumFallback}
+    closeToLocation={$currentPosition ?? LOCATION_BELGIUM}
   />
   <FileTrailModal bind:show={showFileTrailModal} />
   <TrainConnectionsModal bind:show={showTrainConnectionsModal} />