Comment créer une carte des événements d'une ville : lieux, catégories et découverte en direct

La plupart des produits de découverte locale vivent ou meurent sur un seul écran : la carte. Un utilisateur ouvre votre application pour répondre à une question simple, qu'y a-t-il près de moi en ce moment, et la carte est le moyen d'y répondre. Réussir cette carte, avec les bonnes épingles, un filtrage rapide et des annonces que les moteurs de recherche peuvent réellement lire, constitue le cœur du travail d'ingénierie derrière tout guide d'événements.

Ce guide décrit la création d'une carte des événements d'une ville depuis zéro : modéliser les données d'événement, géocoder les lieux en coordonnées, placer et regrouper les marqueurs, filtrer par catégorie et par quartier, et rendre les annonces découvrables. Il suppose que vous savez déjà afficher une carte de base. Si ce n'est pas le cas, commencez par notre tutoriel sur comment ajouter des cartes interactives à votre site web puis revenez ici pour les parties propres aux événements.

Modéliser l'événement autour de son lieu

Un événement est une chose limitée dans le temps qui se produit à un endroit. C'est l'endroit qui va sur la carte, donc le lieu est l'ancre de votre modèle de données. Un enregistrement d'événement minimal ressemble à ceci :

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,        // rempli par le géocodage, une seule fois
  neighbourhood: null, // rempli par le géocodage inverse, une seule fois
  startsAt: '2026-07-09T20:30:00Z',
  url: 'https://example.com/tickets/8471',
};

Les deux champs null comptent. Vous ne voulez pas géocoder un lieu à chaque chargement de la carte. Géocodez une seule fois, à la création ou à l'import de l'événement, puis stockez les coordonnées et considérez-les comme permanentes.

Étape 1 : géocoder chaque lieu en coordonnées

Le géocodage transforme une adresse lisible par un humain en une latitude et une longitude que vous pouvez placer. Envoyez la chaîne du lieu à l'API de géocodage et lisez les coordonnées du premier résultat :

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 };
}

Exécutez ceci au moment de l'écriture, lorsqu'un événement entre dans votre système, et persistez les coordonnées retournées sur l'enregistrement. Pour une explication complète de l'importance de l'emplacement exact de l'épingle, et de la différence entre les coordonnées du toit et la porte à laquelle les gens se rendent réellement, voir le géocodage de l'entrée des bâtiments.

Étape 2 : placer les événements sous forme de marqueurs

Avec des coordonnées sur chaque événement, le placement est une boucle. Donnez à chaque catégorie sa propre couleur pour que la carte se lise d'un coup d'œil :

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}">Billets</a>`,
    );
    new mapmetricsgl.Marker({ color: CATEGORY_COLORS[evt.category] || '#0c3456' })
      .setLngLat([evt.coords.lon, evt.coords.lat])
      .setPopup(popup)
      .addTo(map);
  });
}

C'est le schéma derrière de vrais produits. Un exemple en direct est OnlyHere, un guide quotidien des choses à faire à Londres qui géocode chaque lieu et place les événements du jour sur une carte interactive MapAtlas, afin qu'un utilisateur puisse parcourir ce qui se passe par lieu et par quartier plutôt que de faire défiler une liste plate.

Étape 3 : regrouper quand la ville se remplit

Les marqueurs individuels conviennent pour une poignée d'événements. Un flux à l'échelle de la ville n'est pas une poignée. Dès que vous dépassez environ 100 à 200 épingles, déplacez les événements dans une source GeoJSON et laissez la carte les regrouper :

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 },
    })),
  },
});

Désormais, une soirée animée dans le centre-ville affiche une seule bulle avec un compteur au lieu de cent épingles superposées, et le cluster se sépare à mesure que l'utilisateur zoome.

Étape 4 : filtrer par catégorie et par quartier

C'est le filtrage qui transforme une carte des événements en produit d'événements. Gardez la liste complète en mémoire et filtrez le tableau, puis transmettez l'ensemble filtré à la source de la carte plutôt que de reconstruire les marqueurs à la main :

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;
}

Pour remplir le champ neighbourhood, appliquez une fois le géocodage inverse aux coordonnées de chaque lieu et stockez le nom de la zone administrative. Cette seule valeur alimente un menu déroulant de quartiers, une vue "que se passe-t-il dans cette zone" et une page d'annonces plus propre, le tout sans autre requête à l'exécution.

Étape 5 : rendre les annonces découvrables

Une carte répond à la question pour la personne déjà présente dans votre application. Elle ne fait rien pour le public bien plus large qui demande à un moteur de recherche ou à un assistant IA "qu'y a-t-il ce soir à Shoreditch". Ces systèmes lisent des données structurées, pas des pixels.

Balisez chaque événement avec les champs Event de schema.org et réutilisez les coordonnées que vous avez déjà :

{
  "@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 }
  }
}

Les coordonnées qui dessinent l'épingle alimentent aussi les données structurées, de sorte que l'affichage et la découverte proviennent d'une seule source de vérité. C'est la différence entre une carte qui a fière allure et un produit que l'on trouve. Pour en savoir plus sur la façon dont les données de localisation lisibles par machine améliorent la visibilité dans la recherche par IA, consultez notre guide sur les FAQ spécifiques à un lieu pour la recherche par IA.

Tout assembler

Une carte des événements d'une ville, ce sont cinq pièces mobiles : un modèle de données ancré sur le lieu, un géocodage au moment de l'écriture, des marqueurs colorés, le clustering à grande échelle et un filtrage basé sur des tableaux, le tout reposant sur des données structurées qui gardent les annonces découvrables. Construisez ces pièces sur une seule plateforme géospatiale et les coordonnées circulent proprement du géocodeur à la carte puis au schéma, sans requêtes dupliquées ni données à la dérive.

MapAtlas vous fournit le géocodage, le géocodage inverse, la recherche de lieux et le rendu cartographique pour tout construire sur une infrastructure hébergée dans l'UE et conforme au GDPR. Découvrez l'API de géocodage et l'API de recherche pour commencer à cartographier votre propre ville.