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 demandin 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ı başlatın. Koyu stil, ısı haritası renk gradyanlarını arka plandan açıkça gösterir 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://tiles.mapatlas.eu/styles/dark/style.json?key=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>
Wire the slider to setPaintProperty, which updates the layer without re-adding it:
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 is a live update with no flicker. The heatmap re-renders on the GPU in the same frame. This pattern works for any paint property: opacity, intensity, colour stops.
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
],
},
Both properties use the same interpolate over zoom expression. The values between the stops are interpolated linearly, so the transition is smooth as the user zooms.
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://tiles.mapatlas.eu/styles/dark/style.json?key=${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ı kullanıcıya özdeş görünecektir ve kesirli zamanda 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 recent 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 özelliği karmaşıklığını azaltın. Boya ifadesindeki her ek interpolate durağı, çerçeve başına GPU değerlendirme maliyeti ekler. Mobil hedefli uygulamalar için renk gradyanını üç veya dört durağa basitleştirin ve düşük öncelikli görünümlerde yakınlaştırma bağlı yarıçap/yoğunluk ölçeklendirmesini bırakı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://tiles.mapatlas.eu/styles/dark/style.json?key=${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ğıransetIntervaldö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.
Frequently Asked Questions
What is the difference between a heatmap and a choropleth map?
A heatmap visualises point density by blending nearby points into a continuous colour gradient, ideal for raw coordinate data like GPS pings or event locations. A choropleth map colours pre-defined geographic areas (countries, postcodes, census tracts) by a statistical value. Use a heatmap when you have many individual points; use a choropleth when your data is already aggregated by region.
How many data points can a JavaScript heatmap handle?
The MapAtlas heatmap layer renders on the GPU via WebGL, so it handles tens of thousands of points without frame drops at normal zoom levels. Above roughly 500,000 points, pre-aggregating your data server-side into a lower-resolution grid and switching to a GeoJSON fill-extrusion or circle layer gives better performance on low-end devices.
Can I use MapAtlas heatmaps for free?
Yes. MapAtlas has a free tier that includes map tile rendering, GeoJSON layer support, and heatmap layers. The free plan covers development and low-volume production use. See mapatlas.eu/pricing for full plan details.
Do heatmaps work on mobile browsers?
Yes. The MapAtlas SDK uses WebGL for rendering, which is supported in all modern mobile browsers including Safari on iOS and Chrome on Android. For very large datasets on low-end mobile hardware, reducing the point count or increasing the heatmap radius keeps frame rates smooth.
Related reading:
