Şehir Etkinlik Haritası Nasıl Oluşturulur: Mekanlar, Kategoriler ve Canlı Keşif

Çoğu yerel keşif ürünü tek bir ekranda yaşar ya da ölür: harita. Kullanıcı, basit bir soruyu yanıtlamak için uygulamanızı açar, şu anda yakınımda ne oluyor, ve harita bunu yanıtlama biçimidir. Doğru işaretçiler, hızlı filtreleme ve arama motorlarının gerçekten okuyabileceği listelerle bu haritayı doğru yapmak, herhangi bir etkinlik rehberinin arkasındaki temel mühendislik işidir.

Bu rehber, bir şehir etkinlik haritasını sıfırdan oluşturmayı adım adım anlatır: etkinlik verisini modellemek, mekanları koordinatlara geocode etmek, işaretçileri yerleştirip kümelemek, kategori ve mahalleye göre filtrelemek ve listeleri keşfedilebilir yapmak. Bir temel haritayı nasıl render edeceğinizi zaten bildiğinizi varsayar. Bilmiyorsanız, web sitenize interaktif haritalar nasıl eklenir başlıklı öğreticimizle başlayın ve etkinliğe özgü kısımlar için buraya geri dönün.

Etkinliği Mekanı Etrafında Modelleyin

Etkinlik, bir yerde gerçekleşen, zamanla sınırlı bir şeydir. Haritaya giden şey o yerdir, bu yüzden mekan veri modelinizin çıpasıdır. Minimum bir etkinlik kaydı şöyle görünür:

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,        // geocoding ile bir kez doldurulur
  neighbourhood: null, // ters geocoding ile bir kez doldurulur
  startsAt: '2026-07-09T20:30:00Z',
  url: 'https://example.com/tickets/8471',
};

İki null alan önemlidir. Harita her yüklendiğinde bir mekanı geocode etmek istemezsiniz. Etkinlik oluşturulduğunda veya içe aktarıldığında bir kez geocode edin, ardından koordinatları saklayın ve onları kalıcı olarak kabul edin.

Adım 1: Her Mekanı Koordinatlara Geocode Edin

Geocoding, insana yönelik bir adresi yerleştirebileceğiniz bir enlem ve boylama dönüştürür. Mekan metnini Geocoding API'sine gönderin ve en üstteki sonuçtan koordinatları okuyun:

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

Bunu yazma zamanında, bir etkinlik sisteminize girdiğinde çalıştırın ve dönen koordinatları kayıtta kalıcı hale getirin. İşaretçinin tam konumunun neden önemli olduğuna ve çatı koordinatlarının insanların gerçekten yürüdüğü kapıdan nasıl farklı olduğuna dair tam bir açıklama için bina girişi geocoding yazısına bakın.

Adım 2: Etkinlikleri İşaretçi Olarak Yerleştirin

Her etkinlikte koordinatlar varken yerleştirme bir döngüdür. Haritanın bir bakışta okunabilmesi için her kategoriye kendi rengini verin:

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

Bu, gerçek ürünlerin arkasındaki kalıptır. Canlı bir örnek OnlyHere, Londra'da yapılacak şeyler için günlük bir rehber olup her mekanı geocode eder ve günün etkinliklerini interaktif bir MapAtlas haritasına yerleştirir; böylece kullanıcı düz bir listede kaydırmak yerine ne olduğuna mekana ve mahalleye göre göz atabilir.

Adım 3: Şehir Dolduğunda Kümeleyin

Tek tek işaretçiler bir avuç etkinlik için gayet iyidir. Şehir genelinde bir akış bir avuç değildir. Kabaca 100 ila 200 işaretçiyi geçtiğinizde etkinlikleri bir GeoJSON kaynağına taşıyın ve haritanın onları kümelemesine izin verin:

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

Artık şehir merkezinde yoğun bir gece, yüz tane üst üste binen işaretçi yerine bir sayı içeren tek bir balon gösterir ve kullanıcı yakınlaştırdıkça küme ayrılır.

Adım 4: Kategoriye ve Mahalleye Göre Filtreleyin

Filtreleme, bir etkinlik haritasının bir etkinlik ürününe dönüştüğü yerdir. Tüm listeyi bellekte tutun ve diziyi filtreleyin, ardından işaretçileri elle yeniden oluşturmak yerine filtrelenmiş kümeyi harita kaynağına verin:

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

neighbourhood alanını doldurmak için her mekanın koordinatlarını bir kez ters geocode edin ve yönetsel alan adını saklayın. Bu tek değer, bir mahalle açılır menüsünü, bir "bu bölgede ne var" görünümünü ve daha temiz bir liste sayfasını çalıştırır; hepsi de çalışma zamanında başka bir sorgu olmadan.

Adım 5: Listeleri Keşfedilebilir Yapın

Bir harita, zaten uygulamanızda olan kişi için soruyu yanıtlar. Bir arama motoruna ya da yapay zeka asistanına "bu gece Shoreditch'te ne var" diye soran çok daha büyük kitle için hiçbir şey yapmaz. O sistemler piksel değil, yapılandırılmış veri okur.

Her etkinliği schema.org Event alanlarıyla işaretleyin ve zaten sahip olduğunuz koordinatları yeniden kullanın:

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

İşaretçiyi çizen koordinatlar aynı zamanda yapılandırılmış veriyi de besler, böylece gösterim ve keşif tek bir doğruluk kaynağından gelir. İyi görünen bir harita ile bulunan bir ürün arasındaki fark budur. Makine tarafından okunabilir konum verisinin yapay zeka aramasındaki görünürlüğü neden yönlendirdiğine dair daha fazlası için yapay zeka araması için konuma özel SSS'ler rehberimize bakın.

Hepsini Bir Araya Getirmek

Bir şehir etkinlik haritası beş hareketli parçadan oluşur: mekana dayalı bir veri modeli, yazma zamanında geocoding, renkli işaretçiler, ölçekte kümeleme ve dizi tabanlı filtreleme; hepsi de listeleri keşfedilebilir tutan yapılandırılmış verinin üzerinde oturur. Bu parçaları tek bir konumsal platform üzerinde inşa edin ve koordinatlar geocoder'dan haritaya ve şemaya, yinelenen sorgular olmadan ve veri kayması olmadan temiz bir şekilde akar.

MapAtlas, tüm bunları AB'de barındırılan, GDPR uyumlu altyapı üzerinde inşa etmeniz için geocoding, ters geocoding, yer arama ve harita render'ı sunar. Kendi şehrinizi haritalamaya başlamak için Geocoding API ve Search API sayfalarını inceleyin.