JavaScript Heatmap Eğitimi: İnteraktif Yoğunluk Haritası Oluşturun

Isı haritası, bir koordinat noktaları bulutunu anında okunabilir bir yoğunluk yüzeyine dönüştürür. Sıcak renkler olayların kümelendiği yerleri işaretler, soğuk renkler zayıfladığı yerleri işaretler. Kullanıcılar tek bir etiket okumadan önce deseni kavrarlar. Bu nedenle ısı haritaları yaya trafiği analizi, teslimat talep tahmini, suç raporlama araçları ve emlak fiyat araştırması için varsayılan seçimdir.

Bu öğretici, MapAtlas SDK kullanarak sıfırdan etkileşimli bir ısı haritası oluşturur. Nokta verilerini ağırlıklı GeoJSON olarak yapılandıracak, özel renk gradyanı ile bir yoğunluk katmanı oluşturacak, bir yoğunluk kaydırıcısını bağlayacak ve gerçek dünya teslimat talep örneğiyle bitireceğiniz. Sonunda, herhangi bir JavaScript veya React projesine bırakabileceğiniz yeniden kullanılabilir bir desene sahip olacaksınız.

MapAtlas SDK'da yeniyseniz, önce Web Sitenize Etkileşimli Haritalar Ekleme Nasıl başlığını okuyun. Kurulum, harita başlatma ve işaretler hakkında bilgi içerir. Bu öğretici, o öğretici bıraktığı yerden devam eder.

Isı Haritası Ne Zaman Kullanılır

Isı haritaları, çok sayıda bireysel nokta konumunuz varsa ve yoğunluğu iletmek istediğinizde, kimliğini değil, doğru araçtır. Bireysel işaretler birkaç yüz noktayı geçtikten sonra anlamını kaybeder; ısı haritası, pinlememenin asla ortaya çıkaramayacağı yapıyı ortaya çıkarır.

Yaygın kullanım durumları:

• Yaya trafiği analizi: perakende merkez seçimi, şehir planlama, olay kalabalığı modelleme. Bir kapıdan geçen her müşteri için bir GPS ping bırakın ve ısı haritası, bir şehir, alışveriş merkezi veya mekan için en fazla insanı çeken alanları göstermektedir.
• Teslimat talep: sipariş kaynaklarını posta kodu veya ham koordinata göre toplayarak despacherlerinize talebin yoğunlaştığı yeri göstermektedir. Bu, doğrudan bölge planlama ve sürücü tahsisine beslenilir.
• Suç ve olay verisi: polis analiz panolarına, sigorta risk haritalarına ve genel güvenlik raporlama araçlarına, bireysel işaretlerle kullanıcıları boğmadan, mekânsal riskleri iletmek için yoğunluk ısı haritaları kullanır.
• Emlak fiyat gradyanları: ağırlıklı değerlerle birleştirildiğinde, bir ısı haritası bir şehirde fiyatların en yüksek olduğu yerleri gösterebilir. Emlak odaklı harita araçları oluşturma hakkında daha fazla bilgi için Real Estate Property Map öğreticisine bakın.

Sorunuz "şeyler çoğu zaman nerede oluşur?" ise ısı haritası sizin cevabınızdır.

Veri Biçimi: Ağırlıklı GeoJSON Noktaları

MapAtlas ısı haritası katmanı, Point özelliklerinin standart bir GeoJSON FeatureCollection okur. Her özellik, yoğunluk yüzeyine olan katkısını ölçekleyen bir weight özelliğine sahip olabilir. 10 öğeli bir teslimat siparişi tek öğeli bir siparişten daha fazla ısı katkısında bulunur, ana transit merkezi bir yan sokaktan daha fazla yaya trafiği oluşturabilir.

const demandData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.8952, 52.3702] },
      properties: { weight: 8, zone: "centrum" }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.9123, 52.3601] },
      properties: { weight: 3, zone: "oost" }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.8801, 52.3780] },
      properties: { weight: 12, zone: "west" }
    },
    {
      type: "Feature",
      geometry: { type: "Point", coordinates: [4.9041, 52.3540] },
      properties: { weight: 1, zone: "south" }
    }
  ]
};

weight değeri boyutsuz olduğundan normalizasyon veri kümesinin aralığına göre yapılır. Yüksek talep bölgeniz 500 siparişe ve en sessiz bölgeniz 10'a kadar oluşturuyorsa, bunları iletmeden önce 1 ila 10 ölçeğine eşleyin. Bu, çok farklı mutlak sayılara sahip veri kümeleri arasında ısı haritasını görsel olarak anlamlı tutar.

weight özelliği olmadan, her nokta eşit şekilde katkıda bulunur ve ısı haritası saf sayı yoğunluğunu yansıtır.

Ön Koşullar

Başlamadan önce:

• MapAtlas API anahtarı (ücretsiz kaydolun, kredi kartı gerekmez)
• Node.js 18+ npm tabanlı projeler için veya tercih ederseniz CDN için düz HTML sayfası

Adım 1: SDK Yükleme ve Harita Başlatma

SDK'yı kurun:

npm install @mapmetrics/mapmetrics-gl

Veya düz HTML dosyasında CDN üzerinden yükleyin:

<link
  rel="stylesheet"
  href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css"
/>
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Tanımlı yüksekliğe sahip bir kapsayıcı ekleyin:

<div id="map" style="width: 100%; height: 600px;"></div>

Haritayı hesabınızdaki koyu bir stille başlatın. Koyu bir taban, ısı haritası renk gradyanlarını arka plandan açıkça öne çıkarır ve bu nedenle yoğunluk görselleştirmeleri için tercih edilen tabandır:

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // Amsterdam
  zoom: 12,
});

Adım 2: Isı Haritası Katmanı Ekleme

GeoJSON'u kaynak olarak kaydedin, ardından bunu okuyan bir ısı haritası katmanı ekleyin. map.on('load', ...) geri araması, değiştirmeden önce stilin yüklenmesini tamamlamasını sağlar.

map.on('load', () => {
  map.addSource('demand', {
    type: 'geojson',
    data: demandData,
  });

  map.addLayer({
    id: 'demand-heatmap',
    type: 'heatmap',
    source: 'demand',
    paint: {
      // Her noktayı 'weight' özelliğine göre ağırlıklandırın (yoksa 1 olarak varsayılan)
      'heatmap-weight': [
        'interpolate', ['linear'],
        ['get', 'weight'],
        0, 0,
        12, 1
      ],
      // Piksel cinsinden yarıçap; daha büyük = daha pürüzsüz ama daha az kesin
      'heatmap-radius': 30,
      // Isı haritası katmanının genel saydamlığı
      'heatmap-opacity': 0.85,
    },
  });
});

Bu noktada çalışan bir ısı haritanız var. Mavi yeşil alanlar düşük yoğunluk, varsayılan gradyan yüksek yoğunlukta sarı ve kırmızıya geçer. Sonraki adım, varsayılan paleti kasıtlı bir renk şemasıyla değiştirir.

Adım 3: Renk Gradyanını Özelleştirme

heatmap-color özelliği, MapAtlas boya sisteminin geri kalanında kullanılan aynı interpolate ifadesini kullanarak yoğunluk değerlerini (0 ila 1) renklere eşler. Yoğunluk 0, harita taban katmanı boş alanlarda görmektedir.

map.addLayer({
  id: 'demand-heatmap',
  type: 'heatmap',
  source: 'demand',
  paint: {
    'heatmap-weight': [
      'interpolate', ['linear'],
      ['get', 'weight'],
      0, 0,
      12, 1
    ],
    'heatmap-radius': 30,
    'heatmap-opacity': 0.85,
    'heatmap-color': [
      'interpolate', ['linear'],
      ['heatmap-density'],
      0,    'rgba(0, 0, 255, 0)',   // sıfır yoğunlukta saydam
      0.2,  'rgba(0, 128, 255, 0.6)',
      0.4,  'rgba(0, 230, 200, 0.7)',
      0.6,  'rgba(100, 230, 0, 0.8)',
      0.8,  'rgba(255, 200, 0, 0.9)',
      1.0,  'rgba(255, 50, 0, 1)'   // en yüksek yoğunlukta parlak kırmızı
    ],
  },
});

Bu gradyan mavi (seyrek) aracılığıyla yeşil ve sarı kırmızıya (yoğun) çalışır, çoğu kullanıcının hava radarı haritalarından ve termal görüntülemeden getirdiği zihinsel modeli eşleştirmektedir. Uygulamanız özgün bir renk paletine sahipse, RGB değerlerini kendi durakla değiştirin; enterpolasyon pürüzsüz geçişleri otomatik olarak yönetilir.

Tasarım ipucu: Profesyonel panolar ve analitik araçları için, düşük yoğunluk ucunu neredeyse saydam tutun. Sessiz alanlardaki taban haritasının okunabilirliğini korur ve gözü doğal olarak sıcak bölgelere çeker.

Adım 4: Etkileşimli Kontrol için Yarıçap Kaydırıcı Ekleme

Isı haritası yarıçapı, her noktanın "ışınladığı" etki mesafesini kontrol eder. Küçük bir yarıçap (10 ila 15px) ince taneli kümeler göstermektedir, büyük bir yarıçap (50 ila 80px) daha geniş, pürüzsüz bir yüzey üretilir. Farklı kullanım durumları farklı varsayılanları talep ediyor: yoğun şehir merkezindeki yaya trafiği küçük bir yarıçap gerektirir, tüm ülke genelindeki ulusal teslimat talebinin büyük biri gerekir.

Kullanıcılara anında ayarlayabilecekleri bir kaydırıcı verin:

<div id="controls" style="position: absolute; top: 16px; left: 16px; z-index: 1;
     background: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
  <label style="font-size: 14px; font-weight: 600;">
    Radius: <span id="radius-value">30</span>px
  </label>
  <br />
  <input id="radius-slider" type="range" min="5" max="80" value="30" style="width: 180px; margin-top: 6px;" />
</div>

Kaydırıcıyı, katmanı yeniden eklemeden güncelleyen setPaintProperty metoduna bağlayın:

const slider = document.getElementById('radius-slider');
const radiusLabel = document.getElementById('radius-value');

slider.addEventListener('input', () => {
  const radius = Number(slider.value);
  radiusLabel.textContent = radius;
  map.setPaintProperty('demand-heatmap', 'heatmap-radius', radius);
});

setPaintProperty titreme olmadan anlık güncelleme yapar. Isı haritası aynı karede GPU üzerinde yeniden render edilir. Bu desen her boya özelliğinde çalışır: opaklık, yoğunluk, renk durakları.

Adım 5: Yakınlaştırma Seviyesine Göre Yoğunluk Ölçeklendirmesi

Düşük yakınlaştırma seviyelerinde (şehir çapında görünüm), yakındaki noktalar çok üst üste binmektedir ve ısı haritası düzgün doymuş görünebilir. Yüksek yakınlaştırmada (sokak seviyesi), aynı noktalar yayılır ve yoğunluk yüzeyi seyrek görünmektedir. Yakınlaştırma bağlı yoğunluk telafisi, görselleştirmeyi her yakınlaştırma seviyesinde okunabilir tutar.

paint: {
  // ...other paint properties...
  'heatmap-intensity': [
    'interpolate', ['linear'],
    ['zoom'],
    8,  1,   // low zoom: normal intensity
    14, 3    // high zoom: boost intensity to compensate for point spread
  ],
  'heatmap-radius': [
    'interpolate', ['linear'],
    ['zoom'],
    8,  20,  // small radius at city scale
    14, 50   // larger radius at street scale
  ],
},

Her iki özellik de zoom üzerinde aynı interpolate ifadesini kullanır. Duraklar arasındaki değerler doğrusal olarak hesaplanır, bu yüzden kullanıcı yakınlaştırdıkça geçiş akıcı olur.

Gerçek Dünya Örneği: Teslimat Talep Isı Haritası

Teslimat talep panosu için tam bir, bağımsız uygulama burada bulunmaktadır. Siparişler bir API'den GeoJSON FeatureCollection olarak gelir. Isı haritası, kullanıcı zaman filtresini değiştirdiğinde güncellenmektedir.

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const API_KEY = 'YOUR_API_KEY';

const map = new mapmetricsgl.Map({
  container: 'map',
  style: `https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=${API_KEY}`,
  center: [4.9041, 52.3676],
  zoom: 11,
});

async function loadOrders(hourFrom, hourTo) {
  const res = await fetch(
    `/api/orders/geojson?hour_from=${hourFrom}&hour_to=${hourTo}`
  );
  return res.json(); // returns a GeoJSON FeatureCollection
}

map.on('load', async () => {
  const orders = await loadOrders(8, 12); // morning peak

  map.addSource('orders', { type: 'geojson', data: orders });

  map.addLayer({
    id: 'order-heatmap',
    type: 'heatmap',
    source: 'orders',
    paint: {
      'heatmap-weight': [
        'interpolate', ['linear'], ['get', 'items'],
        0, 0, 20, 1
      ],
      'heatmap-color': [
        'interpolate', ['linear'], ['heatmap-density'],
        0,   'rgba(0, 0, 255, 0)',
        0.2, 'rgba(0, 128, 255, 0.5)',
        0.5, 'rgba(0, 230, 150, 0.8)',
        0.8, 'rgba(255, 200, 0, 0.9)',
        1.0, 'rgba(255, 50, 0, 1)'
      ],
      'heatmap-radius': [
        'interpolate', ['linear'], ['zoom'],
        8, 20, 14, 50
      ],
      'heatmap-intensity': [
        'interpolate', ['linear'], ['zoom'],
        8, 1, 14, 3
      ],
      'heatmap-opacity': 0.9,
    },
  });

  // Time-of-day filter buttons
  document.querySelectorAll('[data-hour-range]').forEach((btn) => {
    btn.addEventListener('click', async () => {
      const [from, to] = btn.dataset.hourRange.split('-').map(Number);
      const newOrders = await loadOrders(from, to);
      map.getSource('orders').setData(newOrders);
    });
  });
});

Var olan bir kaynakta setData çağrısı, katmanı yeniden eklemeden GeoJSON'u değiştirilir. Isı haritası otomatik olarak yeniden oluşturulur. Bu desen herhangi bir zaman tabanlı filtreye ölçeklenir: günün saati, haftanın günü, hava durumu koşulu.

Teslimat talep ısı haritasına tipik olarak eşlik eden rota planlama katmanı için Route Optimization API öğreticisine bakın. Optimize edilmiş teslimat rotasını talep ısı haritasının üzerine yerleştirmek, despacherlerinize tek bir görünümde tam bir operasyonel resim verilir.

Büyük Veri Setleri için Performans İpuçları

MapAtlas ısı haritası katmanı WebGL kullanır ve hızlı oluşturulur, ancak onu besleyen veri boru hattı ölçekte darboğaz haline gelebilir.

Çok büyük veri setleri için sunucu tarafında ön toplaması yapın. Milyonlarca GPS ping varsa, hepsini tarayıcıya göndermeyin. 1 milyonluk ham noktalara sahip sunucu tarafında mekansal toplama (H3 altıgen şebekesi, dörtgen ağacı veya basit ızgara yuvarlama) 10.000 ızgara hücresine count ve weight alanı indirin. Isı haritası tipik yakınlaştırma seviyelerinde neredeyse aynı görünür ve çok daha kısa sürede yüklenir.

Güncellemeleri aşamalı olarak akışa alın. Canlı veri (gerçek zamanlı yaya trafiği, canlı sipariş yerleştirme) için, her zaman büyüyen bir GeoJSON nesnesi biriktirmek yerine son noktalara bir yakın penceresiyle setData kullanın. Kaynağını sabit maksimum nokta sayısında tutun ve eski kayıtları çıkarın.

Kaynakta maxzoom kullanın. addSource çağrınıza maxzoom: 14 ekleme, SDK'ya yakınlaştırma 14 üzerinde kiremit verisi istemeyi durdurun söyler. Isı haritaları için bu nadiren önemlidir çünkü ısı haritası katmanları kiremit verisi yerine tek düz GeoJSON kaynağı okuma, ancak yüksek yakınlaştırma seviyelerinde gereksiz yeniden işleme önlemektedir.

Boya ifadelerini basit tutun. heatmap-color gradyanı, siz ayarladığınızda bir kez renk rampası dokusuna dönüştürülür, bu yüzden ek renk durakları kare başına neredeyse hiç maliyet getirmez. Mobilde asıl maliyet büyük bir heatmap-radius ve yüksek nokta sayısından gelir, bu yüzden önce bunları ayarlayın.

Haritayı tembel başlatın. Tüm harita başlatmayı IntersectionObserver geri araması içine sarın, böylece harita konteyner görünüme kaydığında sadece çalışır. Bu SDK paketini ilk sayfa yüklemesinden erteler ve haritanın katlamının altında olduğu pazarlama sayfalarında özellikle değerlidir.

Tembel yükleme ve kümeleme dahil olmak üzere harita performans desenleri hakkında daha derinlemesine bilgi için, Web Sitenize Etkileşimli Haritalar Ekleme bölümündeki üretim kontrol listesi tam listeyi kapsar.

React Entegrasyonu

Isı haritasını React bileşenine sarmanız, herhangi bir MapAtlas haritasıyla aynı deseni takip eder: useEffect içinde başlatın, kaydırıcı ve filtreyi useState yoluyla açığa çıkarın ve unmount'ta temizleyin.

import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

export function DeliveryHeatmap({ geojson, apiKey }) {
  const containerRef = useRef(null);
  const mapRef       = useRef(null);
  const [radius, setRadius] = useState(30);

  useEffect(() => {
    const map = new mapmetricsgl.Map({
      container: containerRef.current,
      style: `https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=${apiKey}`,
      center: [4.9041, 52.3676],
      zoom: 11,
    });
    mapRef.current = map;

    map.on('load', () => {
      map.addSource('orders', { type: 'geojson', data: geojson });
      map.addLayer({
        id: 'order-heatmap',
        type: 'heatmap',
        source: 'orders',
        paint: {
          'heatmap-radius': radius,
          'heatmap-opacity': 0.9,
        },
      });
    });

    return () => map.remove();
  }, [apiKey]);

  // Update radius without remounting the map
  useEffect(() => {
    const map = mapRef.current;
    if (!map || !map.getLayer('order-heatmap')) return;
    map.setPaintProperty('order-heatmap', 'heatmap-radius', radius);
  }, [radius]);

  return (
    <div>
      <div style={{ padding: '8px 0' }}>
        <label>
          Radius: {radius}px
          <input
            type="range" min={5} max={80} value={radius}
            onChange={e => setRadius(Number(e.target.value))}
            style={{ marginLeft: 8, width: 160 }}
          />
        </label>
      </div>
      <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
    </div>
  );
}

Next.js'te, tarayıcı yalnızca SDK'dan sunucu tarafı oluşturma hatasını önlemek için bu bileşeni dynamic(() => import('./DeliveryHeatmap'), { ssr: false }) ile içe aktarın.

Sonra Ne Oluşturulacak

Artık ağırlıklı veri, özel renk gradyanı, yarıçap kaydırıcısı ve yakınlaştırma bağlı yoğunluğu olan çalışan bir etkileşimli ısı haritanız var. Bunu nereye götüreceğiniz:

• Talep yüzeyine karşı planlanan teslimat yollarını göstermek için ısı haritasının üzerine yönlendirme katmanı koyun. Route Optimization API öğreticisi tam uygulamayı anlatmaktadır.
• Ekle zaman animasyonu: saatlik anlık görüntüler arasında döngü yapın, kaynakta setData çağıran setInterval döngüsü. Bu, statik yoğunluk haritasını, talep günü boyunca nasıl hareket ettiğinin zaman atlamasına dönüştürür.
• Emlak fiyat verisi ile birleştirin, mahalle tarafından fiyat gradyanlarını göstermektedir. Real Estate Property Map öğreticisi emlak platformları için ağırlıklı veri desenleri kapsamaktadır.
• MapAtlas fiyatlandırma sayfasında kontrol edin, üretim trafiğiniz için doğru planı bulmak.

Tam SDK referansı ve ek örnekler docs.mapatlas.xyz adresinde mevcuttur.

Sıkça Sorulan Sorular

Isı haritası ile koropleth harita arasındaki fark nedir?

Isı haritası, yakın noktaları sürekli bir renk geçişinde harmanlayarak nokta yoğunluğunu görselleştirir. GPS sinyalleri veya olay konumları gibi ham koordinat verileri için idealdir. Koropleth harita ise önceden tanımlı coğrafi alanları (ülkeler, posta kodları, sayım bölgeleri) istatistiksel bir değere göre renklendirir. Çok sayıda ayrı noktanız varsa ısı haritası, veriniz zaten bölgelere göre toplanmışsa koropleth kullanın.

Bir JavaScript ısı haritası kaç veri noktasını kaldırabilir?

MapAtlas heatmap katmanı WebGL ile GPU üzerinde render edilir, bu yüzden tipik donanımda on binlerce noktayı akıcı şekilde işler. Yüz binlerce nokta ve üzeri gibi çok daha büyük veri setlerinde, verinizi sunucu tarafında daha düşük çözünürlüklü bir ızgarada önceden toplayıp GeoJSON fill-extrusion veya circle katmanına geçmek, düşük donanımlı cihazlarda daha iyi performans verir.

MapAtlas ısı haritalarını ücretsiz kullanabilir miyim?

Evet. MapAtlas'ın ücretsiz katmanı harita tile render'ını, GeoJSON katman desteğini ve heatmap katmanlarını içerir. Ücretsiz plan geliştirme ve düşük hacimli üretim kullanımını kapsar. Planların tüm ayrıntıları için mapatlas.eu/pricing adresine bakın.

Isı haritaları mobil tarayıcılarda çalışır mı?

Evet. MapAtlas SDK render için WebGL kullanır. WebGL, iOS'ta Safari ve Android'de Chrome dahil tüm modern mobil tarayıcılarda desteklenir. Düşük donanımlı mobil cihazlarda çok büyük veri setleriyle çalışırken nokta sayısını azaltmak veya heatmap yarıçapını büyütmek kare hızını akıcı tutar.

İlgili yazılar:

• Web Sitenize Etkileşimli Haritalar Nasıl Eklenir
• Kümelemeli Emlak Haritası Oluşturun
• Route Optimization API: Teslimat Maliyetlerini %30 Azaltın
• Ücretsiz geliştirmeye başlayın