Eine Veranstaltungskarte für die Stadt bauen: Locations, Kategorien und Live-Discovery

Die meisten Local-Discovery-Produkte stehen und fallen mit einem Bildschirm: der Karte. Ein Nutzer öffnet Ihre App, um eine einfache Frage zu beantworten, nämlich was gerade in seiner Nähe passiert, und über die Karte findet er die Antwort. Diese Karte richtig hinzubekommen, mit den korrekten Pins, schnellem Filtern und Listings, die Suchmaschinen tatsächlich lesen können, ist die zentrale Entwicklungsarbeit hinter jedem Veranstaltungsguide.

Diese Anleitung führt durch den Bau einer städtischen Veranstaltungskarte von Grund auf: Veranstaltungsdaten modellieren, Locations in Koordinaten geocodieren, Marker setzen und clustern, nach Kategorie und Stadtviertel filtern und die Listings auffindbar machen. Sie setzt voraus, dass Sie bereits wissen, wie man eine Basiskarte rendert. Falls nicht, beginnen Sie mit unserem Tutorial Interaktive Karten in die eigene Website einbinden und kommen Sie für die veranstaltungsspezifischen Teile hierher zurück.

Die Veranstaltung um ihre Location herum modellieren

Eine Veranstaltung ist eine zeitgebundene Sache, die an einem Ort stattfindet. Der Ort ist das, was auf die Karte kommt, also ist die Location der Anker Ihres Datenmodells. Ein minimaler Veranstaltungsdatensatz sieht so aus:

const event = {
  id: 'evt_8471',
  title: 'Late Night Jazz at The Vortex',
  category: 'live-music',
  venue: 'The Vortex Jazz Club, 11 Gillett Square, London N16 8AZ',
  coords: null,        // wird per Geocoding befüllt, einmalig
  neighbourhood: null, // wird per Reverse-Geocoding befüllt, einmalig
  startsAt: '2026-07-09T20:30:00Z',
  url: 'https://example.com/tickets/8471',
};

Die beiden null-Felder sind entscheidend. Sie wollen eine Location nicht bei jedem Laden der Karte geocodieren. Geocodieren Sie einmal, wenn die Veranstaltung erstellt oder importiert wird, speichern Sie dann die Koordinaten und behandeln Sie sie als dauerhaft.

Schritt 1: Jede Location in Koordinaten geocodieren

Geocoding verwandelt eine menschenlesbare Adresse in Breiten- und Längengrad, die Sie einzeichnen können. Senden Sie die Location-Zeichenfolge an die Geocoding API und lesen Sie die Koordinaten aus dem obersten Ergebnis:

async function geocodeVenue(address) {
  const url = new URL('https://api.mapatlas.eu/geocoding/v1/search');
  url.searchParams.set('text', address);
  url.searchParams.set('size', '1');

  const res = await fetch(url, { headers: { Authorization: `Bearer ${API_KEY}` } });
  const data = await res.json();
  const top = data.features?.[0];
  if (!top) return null;

  const [lon, lat] = top.geometry.coordinates;
  return { lat, lon, label: top.properties.label };
}

Führen Sie dies zum Schreibzeitpunkt aus, wenn eine Veranstaltung in Ihr System gelangt, und persistieren Sie die zurückgegebenen Koordinaten am Datensatz. Eine ausführliche Erklärung, warum die genaue Pin-Position wichtig ist und wie sich Dachkoordinaten von der Tür unterscheiden, zu der die Leute tatsächlich hingehen, finden Sie unter Gebäudeeingang-Geocoding.

Schritt 2: Veranstaltungen als Marker einzeichnen

Wenn jede Veranstaltung Koordinaten hat, ist das Einzeichnen eine Schleife. Geben Sie jeder Kategorie ihre eigene Farbe, damit die Karte auf einen Blick lesbar ist:

const CATEGORY_COLORS = {
  'live-music': '#E75480',
  'theatre':    '#006BA6',
  'comedy':     '#EE7C0E',
  'food':       '#16A34A',
  'nightlife':  '#7C3AED',
};

function plotEvents(map, events) {
  events.forEach((evt) => {
    if (!evt.coords) return;
    const popup = new mapmetricsgl.Popup().setHTML(
      `<strong>${evt.title}</strong><br>${new Date(evt.startsAt).toLocaleString()}` +
      `<br><a href="${evt.url}">Tickets</a>`,
    );
    new mapmetricsgl.Marker({ color: CATEGORY_COLORS[evt.category] || '#0c3456' })
      .setLngLat([evt.coords.lon, evt.coords.lat])
      .setPopup(popup)
      .addTo(map);
  });
}

Das ist das Muster hinter echten Produkten. Ein Live-Beispiel ist OnlyHere, ein täglicher Guide für Unternehmungen in London, der jede Location geocodiert und die Veranstaltungen des Tages auf eine interaktive MapAtlas-Karte setzt, sodass Nutzer nach Location und Stadtviertel stöbern können, statt eine flache Liste zu scrollen.

Schritt 3: Clustern, wenn die Stadt sich füllt

Einzelne Marker sind für eine Handvoll Veranstaltungen in Ordnung. Ein stadtweiter Feed ist keine Handvoll. Sobald Sie etwa 100 bis 200 Pins überschreiten, verschieben Sie die Veranstaltungen in eine GeoJSON-Source und lassen die Karte sie clustern:

map.addSource('events', {
  type: 'geojson',
  cluster: true,
  clusterRadius: 50,
  data: {
    type: 'FeatureCollection',
    features: events.filter((e) => e.coords).map((e) => ({
      type: 'Feature',
      geometry: { type: 'Point', coordinates: [e.coords.lon, e.coords.lat] },
      properties: { title: e.title, category: e.category },
    })),
  },
});

Jetzt zeigt eine geschäftige Nacht im Stadtzentrum eine einzelne Blase mit einem Zähler statt hundert überlappender Pins, und das Cluster trennt sich auf, während der Nutzer hineinzoomt.

Schritt 4: Nach Kategorie und Stadtviertel filtern

Beim Filtern wird aus einer Veranstaltungskarte ein Veranstaltungsprodukt. Halten Sie die vollständige Liste im Speicher und filtern Sie das Array, dann übergeben Sie das gefilterte Set an die Karten-Source, statt Marker von Hand neu aufzubauen:

function applyFilters(map, allEvents, { category, neighbourhood }) {
  const filtered = allEvents.filter((e) =>
    (!category || e.category === category) &&
    (!neighbourhood || e.neighbourhood === neighbourhood),
  );
  map.getSource('events').setData({
    type: 'FeatureCollection',
    features: filtered.filter((e) => e.coords).map((e) => ({
      type: 'Feature',
      geometry: { type: 'Point', coordinates: [e.coords.lon, e.coords.lat] },
      properties: { title: e.title },
    })),
  });
  return filtered;
}

Um das Feld neighbourhood zu befüllen, geocodieren Sie die Koordinaten jeder Location einmal per Reverse-Geocoding und speichern den Namen des Verwaltungsgebiets. Dieser einzelne Wert treibt ein Stadtviertel-Dropdown, eine "Was ist in diesem Gebiet los"-Ansicht und eine sauberere Listing-Seite an, alles ohne weitere Abfrage zur Laufzeit.

Schritt 5: Die Listings auffindbar machen

Eine Karte beantwortet die Frage für die Person, die bereits in Ihrer App ist. Für das weitaus größere Publikum, das eine Suchmaschine oder einen KI-Assistenten fragt "Was ist heute Abend in Shoreditch los", tut sie nichts. Diese Systeme lesen strukturierte Daten, keine Pixel.

Zeichnen Sie jede Veranstaltung mit schema.org-Event-Feldern aus und verwenden Sie die Koordinaten wieder, die Sie bereits haben:

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Late Night Jazz at The Vortex",
  "startDate": "2026-07-09T20:30:00Z",
  "location": {
    "@type": "Place",
    "name": "The Vortex Jazz Club",
    "geo": { "@type": "GeoCoordinates", "latitude": 51.5462, "longitude": -0.0753 }
  }
}

Die Koordinaten, die den Pin zeichnen, speisen auch die strukturierten Daten, sodass Anzeige und Discovery aus einer einzigen Quelle stammen. Das ist der Unterschied zwischen einer Karte, die gut aussieht, und einem Produkt, das gefunden wird. Mehr dazu, warum maschinenlesbare Standortdaten die Sichtbarkeit in der KI-Suche steigern, lesen Sie in unserem Leitfaden zu standortspezifischen FAQs für die KI-Suche.

Alles zusammenführen

Eine städtische Veranstaltungskarte besteht aus fünf beweglichen Teilen: einem location-verankerten Datenmodell, Geocoding zum Schreibzeitpunkt, farbigen Markern, Clustering bei großen Mengen und array-basiertem Filtern, alle auf strukturierten Daten aufsetzend, die die Listings auffindbar halten. Bauen Sie diese Teile auf einer einzigen Geo-Plattform und die Koordinaten fließen sauber vom Geocoder über die Karte bis zum Schema, ohne doppelte Abfragen und ohne auseinanderdriftende Daten.

MapAtlas liefert Ihnen Geocoding, Reverse-Geocoding, Ortssuche und Kartenrendering, um all das auf EU-gehosteter, GDPR-konformer Infrastruktur zu bauen. Entdecken Sie die Geocoding API und die Search API, um Ihre eigene Stadt zu kartieren.