GeoJSON হলো একটি জনপ্রিয় ডেটা ফরম্যাট যা জিওস্পেশাল ডেটা (যেমন পয়েন্ট, লাইন, পলিগন) স্টোর করতে ব্যবহৃত হয় এবং এটি JSON ফরম্যাটের উপর ভিত্তি করে তৈরি। LeafletJS এর মাধ্যমে আপনি সহজেই GeoJSON ডেটা ম্যাপে প্রদর্শন করতে পারেন। GeoJSON ফাইলের মধ্যে বিভিন্ন ধরনের জিওমেট্রিক শেপ থাকতে পারে যেমন Point, LineString, Polygon, এবং আরও অনেক কিছু।
GeoJSON ফাইল প্রদর্শনের জন্য L.geoJSON() ফাংশন ব্যবহার করা হয়, যা GeoJSON ডেটাকে ম্যাপে যোগ করার জন্য ব্যবহৃত হয়।
GeoJSON ফাইল লোড করা এবং প্রদর্শন করা
GeoJSON ফাইল লোড করার উদাহরণ
প্রথমে, একটি GeoJSON ফাইলের সাথে কাজ করার জন্য, আপনি ফাইলটি লোকাল ডাইরেক্টরি থেকে অথবা URL থেকে লোড করতে পারেন। এখানে আমরা একটি GeoJSON ফাইলের ডেটা ম্যাপে লোড করার উদাহরণ দেখবো।
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"
}
}
]
};
1. GeoJSON ডেটা ম্যাপে প্রদর্শন করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS 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.5, -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 ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
</script>
</body>
</html>
এখানে L.geoJSON() ফাংশনটি GeoJSON ডেটা গ্রহণ করে এবং ম্যাপের উপর প্রদর্শন করে। আপনি যদি একটি GeoJSON ফাইল URL থেকে লোড করতে চান, তাহলে আপনি fetch() ফাংশন ব্যবহার করতে পারেন।
GeoJSON ফাইল থেকে ডেটা লোড করা
যদি আপনি GeoJSON ডেটা একটি এক্সটার্নাল ফাইল থেকে লোড করতে চান, তাহলে আপনাকে fetch() ফাংশন ব্যবহার করে GeoJSON ফাইলটি লোড করতে হবে।
GeoJSON ফাইল লোড করার উদাহরণ:
fetch('path/to/your/file.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data).addTo(map);
})
.catch(error => console.log('Error loading GeoJSON file: ', error));
এখানে fetch() ফাংশনটি file.geojson ফাইল থেকে ডেটা লোড করে এবং তারপর L.geoJSON() ফাংশন ব্যবহার করে সেই ডেটা ম্যাপে প্রদর্শন করা হয়।
GeoJSON এর মধ্যে বিভিন্ন শেপের ব্যবহার
GeoJSON ডেটার মধ্যে বিভিন্ন ধরনের জিওমেট্রিক শেপ থাকতে পারে, যেমন Point, LineString, Polygon, MultiPolygon ইত্যাদি। নিচে কয়েকটি উদাহরণ দেয়া হলো:
1. Point:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.5, -0.09]
},
"properties": {
"name": "London"
}
}
2. LineString:
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[51.5, -0.09],
[51.51, -0.1]
]
},
"properties": {
"name": "Example Line"
}
}
3. Polygon:
{
"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": "Example Polygon"
}
}
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);
এখানে, প্রতিটি GeoJSON ফিচারের জন্য স্টাইল নির্ধারণ করা হচ্ছে এবং "London" নামের পয়েন্টটির জন্য আলাদা রঙ দেওয়া হচ্ছে।
সারাংশ
LeafletJS এর মাধ্যমে GeoJSON ফাইলের বিভিন্ন শেপ (যেমন Point, LineString, Polygon) ম্যাপে প্রদর্শন করা সম্ভব। আপনি সহজেই GeoJSON ডেটা ম্যাপে লোড করতে পারেন এবং এর স্টাইল কাস্টমাইজও করতে পারেন। এই পদ্ধতিটি ম্যাপিং অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত কার্যকরী, যা জিওস্পেশাল ডেটা ভিজুয়ালাইজেশনকে সহজ এবং উন্নত করে।
Read more
