diff --git a/src/lib/components/Map/MeetupDrawer.svelte b/src/lib/components/Map/MeetupDrawer.svelte
new file mode 100644
index 00000000..c87c9db0
--- /dev/null
+++ b/src/lib/components/Map/MeetupDrawer.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+  // Stripped-down version of GardenDrawer
+  import { createEventDispatcher, tick } from 'svelte';
+  import { scale } from 'svelte/transition';
+  import { _, locale } from 'svelte-i18n';
+  import { user } from '$lib/stores/auth';
+  import { clickOutside } from '$lib/directives';
+  import { Text, Button, Progress } from '../UI';
+  import routes from '$lib/routes';
+  import type { Meetup } from './MeetupLayer.svelte';
+  import createUrl from '$lib/util/create-url';
+  import Img from '@zerodevx/svelte-img';
+  import meetupImg from '$lib/assets/wtmg-meetup.png?run';
+
+  export let meetup: Meetup | null = null;
+
+  let drawerElement;
+
+  const dispatch = createEventDispatcher();
+  $: isSelected = !!meetup;
+  let photoWrapper: HTMLElement | undefined;
+  let isShowingMagnifiedPhoto = false;
+  let isGettingMagnifiedPhoto = false;
+  const magnifyPhoto = async () => {
+    isGettingMagnifiedPhoto = true;
+    isShowingMagnifiedPhoto = true;
+    isGettingMagnifiedPhoto = false;
+    // See https://stackoverflow.com/a/60112649
+    await tick();
+    photoWrapper?.focus();
+  };
+
+  $: meetupDateStr = Intl.DateTimeFormat($locale || 'nl-BE', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long'
+  }).format(meetup?.date);
+
+  const handleClickOutsideDrawer = (event) => {
+    const { clickEvent } = event.detail;
+    // If the drawer is not open, don't try to close it
+    // (this might mess with focus elsewhere on the page)
+    if (!isSelected) {
+      return;
+    }
+    // If closing maginified photo view, don't close drawer
+    if (isShowingMagnifiedPhoto && photoWrapper.contains(clickEvent.target)) {
+      return;
+    }
+    // If showing/hiding trails, don't close drawer
+    else if (
+      (clickEvent.target instanceof HTMLInputElement && clickEvent.target.type == 'checkbox') ||
+      clickEvent.target.tagName == 'LABEL'
+    ) {
+      return;
+    } else if (!drawerElement.contains(clickEvent.target)) {
+      dispatch('close');
+    }
+  };
+</script>
+
+<Progress active={isGettingMagnifiedPhoto} />
+{#if isShowingMagnifiedPhoto && !isGettingMagnifiedPhoto}
+  <button
+    class="magnified-photo-wrapper"
+    transition:scale
+    bind:this={photoWrapper}
+    on:click={() => {
+      isShowingMagnifiedPhoto = false;
+    }}
+    on:keypress={(e) => {
+      // keypress handler to satisfy svelte linter for a11y
+      switch (e.key) {
+        case 'Enter':
+        // Don't do anything: the on:click will also be called when Enter is pressed
+      }
+    }}
+  >
+    <div class="magnified-photo">
+      <Img class="meetup-img" src={meetupImg} alt="Invitational poster for a WTMG meetup" />
+    </div>
+  </button>
+{/if}
+
+<div
+  class="drawer"
+  class:hidden={!isSelected}
+  bind:this={drawerElement}
+  use:clickOutside
+  on:click-outside={handleClickOutsideDrawer}
+>
+  {#if isSelected}
+    <section class="main">
+      <header>
+        <div class="mb-l garden-title">
+          <Text weight="w600" size="l" className="garden-title-text"
+            >WTMG meetup - {meetupDateStr}</Text
+          >
+        </div>
+        <button on:click={magnifyPhoto} class="mb-l button-container image-wrapper">
+          <Img class="meetup-img" src={meetupImg} alt="Invitational poster for a WTMG meetup" />
+        </button>
+      </header>
+      <div class="drawer-content-area">
+        <div class="description">
+          <p>
+            {$_('map.meetups.description', {
+              values: {
+                location: $_(`map.meetups.cities.${meetup?.place}`),
+                date: meetupDateStr
+              }
+            })}
+          </p>
+        </div>
+      </div>
+      <footer class="footer mt-m">
+        {#if $user}
+          <Button
+            href={createUrl(meetup?.registrationLink, {
+              ref: 'map',
+              wtmg: $user?.id
+            })}
+            target="_blank"
+            uppercase
+            medium
+          >
+            {$_('map.meetups.btn-register')}
+          </Button>
+        {:else}
+          <p class="cta-hint">
+            {@html $_('map.meetups.no-account', {
+              values: {
+                signInLink: `<a class='link' href=${routes.SIGN_IN}>${$_(
+                  'garden.drawer.guest.sign-link-text'
+                )}</a>`
+              }
+            })}
+          </p>
+        {/if}
+      </footer>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .drawer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    font-family: var(--fonts-copy);
+    top: 50%;
+    right: 0;
+    background-color: white;
+    width: 38rem;
+    max-height: 80%;
+    z-index: 200;
+    padding: 3rem 2rem 0;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    transform: translateY(-50%);
+    transition: right 250ms;
+  }
+
+  .drawer.hidden {
+    right: -38rem;
+    min-height: 30rem;
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .drawer-content-area {
+    overflow-y: auto;
+  }
+
+  .garden-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 2rem 0;
+  }
+
+  .image-wrapper {
+    width: 6rem;
+    height: 6rem;
+    background-color: var(--color-beige);
+    border-radius: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .image-wrapper:hover {
+    cursor: zoom-in;
+  }
+
+  .image-wrapper :global(.meetup-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1rem;
+  }
+
+  @media screen and (max-height: 800px) {
+    .drawer {
+      max-height: 70%;
+    }
+    .drawer-content-area {
+      margin-top: 1.2rem;
+    }
+
+    .drawer :global(.mb-l) {
+      margin-bottom: 0.4rem;
+    }
+
+    /* .image-wrapper {
+      position: absolute;
+      top: 1.5rem;
+      right: 3rem;
+      margin-bottom: 0;
+    } */
+  }
+
+  @media screen and (max-width: 700px) {
+    .drawer {
+      min-height: auto;
+      max-height: calc(var(--vh, 1vh) * 70);
+      top: auto;
+      right: auto;
+      bottom: 0;
+      transform: none;
+      width: 100%;
+      border-top-right-radius: 2rem;
+      border-top-left-radius: 2rem;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      transition: transform 250ms;
+    }
+    .drawer.hidden {
+      right: 0;
+      transform: translateY(100rem);
+    }
+
+    .drawer-content-area {
+      margin-top: 1.2rem;
+    }
+
+    /* .image-wrapper {
+      position: absolute;
+      top: 1.5rem;
+      right: 3rem;
+      margin-bottom: 0;
+    } */
+
+    .drawer :global(.mb-l) {
+      margin-bottom: 0.4rem;
+    }
+  }
+
+  .description {
+    max-width: 45rem;
+    word-wrap: break-word;
+  }
+
+  .magnified-photo-wrapper {
+    width: 100vw;
+    height: calc(var(--vh, 1vh) * 100);
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .magnified-photo {
+    max-width: 192rem;
+    max-height: calc(var(--vh, 1vh) * 60);
+    width: auto;
+    height: calc(var(--vh, 1vh) * 80);
+  }
+
+  .magnified-photo :global(img) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+  .cta-hint {
+    text-align: center;
+    margin-bottom: 1rem;
+    font-size: 1.4rem;
+  }
+</style>
diff --git a/src/lib/components/Map/MeetupLayer.svelte b/src/lib/components/Map/MeetupLayer.svelte
new file mode 100644
index 00000000..8b1b3041
--- /dev/null
+++ b/src/lib/components/Map/MeetupLayer.svelte
@@ -0,0 +1,119 @@
+<script context="module" lang="ts">
+  // Data & types, usable by other components too
+  export const MEETUP_ID = 'meetups';
+  export type Meetup = {
+    id: string;
+    date: Date;
+    // place name
+    place: string;
+    lnglat: [number, number];
+    registrationLink: string;
+  };
+
+  export const meetups: Meetup[] = [
+    {
+      id: 'lier-6-2024',
+      date: new Date(2024, 6 - 1, 22),
+      place: 'Lier',
+      lnglat: [4.56194, 51.13584],
+      registrationLink: `https://meetup.welcometomygarden.org/lier`
+    },
+    {
+      id: 'arlon-7-2024',
+      date: new Date(2024, 7 - 1, 13),
+      place: 'Arlon',
+      lnglat: [5.8095, 49.6803],
+      registrationLink: `https://meetup.welcometomygarden.org/arlon`
+    }
+  ];
+</script>
+
+<script lang="ts">
+  // Note: assumes that the parent component has already loaded the map on component load
+  import { createEventDispatcher, getContext } from 'svelte';
+  import type { ContextType } from './Map.svelte';
+  import key from './mapbox-context.js';
+  import type GeoJSON from 'geojson';
+  import type maplibregl from 'maplibre-gl';
+  import { gardenLayerLoaded } from '$lib/stores/app';
+  import { loadImg } from '$lib/api/mapbox';
+
+  export let selectedMeetupId: undefined | string;
+  let loaded = false;
+
+  const { getMap } = getContext<ContextType>(key);
+  const map = getMap();
+  const dispatch = createEventDispatcher();
+  const onMeetupClick = (e: maplibregl.MapMouseEvent) => {
+    // will be serialized, but we only need the id!
+    const meetup = e.features?.[0]?.properties;
+    dispatch('meetup-click', meetup.id);
+  };
+  const meetupFeatureCollection: (_: any) => GeoJSON.FeatureCollection = () => ({
+    type: 'FeatureCollection',
+    features: meetups.map((m) => ({
+      type: 'Feature',
+      properties: {
+        ...m,
+        // For easier serialization, arrays are serialized as strings.
+        icon: selectedMeetupId === m.id ? 'fireplace-selected' : 'fireplace'
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: m.lnglat
+      }
+    }))
+  });
+
+  async function loadLayer() {
+    map.addSource(MEETUP_ID, {
+      type: 'geojson',
+      data: meetupFeatureCollection()
+    });
+    map
+      .addLayer({
+        id: MEETUP_ID,
+        type: 'symbol',
+        source: MEETUP_ID,
+        layout: {
+          'icon-image': ['get', 'icon'],
+          'icon-size': 0.4,
+          'icon-allow-overlap': true,
+          'icon-ignore-placement': true
+        }
+      })
+      .moveLayer(MEETUP_ID);
+
+    // Add click handler
+    map.on('click', MEETUP_ID, onMeetupClick);
+
+    // Add hover handlers
+    // TODO: copy-pasted from GardenLayer, probably should be refactored as utilities
+    map.on('mouseenter', MEETUP_ID, () => {
+      map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', MEETUP_ID, () => {
+      map.getCanvas().style.cursor = '';
+    });
+
+    loaded = true;
+  }
+
+  // Only load the meetup layer after the garden layer, to ensure it layered on top.
+  $: if ($gardenLayerLoaded) {
+    Promise.all(
+      [
+        {
+          url: '/images/markers/fireplace.png',
+          id: 'fireplace'
+        },
+        { url: '/images/markers/fireplace-yellow.png', id: 'fireplace-selected' }
+      ].map((img) => loadImg(map, img))
+    ).then(loadLayer);
+  }
+
+  // Update data when meetup ID changes
+  $: if (loaded) {
+    map.getSource(MEETUP_ID).setData(meetupFeatureCollection(selectedMeetupId));
+  }
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index ae92e70d..04e48619 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1174,7 +1174,16 @@
       "select-file": "select file",
       "added-to-map": "has been added to the map."
     },
-    "zoom-restriction-notice": "to zoom in more"
+    "zoom-restriction-notice": "to zoom in more",
+    "meetups": {
+      "description": "Looking for your next slow travel adventure? Join us at the WTMG meetup near {location} on {date}! The idea is simple: we meet in a WTMG garden, share our excitement about slow travel and have a great time together. It’s free, but mandatory to register. See you there!",
+      "btn-register": "Register now",
+      "no-account": "You must {signInLink} to register",
+      "cities": {
+        "Lier": "Lier",
+        "Arlon": "Arlon"
+      }
+    }
   },
   "terms-of-use": {
     "title": "Terms of use",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3c9b0e74..80cc1b69 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1160,7 +1160,12 @@
       "select-file": "sélectionnez le fichier",
       "added-to-map": "a été ajouté sur la carte."
     },
-    "zoom-restriction-notice": "pour zoomer plus"
+    "zoom-restriction-notice": "pour zoomer plus",
+    "meetups": {
+      "description": "Vous cherchez votre prochaine aventure slow travel ? Rejoignez-nous au meetup WTMG près de {location} le {date} ! L’idée est simple : nous nous retrouvons dans un jardin WTMG, partageons notre enthousiasme pour le slow travel et passons un bon moment ensemble. C'est gratuit, mais vous devez vous inscrire. Nous avons hâte de vous y voir !",
+      "btn-register": "S’inscrire",
+      "no-account": "Vous devez {signInLink} pour vous inscrire"
+    }
   },
   "terms-of-use": {
     "title": "Conditions d'utilisation",
diff --git a/src/locales/nl.json b/src/locales/nl.json
index ada342ba..4db283ec 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -778,7 +778,15 @@
       "select-file": "selecteer een bestand",
       "added-to-map": "is toegevoegd aan de kaart."
     },
-    "zoom-restriction-notice": "om meer in te zoomen"
+    "zoom-restriction-notice": "om meer in te zoomen",
+    "meetups": {
+      "description": "Op zoek naar je volgende slow travel avontuur? Kom naar de WTMG meetup in de buurt van {location} op {date}! Het idee is simpel: we ontmoeten elkaar in een WTMG-tuin, delen ons enthousiasme over slow travel en hebben een geweldige tijd samen. Het is gratis, maar inschrijven is verplicht. Tot dan!",
+      "btn-register": "Schrijf je in",
+      "no-account": "Je moet {signInLink} om je in te schrijven",
+      "cities": {
+        "Arlon": "Aarlen"
+      }
+    }
   },
   "rules": {
     "title": "Regels",
diff --git a/src/routes/explore/+layout.svelte b/src/routes/explore/+layout.svelte
index 1ed71e1b..aaf140cc 100644
--- a/src/routes/explore/+layout.svelte
+++ b/src/routes/explore/+layout.svelte
@@ -34,6 +34,9 @@
   import { fileDataLayers, removeTrailAnimations } from '$lib/stores/file';
   import { isOnIDevicePWA } from '$lib/api/push-registrations';
   import { isEmpty } from 'lodash-es';
+  import MeetupLayer, { meetups } from '$lib/components/Map/MeetupLayer.svelte';
+  import { lnglatToObject } from '$lib/api/mapbox';
+  import MeetupDrawer from '$lib/components/Map/MeetupDrawer.svelte';
 
   let showHiking = false;
   let showCycling = false;
@@ -83,6 +86,10 @@
   // TODO check this: It looks like there is no need for a subscribe on page
   let hasGardenInURL = !!$page.params.gardenId;
 
+  // reactivity seems to be necessary here!
+  $: selectedMeetupId = $page.params.meetupId;
+  $: selectedMeetup = meetups.find((m) => m.id === selectedMeetupId);
+
   let zoom = hasGardenInURL ? ZOOM_LEVELS.ROAD : ZOOM_LEVELS.WESTERN_EUROPE;
 
   $: applyZoom = hasGardenInURL ? true : false;
@@ -136,6 +143,14 @@
     }
   };
 
+  const selectMeetup = (meetupId: string) => {
+    const meetup = meetups.find((m) => m.id === meetupId);
+    if (meetup) {
+      centerLocation = lnglatToObject(meetup.lnglat);
+      goto(`${routes.MAP}/meetup/${meetup.id}`);
+    }
+  };
+
   const goToPlace = (event) => {
     zoom = ZOOM_LEVELS.CITY;
     applyZoom = true;
@@ -225,7 +240,9 @@
       />
     {/if}
     <Drawer on:close={closeDrawer} garden={selectedGarden} />
+    <MeetupDrawer on:close={closeDrawer} meetup={selectedMeetup} />
     <WaymarkedTrails {showHiking} {showCycling} />
+    <MeetupLayer on:meetup-click={(e) => selectMeetup(e.detail)} {selectedMeetupId} />
     <slot />
     {#if carNoticeShown}
       <div class="vehicle-notice-wrapper">
diff --git a/src/routes/explore/meetup/[meetupId]/+page.svelte b/src/routes/explore/meetup/[meetupId]/+page.svelte
new file mode 100644
index 00000000..5d2a3a05
--- /dev/null
+++ b/src/routes/explore/meetup/[meetupId]/+page.svelte
@@ -0,0 +1 @@
+<script></script>
diff --git a/static/images/markers/fireplace-yellow.png b/static/images/markers/fireplace-yellow.png
new file mode 100644
index 00000000..bcb60aad
Binary files /dev/null and b/static/images/markers/fireplace-yellow.png differ
diff --git a/static/images/markers/fireplace.png b/static/images/markers/fireplace.png
new file mode 100644
index 00000000..3feb2f55
Binary files /dev/null and b/static/images/markers/fireplace.png differ