From a57b089527f3ed740125da5e78967fd3d6fbdfd3 Mon Sep 17 00:00:00 2001
From: Edie Lemoine <edie@myparcel.nl>
Date: Thu, 4 Jul 2024 13:13:42 +0200
Subject: [PATCH] feat(pickup): support dragging map to load more locations

Note: only supported for PostNL
---
 .../src/__snapshots__/index.spec.ts.snap      |   3 +-
 .../__tests__/utils/waitForPickupLocations.ts |   2 +-
 .../components/map/LeafletMap/LeafletMap.vue  |   6 +-
 .../map/LeafletMapInner/LeafletMapInner.vue   | 108 +++--------
 .../LeafletMapLoadMoreButton.vue              |  39 ++++
 .../map/LeafletMarker/LeafletMarker.vue       |  46 +++--
 .../delivery-options/src/composables/index.ts |   1 +
 .../src/composables/usePickupLocation.spec.ts |   6 +-
 .../src/composables/usePickupLocation.ts      |  20 +-
 .../src/composables/usePickupLocationsMap.ts  | 177 ++++++++++++++++++
 .../useResolvedPickupLocations.spec.ts        |  48 +++++
 .../composables/useResolvedPickupLocations.ts | 139 +++++++++++---
 .../composables/useSelectedPickupLocation.ts  |  13 +-
 .../getDefaultConfigForPlatform.spec.ts.snap  |   2 +
 .../src/config/setConfiguration.ts            |   2 +-
 .../src/stores/useAddressStore.ts             |   5 +
 apps/delivery-options/src/types/map.types.ts  |  12 +-
 .../createGetDeliveryOptionsParameters.ts     |   7 +-
 .../src/utils/createLatLngParameters.ts       |  18 ++
 apps/delivery-options/src/utils/index.ts      |   1 +
 .../PickupLocationList/PickupLocationList.vue |   4 +-
 .../PickupLocationListWrapper.vue             |   6 +-
 .../PickupLocationMap/PickupLocationMap.vue   |  29 ++-
 .../PickupLocationMapWrapper.vue              |  18 +-
 .../PickupLocationMapMarker.vue               |   7 +-
 .../Pickup/PickupLocations.vue                |   2 +-
 libs/shared/src/composables/sdk/index.ts      |   1 +
 .../sdk/usePickupLocationsByLatLngRequest.ts  |  29 +++
 libs/shared/src/config/getMyParcelConfig.ts   |  11 +-
 .../src/config/getSendMyParcelConfig.ts       |   9 +-
 libs/shared/src/data/enums.ts                 |   1 +
 .../data/getDefaultDeliveryOptionsConfig.ts   |   1 +
 .../getPlatformConfig.spec.ts.snap            |   2 +
 libs/shared/src/utils/getAllConfigOptions.ts  |   5 +
 34 files changed, 580 insertions(+), 200 deletions(-)
 create mode 100644 apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapLoadMoreButton.vue
 create mode 100644 apps/delivery-options/src/composables/usePickupLocationsMap.ts
 create mode 100644 apps/delivery-options/src/composables/useResolvedPickupLocations.spec.ts
 create mode 100644 apps/delivery-options/src/utils/createLatLngParameters.ts
 create mode 100644 libs/shared/src/composables/sdk/usePickupLocationsByLatLngRequest.ts

diff --git a/apps/delivery-options/src/__snapshots__/index.spec.ts.snap b/apps/delivery-options/src/__snapshots__/index.spec.ts.snap
index fdd0995f..157fb170 100644
--- a/apps/delivery-options/src/__snapshots__/index.spec.ts.snap
+++ b/apps/delivery-options/src/__snapshots__/index.spec.ts.snap
@@ -69,6 +69,7 @@ exports[`exports > exports from index.ts 1`] = `
   "createCarrierMarkerIcon",
   "createDeliveryTypeTranslatable",
   "createGetDeliveryOptionsParameters",
+  "createLatLngParameters",
   "createNextDate",
   "createPackageTypeTranslatable",
   "createRelativeDateFormatter",
@@ -77,7 +78,6 @@ exports[`exports > exports from index.ts 1`] = `
   "getConfigPriceKey",
   "getDefaultAddress",
   "getDeliveryTypePrice",
-  "getFullPickupLocation",
   "getResolvedCarrier",
   "getResolvedDeliveryType",
   "getResolvedValue",
@@ -103,6 +103,7 @@ exports[`exports > exports from index.ts 1`] = `
   "useMostEcoFriendly",
   "useOptionsGroupedByCarrier",
   "usePickupLocation",
+  "usePickupLocationsMap",
   "useProvideElementWidth",
   "useResolvedCarrier",
   "useResolvedDeliveryDates",
diff --git a/apps/delivery-options/src/__tests__/utils/waitForPickupLocations.ts b/apps/delivery-options/src/__tests__/utils/waitForPickupLocations.ts
index 71d9ebaf..4c995059 100644
--- a/apps/delivery-options/src/__tests__/utils/waitForPickupLocations.ts
+++ b/apps/delivery-options/src/__tests__/utils/waitForPickupLocations.ts
@@ -2,7 +2,7 @@ import {waitFor} from '@testing-library/vue';
 import {useResolvedPickupLocations} from '../../composables';
 
 export const waitForPickupLocations = async (): Promise<void> => {
-  const locations = useResolvedPickupLocations();
+  const {locations} = useResolvedPickupLocations();
 
   await waitFor(() => locations.value.length > 0, {timeout: 1000});
 };
diff --git a/apps/delivery-options/src/components/map/LeafletMap/LeafletMap.vue b/apps/delivery-options/src/components/map/LeafletMap/LeafletMap.vue
index 00e5b179..33bfa49f 100644
--- a/apps/delivery-options/src/components/map/LeafletMap/LeafletMap.vue
+++ b/apps/delivery-options/src/components/map/LeafletMap/LeafletMap.vue
@@ -8,7 +8,7 @@
       </template>
 
       <template #default>
-        <LeafletMapInner v-bind="$props">
+        <LeafletMapInner>
           <slot />
         </LeafletMapInner>
       </template>
@@ -19,8 +19,4 @@
 <script lang="ts" setup>
 import {Loader} from '@myparcel-do/shared';
 import LeafletMapInner from '../LeafletMapInner/LeafletMapInner.vue';
-import {type LeafletMapProps} from '../../../types';
-
-// eslint-disable-next-line vue/no-unused-properties
-defineProps<LeafletMapProps>();
 </script>
diff --git a/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapInner.vue b/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapInner.vue
index 0e7281d1..a7a5c1fe 100644
--- a/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapInner.vue
+++ b/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapInner.vue
@@ -1,112 +1,48 @@
 <template>
   <div
     ref="container"
-    :style="{height}">
+    style="height: 100%">
+    <LeafletMapLoadMoreButton />
+
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 /* eslint-disable new-cap */
-import {computed, onActivated, onMounted, onUnmounted, provide, ref, toRefs, watch} from 'vue';
-import {isString} from 'radash';
-import {type Control, type Map, type Marker, type TileLayer, type LatLng, type FeatureGroup} from 'leaflet';
-import {isDef, useScriptTag, useStyleTag, useDebounceFn} from '@vueuse/core';
-import {type MapTileLayerData} from '@myparcel-do/shared';
-import {type LeafletMapProps} from '../../../types';
-import {useConfigStore} from '../../../stores';
-import {MAP_MARKER_CLASS_ACTIVE} from '../../../data';
-
-// eslint-disable-next-line vue/no-unused-properties
-const props = withDefaults(defineProps<LeafletMapProps>(), {
-  zoom: 14,
-  height: '100%',
-  center: () => [0, 0],
-});
-const propRefs = toRefs(props);
+import {ref, onMounted, toValue, onUnmounted, onActivated} from 'vue';
+import {asyncComputed, useStyleTag, useScriptTag} from '@vueuse/core';
+import {usePickupLocationsMap} from '../../../composables';
+import LeafletMapLoadMoreButton from './LeafletMapLoadMoreButton.vue';
 
+const unmountHooks = [];
 const container = ref<HTMLElement>();
 
-const map = ref<Map>();
-const tileLayer = ref<TileLayer>();
-const scale = ref<Control.Scale>();
-const markers = ref<Marker[]>([]);
-
-provide('map', map);
-provide('tileLayer', tileLayer);
-provide('scale', scale);
-provide('markers', markers);
-
-const css = await (await fetch('https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css')).text();
-useStyleTag(css);
-
-const tag = useScriptTag('https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.js');
-await tag.load();
-
-const config = useConfigStore();
-
-const tileLayerData = computed<MapTileLayerData>(() => {
-  if (isString(config.pickupLocationsMapTileLayerData)) {
-    return JSON.parse(config.pickupLocationsMapTileLayerData);
-  }
-
-  return config.pickupLocationsMapTileLayerData;
+const css = asyncComputed(async () => {
+  return (await fetch('https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css')).text();
 });
 
-const getActiveMarkerLatLng = (): undefined | LatLng => {
-  const activeMarker = markers.value.find((marker) => marker.getElement()?.classList.contains(MAP_MARKER_CLASS_ACTIVE));
-
-  return activeMarker?.getLatLng();
-};
+const styleTag = useStyleTag(css);
+const scriptTag = useScriptTag('https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.js');
 
-const fitBounds = useDebounceFn(() => {
-  if (!container.value) {
-    return;
-  }
+const {initializeMap, activeMarker, center, map} = usePickupLocationsMap();
 
-  const group: FeatureGroup = new L.featureGroup(markers.value as Marker[]);
+onMounted(async () => {
+  styleTag.load();
+  await scriptTag.load();
 
-  map.value?.setView(getActiveMarkerLatLng() ?? props.center, props.zoom);
+  const teardownMap = initializeMap(container);
 
-  const bounds = group.getBounds();
-
-  if (bounds.isValid()) {
-    map.value?.fitBounds(bounds);
-  }
-}, 50);
-
-onMounted(() => {
-  if (!isDef(container.value)) {
-    return;
-  }
-
-  const {center, scroll, zoom} = propRefs;
-  const {attribution, maxZoom, url, token} = tileLayerData.value;
-
-  map.value = new L.Map(container.value, {preferCanvas: true, scrollWheelZoom: scroll.value});
-
-  if (!isDef(map.value)) {
-    return;
-  }
-
-  map.value.setView(center.value, zoom.value);
-  tileLayer.value = new L.TileLayer(url, {attribution, maxZoom, accessToken: token});
-  scale.value = new L.Control.Scale();
-
-  tileLayer.value?.addTo(map.value);
-  scale.value?.addTo(map.value);
-
-  map.value.on('layeradd', fitBounds);
-  map.value.on('layerremove', fitBounds);
+  unmountHooks.push(teardownMap);
 });
 
 onUnmounted(() => {
-  map.value?.remove();
+  scriptTag.unload();
+  styleTag.unload();
+  unmountHooks.forEach((hook) => hook());
 });
 
-onUnmounted(watch(propRefs.zoom, () => map.value?.setZoom(propRefs.zoom.value)));
-
 onActivated(() => {
-  map.value?.panTo(getActiveMarkerLatLng() ?? propRefs.center.value);
+  map.value?.panTo(toValue(activeMarker)?.getLatLng() ?? toValue(center));
 });
 </script>
diff --git a/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapLoadMoreButton.vue b/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapLoadMoreButton.vue
new file mode 100644
index 00000000..4a4a6ca3
--- /dev/null
+++ b/apps/delivery-options/src/components/map/LeafletMapInner/LeafletMapLoadMoreButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="mp-absolute mp-bottom-10 mp-text-center mp-w-full mp-z-[99999]">
+    <DoButton
+      v-show="showLoadMoreButton"
+      :class="{
+        'mp-cursor-not-allowed mp-bg-gray-100 mp-opacity-50': loading,
+      }"
+      class="mp-inline-flex mp-px-2 mp-py-0.5 mp-transition-colors"
+      no-spacing
+      @click="loadMore">
+      {{ translate(SHOW_MORE_LOCATIONS) }}
+    </DoButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {SHOW_MORE_LOCATIONS} from '@myparcel-do/shared';
+import {DoButton} from '../../common';
+import {useLanguage, usePickupLocationsMap, useResolvedPickupLocations} from '../../../composables';
+
+const {translate} = useLanguage();
+const {locations, loadMoreLocations} = useResolvedPickupLocations();
+const {showLoadMoreButton, map} = usePickupLocationsMap();
+
+const loading = computed(() => locations.loading.value);
+
+const loadMore = async () => {
+  const center = map.value?.getCenter();
+
+  if (!center) {
+    return;
+  }
+
+  await loadMoreLocations(center.lat, center.lng);
+
+  showLoadMoreButton.value = false;
+};
+</script>
diff --git a/apps/delivery-options/src/components/map/LeafletMarker/LeafletMarker.vue b/apps/delivery-options/src/components/map/LeafletMarker/LeafletMarker.vue
index 4bdf212b..2e7d079a 100644
--- a/apps/delivery-options/src/components/map/LeafletMarker/LeafletMarker.vue
+++ b/apps/delivery-options/src/components/map/LeafletMarker/LeafletMarker.vue
@@ -5,24 +5,22 @@
 </template>
 
 <script lang="ts" setup>
-import {inject, onUnmounted, type Ref, ref, toRefs, watch} from 'vue';
-import {type Map, type MarkerOptions} from 'leaflet';
-import {isDef} from '@vueuse/core';
+import {onUnmounted, ref, toRefs, watch, onMounted, toValue} from 'vue';
+import {type MarkerOptions} from 'leaflet';
+import {isDef, watchOnce} from '@vueuse/core';
 import {ElementEvent} from '@myparcel-do/shared';
-import {type Marker} from '../../../types';
+import {type MapMarker} from '../../../types';
 import {MAP_MARKER_CLASS_ACTIVE} from '../../../data';
+import {usePickupLocationsMap} from '../../../composables';
 
 const props = defineProps<{center: [number, number]; options: MarkerOptions; active?: boolean}>();
 const propRefs = toRefs(props);
 
-const emit = defineEmits<(event: ElementEvent.Click, marker: Marker) => void>();
+const emit = defineEmits<(event: ElementEvent.Click, marker: MapMarker) => void>();
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const map = inject<Ref<Map | undefined>>('map')!;
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const markers = inject<Ref<Marker[]>>('markers')!;
+const {map, markers, loaded: mapLoaded} = usePickupLocationsMap();
 
-const marker = ref<Marker>();
+const marker = ref<MapMarker>();
 
 const onMarkerClick = (): void => {
   if (!isDef(marker.value)) {
@@ -52,14 +50,13 @@ const addMarker = (): void => {
   if (isDef(marker.value)) {
     marker.value.options = options.value;
   } else {
-    marker.value = L.marker(center.value, options.value) as Marker;
+    marker.value = L.marker(center.value, options.value) as MapMarker;
 
-    if (!isDef(marker.value)) {
-      return;
-    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const markerValue = toValue(marker)!;
 
-    marker.value.on(ElementEvent.Click, onMarkerClick);
-    marker.value.on(ElementEvent.Keydown, (event) => {
+    markerValue.on(ElementEvent.Click, onMarkerClick);
+    markerValue.on(ElementEvent.Keydown, (event) => {
       if (!['Enter', 'Space'].includes(event.originalEvent.key)) {
         return;
       }
@@ -67,22 +64,31 @@ const addMarker = (): void => {
       onMarkerClick();
     });
 
-    markers.value.push(marker.value);
+    markers.value.push(markerValue);
 
-    map?.value?.addLayer(marker.value);
+    // @ts-expect-error todo: fix leaflet type errors
+    map.value?.addLayer(markerValue);
   }
 
   watch(propRefs.active, setActive, {immediate: true});
 };
 
-onUnmounted(watch([propRefs.options, map], addMarker, {immediate: true}));
+onMounted(() => {
+  if (mapLoaded.value) {
+    addMarker();
+  } else {
+    watchOnce(mapLoaded, addMarker);
+  }
+});
 
 onUnmounted(() => {
   if (!isDef(marker.value)) {
     return;
   }
 
-  map?.value?.removeLayer(marker.value);
+  // @ts-expect-error todo: fix leaflet type errors
+  map.value?.removeLayer(marker.value);
+
   // eslint-disable-next-line no-underscore-dangle
   markers.value = markers.value.filter((item) => item._leaflet_id !== marker.value?._leaflet_id);
 });
diff --git a/apps/delivery-options/src/composables/index.ts b/apps/delivery-options/src/composables/index.ts
index 238b2dea..f960ef80 100644
--- a/apps/delivery-options/src/composables/index.ts
+++ b/apps/delivery-options/src/composables/index.ts
@@ -10,6 +10,7 @@ export * from './useLanguage';
 export * from './useMostEcoFriendly';
 export * from './useOptionsGroupedByCarrier';
 export * from './usePickupLocation';
+export * from './usePickupLocationsMap';
 export * from './useProvideElementWidth';
 export * from './useResolvedCarrier';
 export * from './useResolvedDeliveryDates';
diff --git a/apps/delivery-options/src/composables/usePickupLocation.spec.ts b/apps/delivery-options/src/composables/usePickupLocation.spec.ts
index 0aeeab2e..5d05b655 100644
--- a/apps/delivery-options/src/composables/usePickupLocation.spec.ts
+++ b/apps/delivery-options/src/composables/usePickupLocation.spec.ts
@@ -4,7 +4,7 @@ import {flushPromises} from '@vue/test-utils';
 import {CLOSED} from '@myparcel-do/shared';
 import {createUtcDate} from '../utils';
 import {mockDeliveryOptionsConfig, waitForPickupLocations} from '../__tests__';
-import {getFullPickupLocation, usePickupLocation} from './usePickupLocation';
+import {usePickupLocation} from './usePickupLocation';
 import {useLanguage} from './useLanguage';
 
 describe.concurrent.skip('usePickupLocation', (it) => {
@@ -19,7 +19,6 @@ describe.concurrent.skip('usePickupLocation', (it) => {
   });
 
   afterEach(() => {
-    getFullPickupLocation.clear();
     vi.setSystemTime(vi.getRealSystemTime());
   });
 
@@ -47,7 +46,8 @@ describe.concurrent.skip('usePickupLocation', (it) => {
     const {pickupLocation} = usePickupLocation('217862');
     await flushPromises();
 
-    const {openingHours} = pickupLocation.value;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const {openingHours} = pickupLocation.value!;
 
     // Expect to be ordered by closest date
     expect(openingHours).toEqual([
diff --git a/apps/delivery-options/src/composables/usePickupLocation.ts b/apps/delivery-options/src/composables/usePickupLocation.ts
index 2f9d5b9f..98a6c5af 100644
--- a/apps/delivery-options/src/composables/usePickupLocation.ts
+++ b/apps/delivery-options/src/composables/usePickupLocation.ts
@@ -1,27 +1,23 @@
-import {computed, type MaybeRef, type ComputedRef} from 'vue';
+import {computed, type MaybeRef, type ComputedRef, toValue} from 'vue';
 import {get} from '@vueuse/core';
 import {type ResolvedPickupLocation} from '../types';
 import {useResolvedPickupLocations} from './useResolvedPickupLocations';
 import {useResolvedCarrier, type UseResolvedCarrier} from './useResolvedCarrier';
 
-export const getFullPickupLocation = (locationCode: string): ResolvedPickupLocation | undefined => {
-  const locations = useResolvedPickupLocations();
-
-  return (locations.value ?? []).find((location) => location.locationCode === get(locationCode));
-};
-
-type UsePickupLocation = {
+interface UsePickupLocation {
   pickupLocation: ComputedRef<ResolvedPickupLocation | undefined>;
   resolvedCarrier: ComputedRef<UseResolvedCarrier | undefined>;
-};
+}
+
+export const usePickupLocation = (locationCode: MaybeRef<string | undefined>): UsePickupLocation => {
+  const {locations} = useResolvedPickupLocations();
 
-export const usePickupLocation = (locationCode: MaybeRef<string>): UsePickupLocation => {
   const pickupLocation = computed(() => {
-    return getFullPickupLocation(get(locationCode));
+    return toValue(locations).find((location) => location.locationCode === get(locationCode));
   });
 
   const resolvedCarrier = computed(() => {
-    const carrierIdentifier = pickupLocation.value?.carrier;
+    const carrierIdentifier = toValue(pickupLocation)?.carrier;
 
     if (carrierIdentifier) {
       return useResolvedCarrier(carrierIdentifier);
diff --git a/apps/delivery-options/src/composables/usePickupLocationsMap.ts b/apps/delivery-options/src/composables/usePickupLocationsMap.ts
new file mode 100644
index 00000000..2e9fa4f3
--- /dev/null
+++ b/apps/delivery-options/src/composables/usePickupLocationsMap.ts
@@ -0,0 +1,177 @@
+import {type Ref, ref, computed, watch, toRef, toValue, type ComputedRef} from 'vue';
+import {isString} from 'radash';
+import {type Map, type TileLayer, type Control} from 'leaflet';
+import {isDef, useDebounceFn, useMemoize} from '@vueuse/core';
+import {type MapTileLayerData, ConfigSetting} from '@myparcel-do/shared';
+import {type LeafletMapProps, type MapMarker} from '../types';
+import {useConfigStore} from '../stores';
+import {MAP_MARKER_CLASS_ACTIVE} from '../data';
+import {useResolvedPickupLocations} from './useResolvedPickupLocations';
+
+type StopCallback = () => void;
+
+interface UsePickupLocationsMap {
+  activeMarker: ComputedRef<undefined | MapMarker>;
+  loaded: ComputedRef<boolean>;
+  map: Ref<undefined | Map>;
+  markers: Ref<MapMarker[]>;
+  scaleControl: Ref<undefined | Control.Scale>;
+  showLoadMoreButton: Ref<boolean>;
+  tileLayer: Ref<undefined | TileLayer>;
+
+  fitBounds(): void;
+
+  initializeMap(container: Ref<HTMLElement | undefined>, settings?: LeafletMapProps): undefined | StopCallback;
+}
+
+const LEAFLET_DEFAULT_ZOOM = 14;
+
+// eslint-disable-next-line max-lines-per-function
+export const usePickupLocationsMap = useMemoize((): UsePickupLocationsMap => {
+  const {carriersWithPickup} = useResolvedPickupLocations();
+  const config = useConfigStore();
+
+  /**
+   * The element that the map is rendered in.
+   */
+  const container = ref<HTMLElement | undefined>();
+
+  /**
+   * The Leaflet map instance.
+   */
+  const map = ref<Map>();
+
+  /**
+   * The Leaflet tile layer instance.
+   */
+  const tileLayer = ref<TileLayer>();
+
+  /**
+   * The markers that are displayed on the map.
+   */
+  const markers = ref<MapMarker[]>([]);
+
+  /**
+   * The Leaflet scale control instance.
+   */
+  const scaleControl = ref<Control.Scale>();
+
+  /**
+   * The center of the map.
+   */
+  const center = ref<NonNullable<LeafletMapProps['center']>>([0, 0]);
+
+  /**
+   * The zoom level of the map.
+   */
+  const zoom = ref<NonNullable<LeafletMapProps['zoom']>>(LEAFLET_DEFAULT_ZOOM);
+
+  const mutableShowLoadMoreButton = ref<boolean>(false);
+
+  const showLoadMoreButton = computed({
+    get() {
+      const anyCarrierCanLoadMore = toValue(carriersWithPickup).some((carrier) => {
+        return toValue(carrier.features).has(ConfigSetting.PickupMapAllowLoadMore);
+      });
+
+      return anyCarrierCanLoadMore && mutableShowLoadMoreButton.value;
+    },
+    set(value) {
+      mutableShowLoadMoreButton.value = value;
+    },
+  });
+
+  const tileLayerData = computed<MapTileLayerData>(() => {
+    if (isString(config.pickupLocationsMapTileLayerData)) {
+      return JSON.parse(config.pickupLocationsMapTileLayerData);
+    }
+
+    return config.pickupLocationsMapTileLayerData;
+  });
+
+  const initializeMap = (element: Ref<HTMLElement | undefined>): undefined | StopCallback => {
+    container.value = element.value;
+
+    if (!isDef(container.value)) {
+      return;
+    }
+
+    const {attribution, maxZoom, url, token} = tileLayerData.value;
+
+    map.value = new L.Map(container.value, {
+      preferCanvas: true,
+      zoom: toValue(zoom),
+      center: toValue(center),
+      maxZoom,
+    });
+
+    if (!isDef(map.value)) {
+      return;
+    }
+
+    tileLayer.value = new L.TileLayer(url, {attribution, maxZoom, accessToken: token}).addTo(map.value);
+    scaleControl.value = new L.Control.Scale().addTo(map.value);
+
+    map.value.on('layeradd', fitBounds);
+    map.value.on('layerremove', fitBounds);
+
+    map.value.on('dragend', () => {
+      showLoadMoreButton.value = true;
+    });
+
+    const unwatchZoom = watch(toRef(zoom), () => {
+      return map.value?.setZoom(toValue(zoom));
+    });
+
+    return () => {
+      map.value?.remove();
+      unwatchZoom();
+    };
+  };
+
+  const fitBounds = useDebounceFn(() => {
+    if (!container.value || !map.value || !markers.value.length) {
+      return;
+    }
+
+    // eslint-disable-next-line new-cap
+    const group = new L.featureGroup(markers.value);
+    const zoomLevel = map.value?.getZoom() ?? toValue(zoom);
+    const bounds = group.getBounds();
+
+    if (bounds.isValid()) {
+      map.value?.fitBounds(bounds, {maxZoom: zoomLevel});
+    }
+  }, 100);
+
+  const loaded = computed(() => {
+    return (
+      Boolean(toValue(container)) &&
+      Boolean(toValue(map)) &&
+      Boolean(toValue(tileLayer)) &&
+      Boolean(toValue(scaleControl))
+    );
+  });
+
+  const activeMarker = computed<MapMarker | undefined>(() => {
+    return toValue(markers).find((marker) => {
+      const element = marker.getElement();
+
+      return element?.classList.contains(MAP_MARKER_CLASS_ACTIVE);
+    }) as MapMarker | undefined;
+  });
+
+  return {
+    fitBounds,
+    initializeMap,
+
+    activeMarker,
+    loaded,
+    map,
+    // @ts-expect-error todo: fix leaflet type errors
+    markers,
+    scaleControl,
+    showLoadMoreButton,
+    tileLayer,
+  };
+});
diff --git a/apps/delivery-options/src/composables/useResolvedPickupLocations.spec.ts b/apps/delivery-options/src/composables/useResolvedPickupLocations.spec.ts
new file mode 100644
index 00000000..10258039
--- /dev/null
+++ b/apps/delivery-options/src/composables/useResolvedPickupLocations.spec.ts
@@ -0,0 +1,48 @@
+import {describe, it, beforeEach, expect} from 'vitest';
+import {createPinia, setActivePinia} from 'pinia';
+import {useCarrierRequest} from '@myparcel-do/shared';
+import {CarrierName} from '@myparcel/constants';
+import {
+  mockDeliveryOptionsConfig,
+  mockDeliveryOptionsForm,
+  waitForDeliveryOptions,
+  waitForPickupLocations,
+} from '../__tests__';
+import {useResolvedPickupLocations} from './useResolvedPickupLocations';
+
+describe('useResolvedPickupLocations', () => {
+  beforeEach(async () => {
+    setActivePinia(createPinia());
+
+    mockDeliveryOptionsConfig();
+
+    await Promise.all([
+      mockDeliveryOptionsForm(),
+      useCarrierRequest(CarrierName.PostNl).load(),
+      waitForDeliveryOptions(),
+      waitForPickupLocations(),
+    ]);
+  });
+
+  it('loads pickup locations', () => {
+    const {locations} = useResolvedPickupLocations();
+
+    expect(locations.value.length).toBeGreaterThan(0);
+
+    locations.value.forEach((location) => {
+      expect(location).toMatchObject({
+        carrier: CarrierName.PostNl,
+        locationCode: expect.any(String),
+        locationName: expect.any(String),
+        latitude: expect.any(Number),
+        longitude: expect.any(Number),
+        street: expect.any(String),
+        number: expect.any(String),
+        postalCode: expect.any(String),
+        city: expect.any(String),
+        cc: expect.any(String),
+        openingHours: expect.any(Array),
+      });
+    });
+  });
+});
diff --git a/apps/delivery-options/src/composables/useResolvedPickupLocations.ts b/apps/delivery-options/src/composables/useResolvedPickupLocations.ts
index a375dd18..696111f8 100644
--- a/apps/delivery-options/src/composables/useResolvedPickupLocations.ts
+++ b/apps/delivery-options/src/composables/useResolvedPickupLocations.ts
@@ -1,13 +1,37 @@
-import {get, useMemoize} from '@vueuse/core';
-import {PickupLocationType, usePickupLocationsRequest, computedAsync} from '@myparcel-do/shared';
+import {ref, toValue, onUnmounted, computed, watch, type ComputedRef} from 'vue';
+import {useMemoize, watchImmediate} from '@vueuse/core';
+import {
+  PickupLocationType,
+  usePickupLocationsRequest,
+  computedAsync,
+  type ComputedAsync,
+  addLoadingProperty,
+  usePickupLocationsByLatLngRequest,
+  ConfigSetting,
+} from '@myparcel-do/shared';
 import {type PickupLocation} from '@myparcel/sdk';
 import {DeliveryTypeName} from '@myparcel/constants';
-import {createGetDeliveryOptionsParameters} from '../utils';
-import {type ResolvedPickupLocation} from '../types';
+import {createLatLngParameters, createGetDeliveryOptionsParameters} from '../utils';
+import {type ResolvedPickupLocation, type LatLng} from '../types';
 import {useAddressStore} from '../stores';
 import {type UseResolvedCarrier} from './useResolvedCarrier';
 import {useActiveCarriers} from './useActiveCarriers';
 
+interface UseResolvedPickupLocations {
+  carriersWithPickup: ComputedRef<UseResolvedCarrier[]>;
+  locations: ComputedAsync<ResolvedPickupLocation[]>;
+
+  /**
+   * Load more locations by latitude and longitude.
+   */
+  loadMoreLocations(latitude: number, longitude: number): Promise<void>;
+
+  /**
+   * Clear all previously loaded locations.
+   */
+  reset(): void;
+}
+
 const sortByDistance = (locationA: ResolvedPickupLocation, locationB: ResolvedPickupLocation): number => {
   return Number(locationA.distance) - Number(locationB.distance);
 };
@@ -41,15 +65,17 @@ const formatPickupLocation = (carrier: UseResolvedCarrier, option: PickupLocatio
   };
 };
 
-const loadPickupLocations = async (carrier: UseResolvedCarrier) => {
-  const params = createGetDeliveryOptionsParameters(carrier);
-  const query = usePickupLocationsRequest(params);
+const loadPickupLocations = async (carrier: UseResolvedCarrier, latLng?: LatLng) => {
+  const latLngParameters = createLatLngParameters(latLng);
+  const params = createGetDeliveryOptionsParameters(carrier, latLngParameters);
+
+  const query = latLng ? usePickupLocationsByLatLngRequest(params) : usePickupLocationsRequest(params);
 
   await query.load();
 
-  const locations = get(query.data) ?? [];
+  const locations = toValue(query.data) ?? [];
 
-  if (!locations.length) {
+  if (!latLng && !locations.length) {
     // Delete the pickup delivery type if there are no pickup locations to hide pickup after a failed request
     carrier.disabledDeliveryTypes.value.add(DeliveryTypeName.Pickup);
     return [];
@@ -58,24 +84,85 @@ const loadPickupLocations = async (carrier: UseResolvedCarrier) => {
   return locations.map((location) => formatPickupLocation(carrier, location as PickupLocation));
 };
 
-const pickupMemoizeOpts = {
-  getKey() {
-    // Cache per address, so the locations are reloaded when the address changes
-    // Not ideal, but otherwise the address would have to be passed as a parameter to the composable
-    return JSON.stringify(useAddressStore().$state);
-  },
-};
-
-export const useResolvedPickupLocations = useMemoize(() => {
+// eslint-disable-next-line max-lines-per-function
+const callback = (): UseResolvedPickupLocations => {
   const carriers = useActiveCarriers();
+  const latLng = ref<LatLng>(undefined);
+
+  const allLocations = ref<ResolvedPickupLocation[]>([]);
+
+  const carriersWithPickup = computed(() => toValue(carriers).filter((carrier) => toValue(carrier.hasPickup)));
+
+  const currentLocations = computedAsync<ResolvedPickupLocation[]>(async () => {
+    const requests = toValue(carriersWithPickup)
+      // When using latLng, only load more locations for carriers that allow it
+      .filter((carrier) => {
+        if (!toValue(latLng)) {
+          return true;
+        }
+
+        return toValue(carrier.features).has(ConfigSetting.PickupMapAllowLoadMore);
+      })
+      .map((carrier) => loadPickupLocations(carrier, latLng.value));
 
-  return computedAsync<ResolvedPickupLocation[]>(async () => {
-    const result = await Promise.all(
-      get(carriers)
-        .filter((carrier) => get(carrier.hasPickup))
-        .map(loadPickupLocations),
-    );
+    const foundLocations = await Promise.all(requests);
 
-    return result.map((locations) => locations.sort(sortByDistance)).flat(1);
+    return foundLocations.flat(1);
   }, []);
-}, pickupMemoizeOpts);
+
+  /**
+   * Add new locations to the list of all locations.
+   */
+  const unwatchLocations = watchImmediate(currentLocations, (newLocations) => {
+    const duplicatesFiltered = allLocations.value.filter((location) => {
+      return !newLocations.some((newLocation) => location.locationCode === newLocation.locationCode);
+    });
+
+    allLocations.value = [...duplicatesFiltered, ...newLocations];
+  });
+
+  const locations = addLoadingProperty(
+    computed(() => allLocations.value.sort(sortByDistance)),
+    currentLocations.loading,
+  );
+
+  const loadMoreLocations = async (latitude: number, longitude: number): Promise<void> => {
+    latLng.value = [latitude, longitude];
+
+    // Wait for new locations to be loaded to allow awaiting this method
+    return new Promise((resolve) => {
+      const unwatchLoading = watch(locations.loading, (isLoading) => {
+        if (isLoading) {
+          return;
+        }
+
+        resolve();
+        unwatchLoading();
+      });
+    });
+  };
+
+  onUnmounted(unwatchLocations);
+
+  return {
+    carriersWithPickup,
+    locations,
+
+    loadMoreLocations,
+    reset() {
+      allLocations.value = [];
+    },
+  };
+};
+
+export const useResolvedPickupLocations = useMemoize(callback, {
+  /**
+   * Cache per address, so the locations are reloaded when the address changes. Not ideal, but otherwise the address
+   * would have to be passed as a parameter to the composable
+   */
+  getKey() {
+    const addressStore = useAddressStore();
+
+    return JSON.stringify(addressStore.$state);
+  },
+});
diff --git a/apps/delivery-options/src/composables/useSelectedPickupLocation.ts b/apps/delivery-options/src/composables/useSelectedPickupLocation.ts
index 56272227..309f7b7b 100644
--- a/apps/delivery-options/src/composables/useSelectedPickupLocation.ts
+++ b/apps/delivery-options/src/composables/useSelectedPickupLocation.ts
@@ -1,4 +1,4 @@
-import {type Ref, type ComputedRef, computed} from 'vue';
+import {type Ref, type ComputedRef} from 'vue';
 import {type ResolvedPickupLocation} from '../types';
 import {useSelectedValues} from './useSelectedValues';
 import {usePickupLocation} from './usePickupLocation';
@@ -10,16 +10,7 @@ interface UseSelectedPickupLocation {
 
 export const useSelectedPickupLocation = (): UseSelectedPickupLocation => {
   const {pickupLocation: locationCode} = useSelectedValues();
-
-  const pickupLocation = computed(() => {
-    if (!locationCode.value) {
-      return undefined;
-    }
-
-    const {pickupLocation: result} = usePickupLocation(locationCode.value);
-
-    return result.value;
-  });
+  const {pickupLocation} = usePickupLocation(locationCode);
 
   return {
     location: pickupLocation,
diff --git a/apps/delivery-options/src/config/__snapshots__/getDefaultConfigForPlatform.spec.ts.snap b/apps/delivery-options/src/config/__snapshots__/getDefaultConfigForPlatform.spec.ts.snap
index c3435034..630f0930 100644
--- a/apps/delivery-options/src/config/__snapshots__/getDefaultConfigForPlatform.spec.ts.snap
+++ b/apps/delivery-options/src/config/__snapshots__/getDefaultConfigForPlatform.spec.ts.snap
@@ -38,6 +38,7 @@ exports[`getDefaultConfigForPlatform > should return the correct default config
   "packageType": "package",
   "pickupLocationsDefaultView": "list",
   "pickupLocationsMapTileLayerData": "{"url":"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png","attribution":"&copy; <a href=\\"https://www.openstreetmap.org/copyright\\">OpenStreetMap</a> contributors, Tiles style by <a href=\\"https://www.hotosm.org/\\" target=\\"_blank\\">Humanitarian OpenStreetMap Team</a> hosted by <a href=\\"https://openstreetmap.fr/\\" target=\\"_blank\\">OpenStreetMap France</a>","maxZoom":19}",
+  "pickupMapAllowLoadMore": true,
   "pickupShowDistance": false,
   "platform": "belgie",
   "priceEveningDelivery": 0,
@@ -96,6 +97,7 @@ exports[`getDefaultConfigForPlatform > should return the correct default config
   "packageType": "package",
   "pickupLocationsDefaultView": "map",
   "pickupLocationsMapTileLayerData": "{"url":"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png","attribution":"&copy; <a href=\\"https://www.openstreetmap.org/copyright\\">OpenStreetMap</a> contributors, Tiles style by <a href=\\"https://www.hotosm.org/\\" target=\\"_blank\\">Humanitarian OpenStreetMap Team</a> hosted by <a href=\\"https://openstreetmap.fr/\\" target=\\"_blank\\">OpenStreetMap France</a>","maxZoom":19}",
+  "pickupMapAllowLoadMore": true,
   "pickupShowDistance": true,
   "platform": "myparcel",
   "priceEveningDelivery": 0,
diff --git a/apps/delivery-options/src/config/setConfiguration.ts b/apps/delivery-options/src/config/setConfiguration.ts
index add68acb..7e17ccbf 100644
--- a/apps/delivery-options/src/config/setConfiguration.ts
+++ b/apps/delivery-options/src/config/setConfiguration.ts
@@ -14,7 +14,7 @@ export const setConfiguration = (config: InputDeliveryOptionsConfiguration): voi
   clear();
 
   configStore.update(validated.config);
-  addressStore.$patch(validated.address);
+  addressStore.update(validated.address);
 
   language.setStrings(validated.strings);
 
diff --git a/apps/delivery-options/src/stores/useAddressStore.ts b/apps/delivery-options/src/stores/useAddressStore.ts
index 54c111f2..9add71e3 100644
--- a/apps/delivery-options/src/stores/useAddressStore.ts
+++ b/apps/delivery-options/src/stores/useAddressStore.ts
@@ -10,4 +10,9 @@ export const useAddressStore = defineStore('address', {
       [AddressField.PostalCode]: '',
     };
   },
+  actions: {
+    update(address: DeliveryOptionsAddress): void {
+      this.$patch(address);
+    },
+  },
 });
diff --git a/apps/delivery-options/src/types/map.types.ts b/apps/delivery-options/src/types/map.types.ts
index 2425e781..3183b638 100644
--- a/apps/delivery-options/src/types/map.types.ts
+++ b/apps/delivery-options/src/types/map.types.ts
@@ -1,5 +1,4 @@
-import {type LeafletKeyboardEvent, type LeafletMouseEvent} from 'leaflet';
-import {type ElementEvent} from '@myparcel-do/shared';
+import {type Marker} from 'leaflet';
 
 export interface LeafletMapProps {
   center?: [number, number];
@@ -9,12 +8,9 @@ export interface LeafletMapProps {
   zoom?: number;
 }
 
-export interface Marker extends Omit<L.Marker, 'on'> {
+export interface MapMarker extends Marker {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   _leaflet_id: number;
-
-  on(event: ElementEvent.Keydown, callback: (event: LeafletKeyboardEvent) => void): void;
-  on(event: ElementEvent.Click, callback: (event: LeafletMouseEvent) => void): void;
-
-  on(event: string, callback: (event: L.LeafletEvent) => void): void;
 }
+
+export type LatLng = undefined | [number, number];
diff --git a/apps/delivery-options/src/utils/createGetDeliveryOptionsParameters.ts b/apps/delivery-options/src/utils/createGetDeliveryOptionsParameters.ts
index 9f1efa64..38a09c25 100644
--- a/apps/delivery-options/src/utils/createGetDeliveryOptionsParameters.ts
+++ b/apps/delivery-options/src/utils/createGetDeliveryOptionsParameters.ts
@@ -17,6 +17,7 @@ import {calculateCutoffTime} from './calculateCutoffTime';
 
 export const createGetDeliveryOptionsParameters = (
   resolvedCarrier: UseResolvedCarrier,
+  additionalParameters?: undefined | Partial<EndpointParameters<GetDeliveryOptions>>,
 ): EndpointParameters<GetDeliveryOptions> => {
   const config = useConfigStore();
   const address = useAddressStore();
@@ -45,11 +46,15 @@ export const createGetDeliveryOptionsParameters = (
     street: get(address, AddressField.Street, ''),
 
     include: 'shipment_options',
+
+    ...additionalParameters,
   } satisfies EndpointParameters<GetDeliveryOptions>);
 
   return Object.fromEntries(
     Object.entries(parameters).filter(([key]) => {
-      return !resolvedCarrier.config.value?.unsupportedParameters?.includes(key);
+      const config = toValue(resolvedCarrier.config);
+
+      return !config?.unsupportedParameters?.includes(key);
     }),
   ) as EndpointParameters<GetDeliveryOptions>;
 };
diff --git a/apps/delivery-options/src/utils/createLatLngParameters.ts b/apps/delivery-options/src/utils/createLatLngParameters.ts
new file mode 100644
index 00000000..84c700e9
--- /dev/null
+++ b/apps/delivery-options/src/utils/createLatLngParameters.ts
@@ -0,0 +1,18 @@
+import {type EndpointParameters, type GetDeliveryOptions} from '@myparcel/sdk';
+import {type LatLng} from '../types';
+
+export const createLatLngParameters = <T extends LatLng>(
+  latLng?: T,
+): Pick<EndpointParameters<GetDeliveryOptions>, 'latitude' | 'longitude'> | undefined => {
+  const latitude = latLng?.[0];
+  const longitude = latLng?.[1];
+
+  if (!latitude || !longitude) {
+    return undefined;
+  }
+
+  return {
+    latitude: String(latitude),
+    longitude: String(longitude),
+  };
+};
diff --git a/apps/delivery-options/src/utils/index.ts b/apps/delivery-options/src/utils/index.ts
index f3af1ae8..c2b4222f 100644
--- a/apps/delivery-options/src/utils/index.ts
+++ b/apps/delivery-options/src/utils/index.ts
@@ -3,6 +3,7 @@ export * from './calculateDropOffDays';
 export * from './calculatePackageType';
 export * from './createCarrierMarkerIcon';
 export * from './createGetDeliveryOptionsParameters';
+export * from './createLatLngParameters';
 export * from './createNextDate';
 export * from './createUtcDate';
 export * from './getConfigFromWindow';
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationList.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationList.vue
index 8a4961af..faf6853b 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationList.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationList.vue
@@ -10,12 +10,12 @@ import {FIELD_PICKUP_LOCATION} from '../../../../data';
 import {useResolvedPickupLocations, useSelectedValues} from '../../../../composables';
 import PickupListInput from './PickupListInput.vue';
 
-const pickupLocations = useResolvedPickupLocations();
+const {locations} = useResolvedPickupLocations();
 
 const {pickupLocation} = useSelectedValues();
 
 const options = computed<SelectOption[]>(() => {
-  return (toValue(pickupLocations.value) ?? []).map((option) => ({
+  return (toValue(locations.value) ?? []).map((option) => ({
     label: option.locationName,
     carrier: option.carrier,
     value: option.locationCode,
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationListWrapper.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationListWrapper.vue
index d565939c..93d59bcc 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationListWrapper.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationList/PickupLocationListWrapper.vue
@@ -2,7 +2,7 @@
   <PickupLocationListLoader v-show="loading" />
 
   <PickupLocationList
-    v-if="pickupLocations?.length"
+    v-if="locations?.length"
     v-show="!loading" />
 </template>
 
@@ -12,7 +12,7 @@ import {useResolvedPickupLocations} from '../../../../composables';
 import PickupLocationListLoader from './PickupLocationListLoader.vue';
 import PickupLocationList from './PickupLocationList.vue';
 
-const pickupLocations = useResolvedPickupLocations();
+const {locations} = useResolvedPickupLocations();
 
-const loading = computed(() => pickupLocations.loading.value || !pickupLocations.value.length);
+const loading = computed(() => locations.loading.value && !locations.value.length);
 </script>
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMap.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMap.vue
index 0cb45e5a..f054f610 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMap.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMap.vue
@@ -15,7 +15,7 @@
       <Suspense>
         <template #default>
           <PickupLocationMapMarker
-            v-for="location in pickupLocations"
+            v-for="location in locations"
             :key="location.locationCode"
             :active="locationCode === location.locationCode"
             :location-code="location.locationCode" />
@@ -38,17 +38,34 @@
 </template>
 
 <script lang="ts" setup>
+import {onUnmounted} from 'vue';
 import PickupLocationMapMarker from '../PickupLocationMapMarker/PickupLocationMapMarker.vue';
+import {useAddressStore} from '../../../../stores';
 import {useDeliveryOptionsForm} from '../../../../form';
-import {useBreakpoints, useResolvedPickupLocations, useSelectedPickupLocation} from '../../../../composables';
+import {
+  useBreakpoints,
+  useResolvedPickupLocations,
+  useSelectedPickupLocation,
+  useSelectedValues,
+} from '../../../../composables';
 import {LeafletMap} from '../../../../components';
 import PickupLocationDetails from './PickupLocationDetails.vue';
 
-const pickupLocations = useResolvedPickupLocations();
-
+const {locations, reset} = useResolvedPickupLocations();
+const addressStore = useAddressStore();
+const {locationCode} = useSelectedPickupLocation();
 const {instance: form} = useDeliveryOptionsForm();
+const {md} = useBreakpoints();
+const selectedValues = useSelectedValues();
 
-const {locationCode} = useSelectedPickupLocation();
+/**
+ * When the address changes, reset the pickup locations array and selected pickup location.
+ */
+const removeAddressHook = addressStore.$onAction(() => {
+  reset();
 
-const {md} = useBreakpoints();
+  selectedValues.pickupLocation.value = undefined;
+});
+
+onUnmounted(removeAddressHook);
 </script>
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMapWrapper.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMapWrapper.vue
index 1f1f3458..ab231902 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMapWrapper.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationMapWrapper.vue
@@ -3,18 +3,28 @@
 
   <KeepAlive>
     <PickupLocationMap
-      v-if="pickupLocations.length"
+      v-if="loadedOnce"
       v-show="!loading" />
   </KeepAlive>
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
+import {ref, watch} from 'vue';
 import {useResolvedPickupLocations} from '../../../../composables';
 import PickupLocationMapLoader from './PickupLocationMapLoader.vue';
 import PickupLocationMap from './PickupLocationMap.vue';
 
-const pickupLocations = useResolvedPickupLocations();
+const {locations} = useResolvedPickupLocations();
 
-const loading = computed(() => !pickupLocations.value.length || pickupLocations.loading.value);
+const loading = ref(true);
+const loadedOnce = ref(false);
+
+const unwatch = watch(locations.loading, (value) => {
+  loading.value = value;
+
+  if (!value) {
+    unwatch();
+    loadedOnce.value = true;
+  }
+});
 </script>
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMapMarker/PickupLocationMapMarker.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMapMarker/PickupLocationMapMarker.vue
index 37645477..91cef035 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMapMarker/PickupLocationMapMarker.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMapMarker/PickupLocationMapMarker.vue
@@ -10,7 +10,6 @@ import {computed, toRefs} from 'vue';
 import {type MarkerOptions} from 'leaflet';
 import {isDef} from '@vueuse/core';
 import {createCarrierMarkerIcon} from '../../../../utils';
-import {useDeliveryOptionsForm} from '../../../../form';
 import {MAP_MARKER_CLASS_PREFIX} from '../../../../data';
 import {usePickupLocation, useResolvedCarrier, useSelectedValues} from '../../../../composables';
 import {LeafletMarker} from '../../../../components';
@@ -18,11 +17,11 @@ import {LeafletMarker} from '../../../../components';
 const props = defineProps<{locationCode: string; active: boolean}>();
 const propRefs = toRefs(props);
 
-const form = useDeliveryOptionsForm();
-
 const {pickupLocation} = usePickupLocation(propRefs.locationCode);
 
-const carrier = useResolvedCarrier(pickupLocation.value?.carrier);
+const carrierName = computed(() => pickupLocation.value?.carrier);
+
+const carrier = useResolvedCarrier(carrierName);
 
 const center = computed(() => {
   if (!isDef(pickupLocation.value)) {
diff --git a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocations.vue b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocations.vue
index a1a008d7..f606185c 100644
--- a/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocations.vue
+++ b/apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocations.vue
@@ -30,7 +30,7 @@ import PickupLocationInput from './PickupLocationInput/PickupLocationInput.vue';
 
 const config = useConfigStore();
 
-const locations = useResolvedPickupLocations();
+const {locations} = useResolvedPickupLocations();
 const mode = ref<PickupLocationsView>(config.pickupLocationsDefaultView);
 
 const {translate} = useLanguage();
diff --git a/libs/shared/src/composables/sdk/index.ts b/libs/shared/src/composables/sdk/index.ts
index 48917cfd..d6ffe78f 100644
--- a/libs/shared/src/composables/sdk/index.ts
+++ b/libs/shared/src/composables/sdk/index.ts
@@ -5,3 +5,4 @@ export * from './useDeliveryOptionsRequest';
 export * from './usePickupLocationsRequest';
 export * from './useRequest';
 export * from './useRequestStorage';
+export {usePickupLocationsByLatLngRequest} from './usePickupLocationsByLatLngRequest';
diff --git a/libs/shared/src/composables/sdk/usePickupLocationsByLatLngRequest.ts b/libs/shared/src/composables/sdk/usePickupLocationsByLatLngRequest.ts
new file mode 100644
index 00000000..9af29e3f
--- /dev/null
+++ b/libs/shared/src/composables/sdk/usePickupLocationsByLatLngRequest.ts
@@ -0,0 +1,29 @@
+import {type EndpointParameters, type GetPickupLocations, type PickupLocation} from '@myparcel/sdk';
+import {useSdk} from '../useSdk';
+import {type RequestHandler} from '../../types';
+import {REQUEST_KEY_PICKUP_LOCATIONS} from '../../data';
+import {useRequest} from './useRequest';
+
+export const usePickupLocationsByLatLngRequest = (
+  parameters: EndpointParameters<GetPickupLocations>,
+): RequestHandler<PickupLocation[]> => {
+  return useRequest(
+    [REQUEST_KEY_PICKUP_LOCATIONS, parameters],
+    () => {
+      const sdk = useSdk();
+
+      return sdk.getPickupLocations({parameters});
+    },
+    {
+      fallback: [],
+
+      /**
+       * TODO: Remove this when the api returns a proper response rather than 500 internal server error when no pickup
+       *  locations are found (API-1301)
+       */
+      onError() {
+        // silently fail
+      },
+    },
+  );
+};
diff --git a/libs/shared/src/config/getMyParcelConfig.ts b/libs/shared/src/config/getMyParcelConfig.ts
index d13df832..d1389afe 100644
--- a/libs/shared/src/config/getMyParcelConfig.ts
+++ b/libs/shared/src/config/getMyParcelConfig.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import {
   AUSTRIA,
   BELGIUM,
@@ -29,9 +30,8 @@ import {
 } from '@myparcel/constants/countries';
 import {CarrierName, DeliveryTypeName, PackageTypeName, ShipmentOptionName} from '@myparcel/constants';
 import {type PlatformConfiguration} from '../types';
-import {AddressField, CarrierSetting, SubscriptionType, CustomDeliveryType} from '../data';
+import {AddressField, CarrierSetting, SubscriptionType, CustomDeliveryType, ConfigSetting} from '../data';
 
-// eslint-disable-next-line max-lines-per-function
 export const getMyParcelConfig = (): PlatformConfiguration => ({
   carriers: [
     {
@@ -54,7 +54,12 @@ export const getMyParcelConfig = (): PlatformConfiguration => ({
       pickupCountries: [NETHERLANDS, BELGIUM, DENMARK, SWEDEN, GERMANY],
       fakeDelivery: true,
       shipmentOptions: [ShipmentOptionName.OnlyRecipient, ShipmentOptionName.Signature],
-      features: [CarrierSetting.DeliveryDaysWindow, CarrierSetting.DropOffDays, CarrierSetting.DropOffDelay],
+      features: [
+        CarrierSetting.DeliveryDaysWindow,
+        CarrierSetting.DropOffDays,
+        CarrierSetting.DropOffDelay,
+        ConfigSetting.PickupMapAllowLoadMore,
+      ],
       addressFields: [AddressField.PostalCode, AddressField.Street, AddressField.City],
     },
     {
diff --git a/libs/shared/src/config/getSendMyParcelConfig.ts b/libs/shared/src/config/getSendMyParcelConfig.ts
index 43caa52d..1ba92aa2 100644
--- a/libs/shared/src/config/getSendMyParcelConfig.ts
+++ b/libs/shared/src/config/getSendMyParcelConfig.ts
@@ -28,7 +28,7 @@ import {
 } from '@myparcel/constants/countries';
 import {CarrierName, DeliveryTypeName, PackageTypeName, ShipmentOptionName} from '@myparcel/constants';
 import {type PlatformConfiguration} from '../types';
-import {AddressField, CarrierSetting, SubscriptionType, CustomDeliveryType} from '../data';
+import {AddressField, CarrierSetting, SubscriptionType, CustomDeliveryType, ConfigSetting} from '../data';
 
 // eslint-disable-next-line max-lines-per-function
 export const getSendMyParcelConfig = (): PlatformConfiguration => ({
@@ -53,7 +53,12 @@ export const getSendMyParcelConfig = (): PlatformConfiguration => ({
       deliveryCountries: [BELGIUM, NETHERLANDS],
       pickupCountries: [BELGIUM, NETHERLANDS],
       shipmentOptions: [ShipmentOptionName.OnlyRecipient, ShipmentOptionName.Signature],
-      features: [CarrierSetting.DeliveryDaysWindow, CarrierSetting.DropOffDays, CarrierSetting.DropOffDelay],
+      features: [
+        CarrierSetting.DeliveryDaysWindow,
+        CarrierSetting.DropOffDays,
+        CarrierSetting.DropOffDelay,
+        ConfigSetting.PickupMapAllowLoadMore,
+      ],
       fakeDelivery: true,
     },
     {
diff --git a/libs/shared/src/data/enums.ts b/libs/shared/src/data/enums.ts
index 963d288d..741ddc9a 100644
--- a/libs/shared/src/data/enums.ts
+++ b/libs/shared/src/data/enums.ts
@@ -45,6 +45,7 @@ export enum ConfigSetting {
   Locale = 'locale',
   PickupLocationsDefaultView = 'pickupLocationsDefaultView',
   PickupLocationsMapTileLayerData = 'pickupLocationsMapTileLayerData',
+  PickupMapAllowLoadMore = 'pickupMapAllowLoadMore',
   PickupShowDistance = 'pickupShowDistance',
   Platform = 'platform',
   ShowDeliveryDate = 'showDeliveryDate',
diff --git a/libs/shared/src/data/getDefaultDeliveryOptionsConfig.ts b/libs/shared/src/data/getDefaultDeliveryOptionsConfig.ts
index 815f2df8..4affb5ef 100644
--- a/libs/shared/src/data/getDefaultDeliveryOptionsConfig.ts
+++ b/libs/shared/src/data/getDefaultDeliveryOptionsConfig.ts
@@ -49,6 +49,7 @@ export const getDefaultDeliveryOptionsConfig = (): ResolvedDeliveryOptionsConfig
     [CarrierSetting.AllowPickupLocations]: true,
 
     [ConfigSetting.PickupLocationsDefaultView]: PickupLocationsView.Map,
+    [ConfigSetting.PickupMapAllowLoadMore]: true,
     [ConfigSetting.PickupShowDistance]: true,
 
     /**
diff --git a/libs/shared/src/utils/__snapshots__/getPlatformConfig.spec.ts.snap b/libs/shared/src/utils/__snapshots__/getPlatformConfig.spec.ts.snap
index 6914f095..e64e246a 100644
--- a/libs/shared/src/utils/__snapshots__/getPlatformConfig.spec.ts.snap
+++ b/libs/shared/src/utils/__snapshots__/getPlatformConfig.spec.ts.snap
@@ -53,6 +53,7 @@ exports[`getPlatformConfig > gets config for platform belgie 1`] = `
         "deliveryDaysWindow",
         "dropOffDays",
         "dropOffDelay",
+        "pickupMapAllowLoadMore",
       ],
       "name": "postnl",
       "packageTypes": [
@@ -165,6 +166,7 @@ exports[`getPlatformConfig > gets config for platform myparcel 1`] = `
         "deliveryDaysWindow",
         "dropOffDays",
         "dropOffDelay",
+        "pickupMapAllowLoadMore",
       ],
       "name": "postnl",
       "packageTypes": [
diff --git a/libs/shared/src/utils/getAllConfigOptions.ts b/libs/shared/src/utils/getAllConfigOptions.ts
index aec11ff4..e81556c4 100644
--- a/libs/shared/src/utils/getAllConfigOptions.ts
+++ b/libs/shared/src/utils/getAllConfigOptions.ts
@@ -59,4 +59,9 @@ export const getAllConfigOptions = useMemoize((): ConfigOption[] => [
     key: ConfigSetting.PickupLocationsMapTileLayerData,
     type: OptionType.String,
   }),
+
+  declareOption({
+    key: ConfigSetting.PickupMapAllowLoadMore,
+    type: OptionType.Boolean,
+  }),
 ]);