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 ডেটা ম্যাপে লোড করতে পারেন এবং এর স্টাইল কাস্টমাইজও করতে পারেন। এই পদ্ধতিটি ম্যাপিং অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত কার্যকরী, যা জিওস্পেশাল ডেটা ভিজুয়ালাইজেশনকে সহজ এবং উন্নত করে।
লিফলেটজেএস (LeafletJS): Shape Options কনফিগার করা
LeafletJS তে Shape Options ব্যবহার করে আপনি ম্যাপে বিভিন্ন ধরনের শেপ যেমন Polyline, Polygon, Circle, Rectangle ইত্যাদি তৈরি এবং কাস্টমাইজ করতে পারেন। শেপগুলো ম্যাপের উপর কোনো নির্দিষ্ট এলাকা বা রুট চিহ্নিত করতে ব্যবহৃত হয় এবং এগুলোর ভিজ্যুয়াল স্টাইল কাস্টমাইজ করার জন্য আপনি বিভিন্ন Options ব্যবহার করতে পারেন।
Shape Options কনফিগার করা
LeafletJS-এ বিভিন্ন ধরনের শেপের জন্য কিছু মৌলিক অপশন রয়েছে, যা আপনি কাস্টমাইজ করতে পারেন যেমন রঙ, প্রস্থ, পুরুত্ব, স্বচ্ছতা ইত্যাদি।
১. Polyline Options কনফিগার করা
Polyline হল একাধিক পয়েন্টের মধ্যে একটি সরল রেখা তৈরি করা। Polyline এর জন্য কিছু সাধারণ অপশন কনফিগার করা যায় যেমন রঙ, প্রস্থ, ড্যাশ স্টাইল ইত্যাদি।
উদাহরণ:
var latlngs = [
[51.505, -0.09],
[51.515, -0.1],
[51.525, -0.11]
];
var polyline = L.polyline(latlngs, {
color: 'blue', // পলিলাইনের রঙ
weight: 4, // পলিলাইনের পুরুত্ব
opacity: 0.7, // পলিলাইনের স্বচ্ছতা
dashArray: '10, 5' // ড্যাশড লাইনের প্যাটার্ন
}).addTo(map);
ব্যাখ্যা:
color: পলিলাইনের রঙ নির্ধারণ করে।weight: পলিলাইনের পুরুত্ব নির্ধারণ করে।opacity: পলিলাইনের স্বচ্ছতা কাস্টমাইজ করে।dashArray: ড্যাশড লাইন তৈরি করার জন্য প্যাটার্ন সেট করে, যেখানে প্রথম সংখ্যা হলো দৈর্ঘ্য এবং দ্বিতীয়টি হলো বিরতি।
২. Polygon Options কনফিগার করা
Polygon হল একটি বন্ধ আকৃতি, যা একাধিক পয়েন্ট দিয়ে তৈরি হয়। এটি সাধারণত এলাকা বা সীমারেখা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var latlngs = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
var polygon = L.polygon(latlngs, {
color: 'red', // পলিগনের সীমানার রঙ
weight: 3, // পলিগনের সীমানার পুরুত্ব
fillColor: 'yellow', // পলিগনের ভিতরের রঙ
fillOpacity: 0.5 // পলিগনের ভিতরের স্বচ্ছতা
}).addTo(map);
ব্যাখ্যা:
color: পলিগনের সীমানার রঙ নির্ধারণ করে।weight: পলিগনের সীমানার পুরুত্ব নির্ধারণ করে।fillColor: পলিগনের ভিতরের রঙ নির্ধারণ করে।fillOpacity: পলিগনের ভিতরের স্বচ্ছতা নির্ধারণ করে।
৩. Circle Options কনফিগার করা
Circle একটি বিশেষ ধরনের শেপ যা নির্দিষ্ট রেডিয়াস (radius) সহ তৈরি হয়। এটি সাধারণত একটি স্থান বা এলাকা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var circle = L.circle([51.508, -0.11], {
color: 'green', // বর্ডারের রঙ
fillColor: 'green', // ভিতরের রঙ
fillOpacity: 0.5, // ভিতরের স্বচ্ছতা
radius: 500 // রেডিয়াস
}).addTo(map);
ব্যাখ্যা:
color: সীমানার রঙ নির্ধারণ করে।fillColor: ভিতরের রঙ নির্ধারণ করে।fillOpacity: ভিতরের স্বচ্ছতা নির্ধারণ করে।radius: বৃত্তের রেডিয়াস নির্ধারণ করে।
৪. Rectangle Options কনফিগার করা
Rectangle একটি চারকোণা আকার, যা দুইটি কোণের মধ্যে সীমানা নির্ধারণ করে। এটি সাধারণত এলাকা বা সীমানা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var bounds = [[51.49, -0.08], [51.5, -0.06]];
var rectangle = L.rectangle(bounds, {
color: 'blue', // বর্ডারের রঙ
weight: 3, // সীমানার পুরুত্ব
fillColor: 'blue', // ভিতরের রঙ
fillOpacity: 0.2 // ভিতরের স্বচ্ছতা
}).addTo(map);
ব্যাখ্যা:
color: সীমানার রঙ নির্ধারণ করে।weight: সীমানার পুরুত্ব নির্ধারণ করে।fillColor: ভিতরের রঙ নির্ধারণ করে।fillOpacity: ভিতরের স্বচ্ছতা নির্ধারণ করে।
৫. Custom Shape Options কনফিগার করা
LeafletJS আপনাকে আপনার শেপগুলির জন্য কাস্টম স্টাইল তৈরি করার সুযোগ দেয়, যেমন আইকন বা বিশেষ কোনো অ্যানিমেশন যুক্ত করা।
উদাহরণ:
var customIcon = L.divIcon({
className: 'custom-icon', // আইকনের ক্লাস
html: '<div style="background-color: red; width: 30px; height: 30px; border-radius: 50%"></div>' // কাস্টম আইকন তৈরি
});
var marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);
ব্যাখ্যা:
className: আইকনের জন্য একটি ক্লাস নির্ধারণ করে।html: আইকনের HTML কনটেন্ট কাস্টমাইজ করে।
সারাংশ
LeafletJS এর Shape Options ব্যবহার করে আপনি ম্যাপে বিভিন্ন শেপ কাস্টমাইজ করতে পারেন যেমন Polyline, Polygon, Circle, এবং Rectangle। এগুলোর জন্য আপনি রঙ, প্রস্থ, পুরুত্ব, স্বচ্ছতা এবং অন্যান্য স্টাইল বিকল্প কাস্টমাইজ করতে পারেন। এভাবে আপনি ম্যাপের শেপগুলোর ভিজ্যুয়াল প্রেজেন্টেশন আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।
Read more
