GeoJSON হলো একটি জনপ্রিয় ফরম্যাট যা জিওস্পেশাল ডেটা (যেমন পয়েন্ট, লাইন, পলিগন) JSON স্ট্রাকচারে স্টোর করতে ব্যবহৃত হয়। LeafletJS এর মাধ্যমে আপনি GeoJSON ডেটা ব্যবহার করে ডাইনামিক মানচিত্র তৈরি করতে পারেন, যেখানে ব্যবহারকারী বিভিন্ন জিওস্পেশাল ডেটা ইন্টারঅ্যাক্টিভভাবে দেখতে পারে। এটি এমন মানচিত্র তৈরির জন্য কার্যকরী যা আপডেট, ফিল্টার বা কাস্টমাইজড তথ্য প্রদর্শন করতে পারে।
GeoJSON ডেটা ডাইনামিকভাবে লোড করা, প্রদর্শন করা এবং বিভিন্ন ফিচারের জন্য স্টাইলিং করা সম্ভব যা ব্যবহারকারীর প্রয়োজন অনুযায়ী আপডেট হতে পারে।
GeoJSON ডেটা দিয়ে ডাইনামিক মানচিত্র তৈরি করা
১. GeoJSON ডেটা লোড এবং ম্যাপে প্রদর্শন
প্রথমে, আমরা একটি GeoJSON ফাইল বা ডেটা লোড করব এবং তা LeafletJS এর মাধ্যমে ম্যাপে প্রদর্শন করব।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Dynamic Map with GeoJSON</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// ম্যাপ তৈরি করা
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);
// GeoJSON ডেটা
var geojsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.5, -0.09]
},
"properties": {
"name": "London"
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[51.5, -0.1],
[51.51, -0.1],
[51.51, -0.09],
[51.5, -0.09],
[51.5, -0.1]
]
]
},
"properties": {
"name": "Polygon Example"
}
}
]
};
// GeoJSON ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
</script>
</body>
</html>
ব্যাখ্যা:
- L.geoJSON(geojsonData): এই ফাংশনটি GeoJSON ডেটা ম্যাপে যোগ করতে ব্যবহৃত হয়। GeoJSON ডেটা এমনভাবে পাস করা হয়েছে যাতে এটি পয়েন্ট এবং পলিগন প্রদর্শন করে।
২. ডাইনামিক GeoJSON আপডেট করা
আপনি GeoJSON ডেটা ডাইনামিকভাবে আপডেট করতে পারেন, যেমন নতুন পয়েন্ট যোগ করা, পুরানো পয়েন্ট সরানো বা নতুন জিওস্পেশাল ডেটা লোড করা।
উদাহরণ: নতুন পয়েন্ট যোগ করা
<script>
// নতুন পয়েন্ট GeoJSON ডেটায় যোগ করা
function addPoint() {
var newPoint = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.08]
},
"properties": {
"name": "New Point"
}
};
// GeoJSON ডেটাতে নতুন পয়েন্ট যোগ করা
geojsonLayer.addData(newPoint);
}
// GeoJSON ডেটা ম্যাপে যোগ করা
var geojsonLayer = L.geoJSON(geojsonData).addTo(map);
// নতুন পয়েন্ট যোগ করার জন্য একটি বাটন
var button = document.createElement('button');
button.innerHTML = 'Add New Point';
button.onclick = addPoint;
document.body.appendChild(button);
</script>
ব্যাখ্যা:
- addData(): এই ফাংশনটি নতুন GeoJSON ফিচার (যেমন নতুন পয়েন্ট) ডাইনামিকভাবে আগের ম্যাপের GeoJSON লেয়ার এ যোগ করতে ব্যবহৃত হয়।
- একটি বাটন যোগ করা হয়েছে, যা ক্লিক করলে নতুন পয়েন্ট ম্যাপে যোগ হবে।
৩. GeoJSON ফিচারের স্টাইল কাস্টমাইজেশন
GeoJSON ফিচারগুলির স্টাইল কাস্টমাইজ করা সম্ভব। আপনি L.geoJSON() ফাংশনের মধ্যে style অপশন ব্যবহার করে এটি করতে পারেন।
উদাহরণ: স্টাইল কাস্টমাইজেশন
L.geoJSON(geojsonData, {
style: function (feature) {
return {
color: feature.properties.name === "London" ? "blue" : "green",
weight: 3,
opacity: 0.6
};
}
}).addTo(map);
ব্যাখ্যা:
- style(): এই ফাংশনটি একটি স্টাইল অবজেক্ট রিটার্ন করে যা GeoJSON ফিচারের উপর প্রয়োগ হয়। এখানে, "London" নামক পয়েন্টের জন্য রঙ blue এবং অন্য পয়েন্টগুলির জন্য রঙ green হবে।
৪. GeoJSON ডেটা ফিল্টার করা
GeoJSON ডেটা ফিল্টার করে আপনি শুধুমাত্র নির্দিষ্ট শর্ত পূরণ করা ফিচারগুলি ম্যাপে প্রদর্শন করতে পারেন।
উদাহরণ: GeoJSON ফিচার ফিল্টার করা
var filteredGeoJSON = L.geoJSON(geojsonData, {
filter: function (feature, layer) {
return feature.properties.name === "London"; // শুধুমাত্র লন্ডন পয়েন্ট দেখান
}
}).addTo(map);
ব্যাখ্যা:
- filter(): এই ফাংশনটি GeoJSON ফিচারগুলির উপর একটি শর্ত প্রয়োগ করে, এবং সেই শর্ত পূর্ণ হলে শুধুমাত্র সেই ফিচারটি ম্যাপে প্রদর্শিত হয়।
সারাংশ
LeafletJS এর মাধ্যমে GeoJSON ডেটা ব্যবহার করে ডাইনামিক মানচিত্র তৈরি করা সম্ভব। আপনি GeoJSON ডেটা লোড, প্রদর্শন, আপডেট, কাস্টমাইজ, এবং ফিল্টার করতে পারেন যা ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ এবং বাস্তব-সময়ে পরিবর্তনশীল অভিজ্ঞতা প্রদান করে। GeoJSON ডেটা বিভিন্ন ধরনের জিওস্পেশাল ডেটা ধারণ করতে পারে, এবং LeafletJS এর মাধ্যমে সেগুলিকে ম্যাপে সহজে প্রদর্শন করা যায়।
Read more
