Heatmap হল একটি শক্তিশালী ডাটা ভিজ্যুয়ালাইজেশন টুল, যা তথ্যের ঘনত্ব বা মানের পার্থক্য প্রদর্শন করতে ব্যবহৃত হয়। LeafletJS ব্যবহার করে আপনি সহজেই Custom Heatmap তৈরি করতে পারেন, যেখানে আপনি ডেটার ওপর ভিত্তি করে বিভিন্ন রঙের মানচিত্র তৈরি করতে পারেন।
Heatmap মূলত points বা markers এর ঘনত্ব বিশ্লেষণ করতে ব্যবহৃত হয়, যেখানে প্রতিটি পয়েন্টের মান বা ঘনত্ব অনুযায়ী রঙ পরিবর্তিত হয়।
LeafletJS এ heatmap তৈরি করার জন্য আপনাকে leaflet.heat প্লাগইন ব্যবহার করতে হবে।
১. Leaflet Heatmap প্লাগইন ইনস্টল করা
প্রথমে, আপনাকে Leaflet Heatmap প্লাগইনটি আপনার প্রকল্পে যোগ করতে হবে। আপনি CDN ব্যবহার করে এটি যোগ করতে পারেন।
CDN ব্যবহার করে প্লাগইন যোগ করা:
<!-- LeafletJS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Leaflet Heatmap -->
<script src="https://unpkg.com/leaflet-heat/dist/leaflet-heat.js"></script>
এই কোডটি আপনার HTML ফাইলে যোগ করলে Leaflet Heatmap প্লাগইনটি ব্যবহার করতে পারবেন।
২. Custom Heatmap তৈরি করা
আপনার ডেটা পয়েন্টগুলোর ওপর ভিত্তি করে কাস্টম হিটম্যাপ তৈরি করতে leaflet.heat প্লাগইনটি ব্যবহার করুন।
উদাহরণ: একটি সহজ Custom Heatmap তৈরি করা
// ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// ডেটা পয়েন্ট তৈরি করা (যেমন, বিভিন্ন জায়গার জন্য মান)
var heatData = [
[51.505, -0.09, 0.2], // [latitude, longitude, intensity]
[51.515, -0.1, 0.4],
[51.52, -0.11, 0.6],
[51.51, -0.12, 0.8],
[51.49, -0.08, 0.5]
];
// Heatmap তৈরি করা
L.heatLayer(heatData, {radius: 25, blur: 15, maxZoom: 17}).addTo(map);
এখানে:
- heatData হলো একটি অ্যারে, যেখানে প্রতিটি পয়েন্টের জন্য latitude, longitude, এবং intensity দেওয়া হয়েছে।
- L.heatLayer() ফাংশনটি হিটম্যাপ তৈরি করতে ব্যবহৃত হয়, যেখানে radius, blur, এবং maxZoom এর মাধ্যমে হিটম্যাপের আকার এবং বিশদতা কাস্টমাইজ করা হয়।
৩. Custom Heatmap স্টাইলিং কাস্টমাইজেশন
Leaflet Heatmap প্লাগইনটি আপনাকে বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে। আপনি রঙ, রেডিয়াস, ব্লার, এবং আরও অন্যান্য প্যারামিটার কাস্টমাইজ করতে পারবেন।
উদাহরণ: Heatmap এর রঙ কাস্টমাইজ করা
L.heatLayer(heatData, {
radius: 25,
blur: 15,
maxZoom: 17,
gradient: {
0.2: 'blue',
0.4: 'cyan',
0.6: 'lime',
0.8: 'yellow',
1.0: 'red'
}
}).addTo(map);
এখানে:
- gradient অপশনটি ব্যবহার করে আপনি intensity অনুযায়ী রঙ নির্ধারণ করতে পারেন। এই কাস্টম রঙ মানচিত্রে ডেটার ঘনত্বের উপর ভিত্তি করে প্রতিটি পয়েন্টে রঙ পরিবর্তন করবে।
৪. Dynamic Data Visualization
যদি আপনার কাছে ডাইনামিক ডেটা থাকে, যেমন সার্ভার থেকে ডেটা লোড করে বা ব্যবহারকারীর ক্রিয়া অনুসারে হিটম্যাপ আপডেট করা, তাহলে আপনি setLatLngs() ফাংশন ব্যবহার করে হিটম্যাপ ডেটা আপডেট করতে পারেন।
উদাহরণ: ডাইনামিক ডেটা আপডেট
var heatLayer = L.heatLayer(heatData, {radius: 25, blur: 15, maxZoom: 17}).addTo(map);
// ডাইনামিক ডেটা আপডেট
setInterval(function() {
var newData = [
[51.51, -0.1, Math.random()], // নতুন ডেটা পয়েন্ট
[51.52, -0.11, Math.random()]
];
heatLayer.setLatLngs(newData);
}, 3000); // প্রতি ৩ সেকেন্ডে ডেটা আপডেট হবে
এখানে:
- setLatLngs() ফাংশনটি ব্যবহার করে হিটম্যাপের ডেটা লাইভ আপডেট করা হচ্ছে।
- প্রতি ৩ সেকেন্ড পর newData অ্যারের মাধ্যমে নতুন ডেটা পয়েন্ট হিটম্যাপে যোগ হবে।
৫. Data Layer Integration
এছাড়া, আপনি যদি GeoJSON বা অন্য কোনো ডেটা লেয়ার ব্যবহার করেন, তাহলে সেই ডেটার উপর ভিত্তি করে হিটম্যাপ তৈরি করতে পারেন।
উদাহরণ: GeoJSON ডেটার উপর হিটম্যাপ তৈরি
var geoJsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.505, -0.09]
},
"properties": {
"intensity": 0.5
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.51, -0.1]
},
"properties": {
"intensity": 0.8
}
}
]
};
var heatDataFromGeoJSON = geoJsonData.features.map(function(feature) {
return [feature.geometry.coordinates[1], feature.geometry.coordinates[0], feature.properties.intensity];
});
L.heatLayer(heatDataFromGeoJSON, {radius: 25, blur: 15, maxZoom: 17}).addTo(map);
এখানে:
- GeoJSON ডেটা থেকে হিটম্যাপের জন্য ডেটা প্রস্তুত করা হয়েছে এবং L.heatLayer() দিয়ে হিটম্যাপ তৈরি করা হয়েছে।
সারাংশ
LeafletJS এর মাধ্যমে Custom Heatmap তৈরি করা খুবই সহজ এবং এটি আপনার ম্যাপের ওপর ডেটার ঘনত্ব বা মানের পার্থক্য প্রদর্শনের জন্য একটি শক্তিশালী টুল। আপনি leaflet.heat প্লাগইন ব্যবহার করে বিভিন্ন ধরনের ডেটা পয়েন্টের ঘনত্ব ভিজ্যুয়ালাইজ করতে পারেন, এবং কাস্টম রঙ, রেডিয়াস, ব্লার এবং ডাইনামিক ডেটা আপডেটের মাধ্যমে Heatmap এর কাস্টমাইজেশন করতে পারেন। এটি বিশেষভাবে ব্যবহারী ডেটা বিশ্লেষণ বা কার্যকারিতা প্রদর্শনের জন্য উপযোগী।
