একটি হিটম্যাপ সমন্বয় পয়েন্টের একটি মেঘকে তাৎক্ষণিকভাবে পঠনযোগ্য ঘনত্ব পৃষ্ঠে পরিণত করে। গরম রঙ চিহ্নিত করে যেখানে ইভেন্টগুলি ক্লাস্টার হয়; শীতল রঙ চিহ্নিত করে যেখানে তারা পাতলা হয়। ব্যবহারকারীরা একটি একক লেবেল পড়ার আগে প্যাটার্ন বোঝে। এই কারণেই হিটম্যাপগুলি পথচারী ট্র্যাফিক বিশ্লেষণ, ডেলিভারি চাহিদা পূর্বাভাস, অপরাধ রিপোর্টিং সরঞ্জাম এবং সম্পত্তি মূল্য গবেষণার জন্য ডিফল্ট পছন্দ।
এই টিউটোরিয়াল MapAtlas SDK ব্যবহার করে স্ক্র্যাচ থেকে একটি ইন্টারেক্টিভ হিটম্যাপ তৈরি করে। আপনি পয়েন্ট ডেটা weighted GeoJSON হিসাবে গঠন করবেন, একটি কাস্টম রঙ গ্রেডিয়েন্ট সহ একটি ঘনত্ব স্তর রেন্ডার করবেন, একটি তীব্রতা স্লাইডার বেঁধে দেবেন এবং একটি বাস্তব-বিশ্বের ডেলিভারি চাহিদা উদাহরণ দিয়ে শেষ করবেন। শেষ পর্যন্ত আপনার কাছে একটি পুনঃব্যবহারযোগ্য প্যাটার্ন থাকবে যা আপনি যেকোনো JavaScript বা React প্রকল্পে ফেলে দিতে পারেন।
যদি আপনি MapAtlas SDK এ নতুন হন, প্রথমে আপনার ওয়েবসাইটে ইন্টারেক্টিভ ম্যাপ যোগ করার উপায় পড়ুন। এটি ইনস্টলেশন, ম্যাপ উদ্যোগ এবং চিহ্নিতকারী কভার করে। এই টিউটোরিয়াল সেখানে ছেড়ে যায় তা তুলে নেয়।
কখন হিটম্যাপ ব্যবহার করতে হবে
হিটম্যাপগুলি সঠিক সরঞ্জাম যখন আপনার কাছে বৃহৎ সংখ্যক স্বতন্ত্র পয়েন্ট অবস্থান থাকে এবং ঘনত্ব যোগাযোগ করতে চান, পরিচয় নয়। স্বতন্ত্র চিহ্নিতকারীরা কয়েকশ পয়েন্টের পরে অর্থ হারায়; একটি হিটম্যাপ কাঠামো প্রকাশ করে যা কোনো পরিমাণের পিন করতে পারে না।
সাধারণ ব্যবহারের ক্ষেত্রে:
- পথচারী ট্র্যাফিক বিশ্লেষণ: খুচরা সাইট নির্বাচন, শহুরে পরিকল্পনা, ইভেন্ট ভিড় মডেলিং। একটি দোকানের মধ্য দিয়ে যাওয়া প্রতিটি গ্রাহকের জন্য একটি GPS ping রাখুন এবং হিটম্যাপ দেখায় কোন শহরের এলাকা, শপিং সেন্টার বা স্থান সবচেয়ে বেশি মানুষ আকর্ষণ করে।
- ডেলিভারি চাহিদা: অর্ডার উৎসগুলি postcode বা কাঁচা coordinate দ্বারা একত্রিত করুন dispatchers দেখাতে যেখানে চাহিদা কেন্দ্রীভূত। এটি সরাসরি জোন পরিকল্পনা এবং ড্রাইভার বরাদ্দে feeds করে।
- অপরাধ এবং ঘটনা ডেটা: পুলিশ বিশ্লেষণ ড্যাশবোর্ড, বীমা ঝুঁকি ম্যাপ এবং জনসুরক্ষা রিপোর্টিং সরঞ্জাম সব স্বতন্ত্র চিহ্নিতকারী দিয়ে ব্যবহারকারীদের অভিভূত না করে স্থানিক ঝুঁকি যোগাযোগ করতে ঘনত্ব হিটম্যাপ ব্যবহার করে।
- সম্পত্তি মূল্য গ্রেডিয়েন্ট: weighted মানগুলির সাথে একত্রিত হলে, একটি হিটম্যাপ দেখাতে পারে যেখানে শহর জুড়ে দাম সবচেয়ে বেশি। সম্পত্তি-ফোকাসড ম্যাপ সরঞ্জাম তৈরিতে আরো জানতে Real Estate Property Map টিউটোরিয়াল দেখুন।
যদি আপনার প্রশ্ন "জিনিসগুলি সবচেয়ে বেশি কোথায় ঘটে?" একটি হিটম্যাপ আপনার উত্তর।
ডেটা ফরম্যাট: Weighted GeoJSON পয়েন্ট
MapAtlas হিটম্যাপ স্তর একটি মান GeoJSON FeatureCollection এর Point features পড়ে। প্রতিটি feature একটি weight property বহন করতে পারে যা ঘনত্ব পৃষ্ঠে এর অবদান স্কেল করে। 10 আইটেম মূল্যের একটি ডেলিভারি অর্ডার একক-আইটেম অর্ডারের চেয়ে বেশি heat উৎপন্ন করে; একটি প্রধান ট্রানজিট hub একটি সাইড রাস্তার চেয়ে বেশি পথচারী ট্র্যাফিক তৈরি করে।
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 মান dimensionless। আপনি এটি আপনার ডেটাসেটের রেঞ্জের সাথে সম্পর্কিত normalize করেন। যদি আপনার সর্বোচ্চ-চাহিদা জোন 500 অর্ডার তৈরি করে এবং আপনার সবচেয়ে শান্ত 10 তৈরি করে, সেগুলিকে 1 থেকে 10 স্কেলে ম্যাপ করুন তাদের পাস করার আগে। এটি খুব ভিন্ন সম্পূর্ণ counts সহ ডেটাসেট জুড়ে হিটম্যাপ ভিজ্যুয়ালি অর্থবহ রাখে।
একটি weight property ছাড়া, প্রতিটি পয়েন্ট সমানভাবে অবদান রাখে এবং হিটম্যাপ pure count ঘনত্ব প্রতিফলিত করে।
Prerequisites
শুরু করার আগে:
- একটি MapAtlas API key (বিনামূল্যে সাইন আপ করুন, কোন ক্রেডিট কার্ড প্রয়োজন নেই)
- Node.js 18+ npm-ভিত্তিক প্রকল্পের জন্য, বা সাধারণ HTML পৃষ্ঠা যদি আপনি CDN পছন্দ করেন
ধাপ 1: ম্যাপ ইনস্টল এবং শুরু করুন
SDK ইনস্টল করুন:
npm install @mapmetrics/mapmetrics-gl
Or load it via CDN in a plain HTML file:
<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>
Add a container with a defined height:
<div id="map" style="width: 100%; height: 600px;"></div>
ম্যাপ শুরু করুন। Dark স্টাইল হিটম্যাপ রঙ গ্রেডিয়েন্ট পটভূমির বিপরীতে পপ করে তোলে, যা কেন এটি ঘনত্ব ভিজ্যুয়ালাইজেশনের জন্য পছন্দের ভিত্তি:
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,
});
ধাপ 2: Heatmap স্তর যোগ করুন
আপনার GeoJSON একটি উৎস হিসাবে নিবন্ধন করুন, তারপর একটি হিটম্যাপ স্তর যোগ করুন যা এটি থেকে পড়ে। map.on('load', ...) callback নিশ্চিত করে স্টাইল সম্পন্ন লোডিং আপনি এটি পরিবর্তন করার আগে।
map.on('load', () => {
map.addSource('demand', {
type: 'geojson',
data: demandData,
});
map.addLayer({
id: 'demand-heatmap',
type: 'heatmap',
source: 'demand',
paint: {
// Weight each point by its 'weight' property (defaults to 1 if absent)
'heatmap-weight': [
'interpolate', ['linear'],
['get', 'weight'],
0, 0,
12, 1
],
// Radius in pixels; larger = smoother but less precise
'heatmap-radius': 30,
// Overall opacity of the heatmap layer
'heatmap-opacity': 0.85,
},
});
});
এই পর্যায়ে আপনার একটি কাজ করা হিটম্যাপ আছে। নীল-সবুজ এলাকা কম ঘনত্ব; ডিফল্ট গ্রেডিয়েন্ট উচ্চ ঘনত্বে হলুদ এবং লাল দিকে পরিবর্তন করে। পরবর্তী ধাপ একটি ইচ্ছাকৃত রঙ স্কিম দিয়ে ডিফল্ট প্যালেট প্রতিস্থাপন করে।
ধাপ 3: রঙ গ্রেডিয়েন্ট কাস্টমাইজ করা
heatmap-color property ঘনত্ব মান (0 থেকে 1) রঙে ম্যাপ করে একই interpolate অভিব্যক্তি ব্যবহার করে MapAtlas পেইন্ট সিস্টেম জুড়ে। Density 0 স্বচ্ছ তাই মানচিত্র base layer খালি এলাকায় দেখায়।
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)', // transparent at zero density
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)' // bright red at peak density
],
},
});
এই গ্রেডিয়েন্ট নীল (বিরল) থেকে সবুজ এবং হলুদ লাল (ঘন) চলে, বেশিরভাগ ব্যবহারকারীরা আবহাওয়া রাডার ম্যাপ এবং তাপীয় ইমেজিং থেকে যে মানসিক মডেল নিয়ে আসে তার সাথে মিল। যদি আপনার অ্যাপের একটি ব্র্যান্ডেড রঙ প্যালেট থাকে, RGB মান আপনার নিজস্ব স্টপ দিয়ে প্রতিস্থাপন করুন; interpolation স্বয়ংক্রিয়ভাবে মসৃণ ট্রানজিশন পরিচালনা করে।
ডিজাইন টিপ: পেশাদার ড্যাশবোর্ড এবং বিশ্লেষণ সরঞ্জামের জন্য, কম-ঘনত্ব শেষ প্রায় স্বচ্ছ রাখুন। এটি শান্ত এলাকায় base মানচিত্রের পঠনযোগ্যতা সংরক্ষণ করে এবং স্বাভাবিকভাবে চোখ গরম জোনে আকর্ষণ করে।
ধাপ 4: Interactive নিয়ন্ত্রণের জন্য Radius স্লাইডার যোগ করা
Heatmap radius নিয়ন্ত্রণ করে প্রতিটি পয়েন্ট কতদূর "radiates" প্রভাব। একটি ছোট radius (10 থেকে 15px) সূক্ষ্ম-দানাদার clusters দেখায়; একটি বড় radius (50 থেকে 80px) একটি বিস্তৃত, মসৃণ পৃষ্ঠ তৈরি করে। বিভিন্ন ব্যবহারের ক্ষেত্রে বিভিন্ন ডিফল্ট প্রয়োজন: ঘন শহুরে কেন্দ্রে পথচারী ট্র্যাফিক একটি ছোট radius প্রয়োজন, সমগ্র দেশ জুড়ে জাতীয় ডেলিভারি চাহিদা একটি বড় প্রয়োজন।
ব্যবহারকারীদের একটি স্লাইডার দিন যাতে তারা চলার সময় সামঞ্জস্য করতে পারে:
<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>
স্লাইডার setPaintProperty এ বেঁধে দিন, যা স্তর আপডেট করে এটি পুনরায় যোগ না করে:
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 একটি লাইভ আপডেট কোন flicker সঙ্গে। হিটম্যাপ GPU এ একই ফ্রেমে পুনরায় রেন্ডার করে। এই প্যাটার্ন কোনো পেইন্ট property কাজ করে: opacity, তীব্রতা, রঙ stops।
ধাপ 5: Zoom স্তর দ্বারা তীব্রতা স্কেলিং
কম জুম লেভেলে (শহর-ব্যাপী view), কাছাকাছি পয়েন্ট ভারীভাবে overlap করে এবং হিটম্যাপ সমানভাবে স্যাচুরেটেড দেখাতে পারে। উচ্চ জুম (রাস্তার স্তর), একই পয়েন্ট ছড়িয়ে পড়ে এবং ঘনত্ব পৃষ্ঠ বিরল দেখায়। Zoom-সংযুক্ত তীব্রতা compensation প্রতিটি জুমে ভিজ্যুয়ালাইজেশন পঠনযোগ্য রাখে।
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
],
},
উভয় property একই interpolate ব্যবহার করে zoom অভিব্যক্তিতে। stops মধ্যে মান রৈখিকভাবে interpolated, তাই ট্রানজিশন মসৃণ যখন ব্যবহারকারী জুম করে।
Real-World উদাহরণ: ডেলিভারি চাহিদা Heatmap
এখানে একটি ডেলিভারি চাহিদা ড্যাশবোর্ডের জন্য একটি সম্পূর্ণ, স্বয়ংসম্পন্ন বাস্তবায়ন। অর্ডারগুলি একটি API থেকে GeoJSON FeatureCollection হিসাবে আসে। হিটম্যাপ আপডেট হয় যখনই ব্যবহারকারী সময় ফিল্টার পরিবর্তন করে।
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);
});
});
});
বিদ্যমান উৎসে setData কল GeoJSON প্রতিস্থাপন করে স্তর পুনরায় যোগ না করে। হিটম্যাপ স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার করে। এই প্যাটার্ন যেকোনো সময়-ভিত্তিক ফিল্টারে স্কেল করে: দিনের ঘণ্টা, সপ্তাহের দিন, আবহাওয়া শর্ত।
একটি ডেলিভারি চাহিদা হিটম্যাপের সাথে সাধারণত থাকা রুট পরিকল্পনা স্তরের জন্য, Route Optimization API টিউটোরিয়াল দেখুন। একটি চাহিদা হিটম্যাপের উপর একটি অপ্টিমাইজড ডেলিভারি রুট overlay করা dispatchers একটি সম্পূর্ণ operational picture একক view এ দেয়।
বড় ডেটাসেটের জন্য Performance টিপস
MapAtlas হিটম্যাপ স্তর WebGL ব্যবহার করে এবং দ্রুত রেন্ডার করে, তবে এটি খাওয়ানো ডেটা পাইপলাইন স্কেলে একটি bottleneck হয়ে উঠতে পারে।
খুব বড় ডেটাসেটের জন্য সার্ভারে প্রি-একত্রিত করুন। যদি আপনার লক্ষ লক্ষ GPS ping থাকে, সেগুলিকে সব ব্রাউজারে পাঠাবেন না। একটি সার্ভার-সাইড spatial aggregation (H3 hexagonal grid, quadtree, বা সহজ grid rounding) চালান যা আপনার 1 মিলিয়ন কাঁচা পয়েন্ট 10,000 grid cells এ একটি count এবং weight ক্ষেত্র সহ হ্রাস করে। হিটম্যাপ ব্যবহারকারীর জন্য একই দেখাবে এবং ভগ্নাংশ সময়ে লোড হবে।
বৃদ্ধিমূলকভাবে আপডেট স্ট্রীম করুন। লাইভ ডেটার জন্য (রিয়েল-টাইম পথচারী ট্রাফিক, লাইভ অর্ডার প্লেসমেন্ট), setData ব্যবহার করুন একটি ক্রমবর্ধমান GeoJSON অবজেক্ট জমা করার পরিবর্তে সম্প্রতি পয়েন্টের একটি রোলিং উইন্ডো সহ। উৎস একটি নির্দিষ্ট সর্বোচ্চ পয়েন্ট সংখ্যায় রাখুন এবং পুরানো রেকর্ড বহিষ্কার করুন।
উৎসে একটি maxzoom ব্যবহার করুন। আপনার addSource কলে maxzoom: 14 যোগ করা SDK কে জুম 14 এর উপরে টাইল ডেটা অনুরোধ করা বন্ধ করতে বলে। হিটম্যাপের জন্য এটি খুব কমই গুরুত্বপূর্ণ কারণ হিটম্যাপ স্তরগুলি tiled ডেটার পরিবর্তে একটি একক সমতল GeoJSON উৎস পড়ে, কিন্তু এটি উচ্চ জুম লেভেলে অপ্রয়োজনীয় পুনঃপ্রসেসিং প্রতিরোধ করে।
পেইন্ট property জটিলতা হ্রাস করুন। পেইন্ট অভিব্যক্তিতে প্রতিটি অতিরিক্ত interpolate stop প্রতি ফ্রেমে GPU মূল্যায়ন খরচ যোগ করে। মোবাইল-লক্ষ্যবস্তু অ্যাপের জন্য, রঙ গ্রেডিয়েন্ট তিন বা চার stops এ সরল করুন এবং নিম্ন-অগ্রাধিকার views এ zoom-সংযুক্ত radius/তীব্রতা স্কেলিং ড্রপ করুন।
Lazy-ম্যাপ শুরু করুন। সম্পূর্ণ ম্যাপ শুরু একটি IntersectionObserver callback এ মোড়ানো যাতে এটি শুধুমাত্র চলে যখন ম্যাপ container view এ স্ক্রল করে। এটি initial page লোড থেকে SDK bundle স্থগিত করে এবং বিশেষভাবে মূল্যবান মার্কেটিং পৃষ্ঠায় যেখানে ম্যাপ fold এর নিচে।
ম্যাপ performance প্যাটার্নে গভীর ডুব দিতে, lazy loading এবং clustering সহ, উৎপাদন চেকলিস্ট আপনার ওয়েবসাইটে ইন্টারেক্টিভ ম্যাপ যোগ করার উপায় এ সম্পূর্ণ তালিকা কভার করে।
React সংহতি
একটি React উপাদানে হিটম্যাপ মোড়ানো একই প্যাটার্ন অনুসরণ করে যেকোনো MapAtlas ম্যাপ: useEffect এ শুরু করুন, slider এবং filter এর জন্য state useState এর মাধ্যমে expose করুন এবং unmount এ পরিষ্কার করুন।
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 এ, এই উপাদান আমদানি করুন dynamic(() => import('./DeliveryHeatmap'), { ssr: false }) দিয়ে ব্রাউজার-শুধুমাত্র SDK থেকে সার্ভার-সাইড রেন্ডারিং ত্রুটি এড়াতে।
পরবর্তী কী তৈরি করতে হবে
আপনার এখন একটি কাজ করা ইন্টারেক্টিভ হিটম্যাপ আছে weighted ডেটা, একটি কাস্টম রঙ গ্রেডিয়েন্ট, একটি radius স্লাইডার এবং zoom-সংযুক্ত তীব্রতা। এখানে এটি নিয়ে যাওয়ার জায়গা:
- একটি routing স্তর হিটম্যাপের উপর overlay করুন চাহিদা পৃষ্ঠের বিরুদ্ধে পরিকল্পিত ডেলিভারি রুট দেখাতে। Route Optimization API টিউটোরিয়াল সম্পূর্ণ বাস্তবায়নের মাধ্যমে হাঁটে।
- একটি সময় অ্যানিমেশন যোগ করুন:
setIntervalলুপ সহ ঘন্টাভিত্তিক স্ন্যাপশট চক্র করুন উৎসেsetDataকল করে। এটি একটি স্থির ঘনত্ব মানচিত্রকে একটি সময়-ব্যবধান চাহিদার সাথে চালু করে। - সম্পত্তি মূল্য ডেটার সাথে একত্রিত করুন neighborhood দ্বারা মূল্য গ্রেডিয়েন্ট দেখাতে। Real Estate Property Map টিউটোরিয়াল সম্পত্তি প্ল্যাটফর্মের জন্য weighted ডেটা প্যাটার্ন কভার করে।
- MapAtlas pricing পৃষ্ঠা চেক করুন আপনার উৎপাদন ট্র্যাফিকের জন্য সঠিক পরিকল্পনা খুঁজে পেতে।
সম্পূর্ণ SDK রেফারেন্স এবং অতিরিক্ত উদাহরণ উপলব্ধ docs.mapatlas.xyz এ।
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:
