Heatmap হলো একটি ভিজ্যুয়ালাইজেশন টেকনিক যা একটি নির্দিষ্ট অঞ্চলে ডেটার ঘনত্ব বা তাপমাত্রা চিত্রিত করতে ব্যবহৃত হয়। এটি একটি ম্যাপে ডেটার ঘনত্ব বা গুরুত্ব প্রদর্শন করতে হিট বা তাপের মানচিত্র হিসেবে কাজ করে, যেখানে তাপমাত্রার স্তরের উপর ভিত্তি করে বিভিন্ন রঙ ব্যবহার করা হয়। Heatmap সাধারণত ওয়েব ম্যাপিং অ্যাপ্লিকেশনে ব্যবহৃত হয় যেখানে ব্যবহারকারীকে দ্রুত ডেটার ঘনত্ব বা গুরুত্ব সম্পর্কে ধারণা দেয়।
LeafletJS তে Heatmap তৈরি করতে সাধারণত Leaflet.heat প্লাগইন ব্যবহার করা হয়। এটি একটি heatmap তৈরি করতে সাহায্য করে, যেখানে বিভিন্ন পয়েন্টের ঘনত্ব এবং গুরুত্ব তাপের রঙ দিয়ে চিত্রিত করা হয়।
Heatmap কী?
Heatmap একটি চিত্র যা স্পেশাল ডেটার ঘনত্ব বা তাপমাত্রার মান চিত্রিত করে। এটি সাধারণত রঙের মাধ্যমে ডেটার গুরুত্ব বা ঘনত্ব দেখায়, যেখানে গা dark রঙ (যেমন লাল, কমলা) বেশি ঘনত্ব বা গুরুত্ব এবং হালকা রঙ (যেমন নীল, সবুজ) কম ঘনত্ব বা গুরুত্ব নির্দেশ করে।
LeafletJS এ Heatmap তৈরি করা
LeafletJS এ Heatmap তৈরি করতে leaflet.heat প্লাগইন ব্যবহার করা হয়। এটি ইনস্টল এবং ব্যবহার করা খুবই সহজ। নিচে ধাপে ধাপে Heatmap তৈরি করার প্রক্রিয়া দেখানো হয়েছে।
১. leaflet.heat প্লাগইন ইনস্টল করা
প্রথমে, আপনাকে leaflet.heat প্লাগইনটি আপনার প্রোজেক্টে যোগ করতে হবে। এটি CDN অথবা npm এর মাধ্যমে ইনস্টল করা যায়।
CDN ব্যবহার করে প্লাগইন যুক্ত করা:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-heat/0.2.0/leaflet-heat.js"></script>
২. Heatmap তৈরি করার উদাহরণ
এই উদাহরণে আমরা LeafletJS ম্যাপের উপরে Heatmap তৈরি করবো। এখানে, বিভিন্ন পয়েন্টের ঘনত্ব (এখানে lat, lng পয়েন্ট) তুলে ধরা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Heatmap</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-heat/0.2.0/leaflet-heat.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// ডেটা পয়েন্টের একটি অ্যারে তৈরি (Lat, Lng, Intensity)
var heatData = [
[51.505, -0.09, 0.5], // কম ঘনত্ব
[51.51, -0.1, 0.9], // মাঝারি ঘনত্ব
[51.51, -0.12, 0.7], // মাঝারি ঘনত্ব
[51.52, -0.1, 0.8], // উচ্চ ঘনত্ব
[51.49, -0.08, 0.3], // কম ঘনত্ব
[51.47, -0.12, 0.4] // কম ঘনত্ব
];
// Heatmap তৈরি করা
L.heatLayer(heatData, {
radius: 25, // পয়েন্টের আকার
blur: 15, // ব্লারিং ইফেক্ট
maxZoom: 16 // ম্যাপের সর্বোচ্চ জুম লেভেল
}).addTo(map);
</script>
</body>
</html>
এখানে:
L.heatLayer(): এই ফাংশনটি ব্যবহার করে Heatmap তৈরি করা হয়েছে।heatData: এখানে আমরা একটি অ্যারে তৈরি করেছি, যেখানে প্রতিটি পয়েন্টের জন্যlat,lng, এবংintensity(ঘনত্ব) উল্লেখ করা হয়েছে।- প্রথম দুটি মান হল latitude এবং longitude (পয়েন্টের অবস্থান), এবং তৃতীয় মান হল intensity (পয়েন্টের ঘনত্ব) যা ০ থেকে ১ এর মধ্যে হতে পারে।
radius: এটি ইমেজের পয়েন্টের আকার নিয়ন্ত্রণ করে।blur: এটি Heatmap পয়েন্টের ব্লার (ধোঁয়াটে) ইফেক্ট নিয়ন্ত্রণ করে।maxZoom: ম্যাপের সর্বোচ্চ জুম লেভেল।
৩. Heatmap এর স্টাইল কাস্টমাইজেশন
Heatmap এর বিভিন্ন স্টাইল কাস্টমাইজ করা যায়, যেমন রঙের স্কেল, পয়েন্টের আকার, ব্লার, ইত্যাদি।
উদাহরণ: Heatmap এর রঙ কাস্টমাইজ করা
L.heatLayer(heatData, {
radius: 25,
blur: 15,
maxZoom: 16,
gradient: { 0.1: 'blue', 0.3: 'green', 0.5: 'yellow', 0.7: 'orange', 1.0: 'red' } // কাস্টম রঙের গ্র্যাডিয়েন্ট
}).addTo(map);
এখানে, gradient অপশনটি ব্যবহার করে আপনি কাস্টম রঙের স্কেল তৈরি করতে পারেন। প্রতিটি মান ০ থেকে ১ এর মধ্যে রঙের শেডকে নির্দেশ করে।
৪. Multiple Heatmaps তৈরি করা
একাধিক Heatmap একসাথে এক ম্যাপে ব্যবহার করা যায়। উদাহরণস্বরূপ, বিভিন্ন ধরনের ডেটার জন্য আলাদা আলাদা Heatmap তৈরি করা।
উদাহরণ: Multiple Heatmaps
// প্রথম Heatmap
var heatData1 = [
[51.505, -0.09, 0.5],
[51.51, -0.1, 0.7]
];
// দ্বিতীয় Heatmap
var heatData2 = [
[51.52, -0.1, 0.8],
[51.49, -0.08, 0.4]
];
// Heatmap 1
L.heatLayer(heatData1, { radius: 25, blur: 15 }).addTo(map);
// Heatmap 2
L.heatLayer(heatData2, { radius: 25, blur: 10 }).addTo(map);
এখানে, দুটি আলাদা Heatmap একসাথে একই ম্যাপে যুক্ত করা হয়েছে।
সারাংশ
Heatmap হল LeafletJS এর একটি শক্তিশালী বৈশিষ্ট্য যা ম্যাপে ডেটার ঘনত্ব এবং গুরুত্ব চিত্রিত করতে সাহায্য করে। L.heatLayer() ব্যবহার করে আপনি ইমেজ বা পয়েন্টগুলির ঘনত্ব প্রদর্শন করতে পারেন এবং এটি বিভিন্ন কাস্টমাইজেশন যেমন radius, blur, এবং gradient এর মাধ্যমে আরও বিস্তারিতভাবে কাস্টমাইজ করা যায়। Heatmap বিভিন্ন জায়গার ডেটা ভিজ্যুয়ালাইজ করতে ব্যবহৃত হয়, যেমন জনসংখ্যা ঘনত্ব, তাপমাত্রার মান, বা অন্য যেকোনো স্পেশাল ডেটা।
Read more
