GeoJSON হলো একটি জনপ্রিয় ফরম্যাট যা জিওস্পেশাল ডেটা স্টোর করতে ব্যবহৃত হয় এবং এটি JSON ফরম্যাটের উপর ভিত্তি করে তৈরি। GeoJSON ডেটা মেইল, পয়েন্ট, লাইন, পলিগন, মাল্টিপল পলিগন ইত্যাদি ধারণ করতে পারে এবং এ ধরনের ডেটা ম্যাপে ইন্টিগ্রেট করা খুবই সহজ। LeafletJS এর মাধ্যমে GeoJSON ডেটা ম্যাপে ইন্টিগ্রেট করা সহজ এবং এটির সাথে ইন্টারঅ্যাকশনও খুবই সহজ হয়।
GeoJSON ডেটা ইন্টিগ্রেট করার জন্য L.geoJSON() ফাংশন ব্যবহার করা হয়, যা ম্যাপে GeoJSON ডেটা যুক্ত করতে সাহায্য করে।
GeoJSON ডেটা লোড এবং ম্যাপে প্রদর্শন করা
১. 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"
}
}
]
};
// ম্যাপ তৈরি
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 ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
এখানে:
- GeoJSON ডেটা একটি পয়েন্ট এবং একটি পলিগন ধারণ করে।
- L.geoJSON(geojsonData) ব্যবহার করে GeoJSON ডেটা ম্যাপে যুক্ত করা হয়েছে।
২. GeoJSON ফাইল লোড এবং ম্যাপে ইন্টিগ্রেট করা
GeoJSON ডেটা লোকাল ফাইল বা URL থেকে লোড করা যেতে পারে। উদাহরণস্বরূপ, নিচে একটি GeoJSON ফাইল থেকে ডেটা লোড করার উদাহরণ দেওয়া হলো।
উদাহরণ: GeoJSON ফাইল লোড করা
fetch('path/to/your/geojson-file.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data).addTo(map);
})
.catch(error => console.log('Error loading GeoJSON file: ', error));
এখানে:
- fetch() ফাংশন ব্যবহার করে GeoJSON ফাইলটি লোড করা হয়েছে এবং L.geoJSON() দিয়ে ম্যাপে প্রদর্শন করা হয়েছে।
৩. GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন
GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন যোগ করার জন্য on() ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়। আপনি পপ-আপ, হোভার, ক্লিক ইত্যাদি ইভেন্ট যোগ করতে পারেন।
উদাহরণ: ক্লিক ইভেন্ট এবং পপ-আপ
L.geoJSON(geojsonData, {
onEachFeature: function (feature, layer) {
// পপ-আপ যোগ করা
layer.bindPopup('Name: ' + feature.properties.name);
// ক্লিক ইভেন্ট
layer.on('click', function () {
alert('You clicked on ' + feature.properties.name);
});
}
}).addTo(map);
এখানে:
- onEachFeature ফাংশনটি প্রতিটি ফিচার (পয়েন্ট, পলিগন) এর জন্য একটি ইভেন্ট হ্যান্ডলিং সেটআপ করে।
- bindPopup() ফাংশন পপ-আপ তৈরি করতে ব্যবহার করা হয়।
- on('click') ব্যবহার করে ক্লিক ইভেন্ট যোগ করা হয়েছে।
৪. GeoJSON ফিচারের স্টাইল কাস্টমাইজেশন
GeoJSON ফিচারের স্টাইল কাস্টমাইজ করতে style অপশন ব্যবহার করা হয়। আপনি ফিচারের রঙ, পুরুত্ব, অপাসিটি ইত্যাদি কাস্টমাইজ করতে পারেন।
উদাহরণ: GeoJSON ফিচারের স্টাইল কাস্টমাইজ করা
L.geoJSON(geojsonData, {
style: function (feature) {
return {
color: feature.properties.name === 'London' ? 'blue' : 'green',
weight: 3,
opacity: 0.7
};
}
}).addTo(map);
এখানে:
- style() ফাংশনটি GeoJSON ফিচারের স্টাইল কাস্টমাইজ করতে ব্যবহৃত হয়।
feature.properties.nameএর উপর ভিত্তি করে রঙ পরিবর্তন করা হচ্ছে।
৫. GeoJSON ফিচারগুলির হোভার ইফেক্ট
GeoJSON ফিচারের উপর mouseover এবং mouseout ইভেন্ট ব্যবহার করা হয় যাতে ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারেন।
উদাহরণ: হোভার ইফেক্ট যোগ করা
L.geoJSON(geojsonData, {
onEachFeature: function (feature, layer) {
layer.on({
mouseover: function () {
layer.setStyle({
weight: 5,
color: 'orange',
opacity: 0.7
});
},
mouseout: function () {
layer.setStyle({
weight: 3,
color: 'blue',
opacity: 0.7
});
}
});
}
}).addTo(map);
এখানে:
- mouseover ইভেন্টে, আপনি লেয়ারের স্টাইল পরিবর্তন করেছেন যখন মাউস এর উপর আসে।
- mouseout ইভেন্টে, আপনি আগের স্টাইলে ফিরে যান।
সারাংশ
LeafletJS এ GeoJSON Data Integration এর মাধ্যমে আপনি সহজে GeoJSON ডেটা ম্যাপে ইন্টিগ্রেট করতে পারেন এবং বিভিন্ন ধরনের শেপ (যেমন পয়েন্ট, লাইন, পলিগন) প্রদর্শন করতে পারেন। আপনি GeoJSON ফিচারের উপর স্টাইল কাস্টমাইজেশন, ক্লিক ইভেন্ট, পপ-আপ এবং হোভার ইফেক্ট যোগ করতে পারেন। এই পদ্ধতিগুলি ম্যাপের ইন্টারঅ্যাকটিভতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। GeoJSON ডেটা আপনার ম্যাপিং অ্যাপ্লিকেশনের জন্য অত্যন্ত শক্তিশালী এবং নমনীয় উপাদান হিসেবে কাজ করতে পারে।
GeoJSON (Geospatial JSON) হলো একটি ওপেন স্ট্যান্ডার্ড ফাইল ফরম্যাট, যা জিওস্পেশাল ডেটা (জিওগ্রাফিক তথ্য) স্টোর করতে ব্যবহৃত হয়। এটি JSON (JavaScript Object Notation) ফরম্যাটের উপর ভিত্তি করে তৈরি, এবং এটি স্থানিক ডেটা যেমন পয়েন্ট, লাইন, পলিগন ইত্যাদি ধারণ করে। GeoJSON ফাইলটি ম্যাপিং সিস্টেমে, বিশেষ করে ওয়েব ম্যাপিং অ্যাপ্লিকেশনগুলিতে, খুবই জনপ্রিয়। LeafletJS এর মাধ্যমে GeoJSON ডেটা লোড, প্রদর্শন এবং কাস্টমাইজ করা সহজ এবং কার্যকরী।
GeoJSON ফাইলের কাঠামো
GeoJSON ফাইল সাধারণত একটি FeatureCollection ধারণ করে, যা এক বা একাধিক Feature ধারণ করে। প্রতিটি Feature একটি geometry (যেমন পয়েন্ট, লাইন, পলিগন) এবং properties (যেমন নাম, বর্ণনা ইত্যাদি) ধারণ করে।
একটি সাধারণ GeoJSON ফাইলের উদাহরণ:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"name": "Sample Point"
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[102.0, 0.0],
[103.0, 0.0],
[103.0, 1.0],
[102.0, 1.0],
[102.0, 0.0]
]
]
},
"properties": {
"name": "Sample Polygon"
}
}
]
}
এখানে:
type: GeoJSON ফাইলের মূল ধরনের তথ্য। এখানে FeatureCollection ব্যবহার করা হয়েছে।geometry: ডেটার ভৌগলিক রূপ, যেমন পয়েন্ট, লাইন, পলিগন ইত্যাদি।properties: ফিচারের সাথে সম্পর্কিত অতিরিক্ত তথ্য।
GeoJSON এর ব্যবহার
GeoJSON ফাইলের মাধ্যমে আপনি সহজেই LeafletJS-এ বিভিন্ন ধরনের জিওস্পেশাল ডেটা যেমন Point, Line, Polygon, MultiPolygon ইত্যাদি প্রদর্শন করতে পারেন। এটি ম্যাপিং অ্যাপ্লিকেশনগুলিতে ব্যবহৃত ডেটাকে আরো সহজ এবং পরিষ্কারভাবে উপস্থাপন করে।
১. GeoJSON ফাইল ম্যাপে লোড করা
LeafletJS এর মাধ্যমে GeoJSON ডেটা ম্যাপে লোড করতে L.geoJSON() ফাংশন ব্যবহার করা হয়। এখানে একটি উদাহরণ দেখানো হলো, যেখানে একটি 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"
}
}
]
};
// ম্যাপ তৈরি
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 ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
এখানে:
L.geoJSON()ফাংশনটি GeoJSON ডেটা লোড করে ম্যাপে দেখানোর জন্য ব্যবহার করা হয়েছে।- Point এবং Polygon দুটি ভিন্ন ধরনের ফিচার যুক্ত করা হয়েছে।
২. GeoJSON ফাইল থেকে ডেটা লোড করা
আপনি যদি GeoJSON ডেটা একটি ফাইল থেকে লোড করতে চান, তাহলে fetch() ফাংশন ব্যবহার করতে পারেন। এটি ওয়েব থেকে বা লোকাল সার্ভার থেকে GeoJSON ফাইল লোড করতে সহায়তা করে।
উদাহরণ: GeoJSON ফাইল লোড করা
fetch('path/to/your/geojson-file.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data).addTo(map);
})
.catch(error => console.log('Error loading GeoJSON file: ', error));
এখানে:
- fetch() ফাংশন ব্যবহার করে GeoJSON ফাইলটি ওয়েব থেকে লোড করা হয়েছে এবং তারপর L.geoJSON() ফাংশন দ্বারা এটি ম্যাপে প্রদর্শন করা হয়েছে।
৩. GeoJSON ফিচারগুলির উপর ইন্টারঅ্যাকশন
GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন যোগ করতে আপনি onEachFeature ফাংশন ব্যবহার করতে পারেন। এর মাধ্যমে আপনি ক্লিক, হোভার, পপ-আপ ইত্যাদি ইভেন্ট যোগ করতে পারবেন।
উদাহরণ: ক্লিক ইভেন্ট এবং পপ-আপ
L.geoJSON(geojsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup('Name: ' + feature.properties.name); // পপ-আপ প্রদর্শন
// ক্লিক ইভেন্ট
layer.on('click', function () {
alert('You clicked on ' + feature.properties.name);
});
}
}).addTo(map);
এখানে:
- onEachFeature ফাংশনটি GeoJSON ফিচারের উপর ইভেন্ট হ্যান্ডলিং করার জন্য ব্যবহৃত হয়।
- bindPopup() পপ-আপ যোগ করতে ব্যবহৃত হয়।
৪. GeoJSON ফিচারের স্টাইল কাস্টমাইজেশন
GeoJSON ফিচারের স্টাইল কাস্টমাইজ করতে style অপশন ব্যবহার করা হয়।
উদাহরণ: স্টাইল কাস্টমাইজেশন
L.geoJSON(geojsonData, {
style: function (feature) {
return {
color: feature.properties.name === 'London' ? 'blue' : 'green',
weight: 3,
opacity: 0.7
};
}
}).addTo(map);
এখানে:
- style() ফাংশন ব্যবহার করে GeoJSON ফিচারের স্টাইল কাস্টমাইজ করা হয়েছে।
সারাংশ
GeoJSON একটি জনপ্রিয় এবং শক্তিশালী ফাইল ফরম্যাট, যা জিওস্পেশাল ডেটা উপস্থাপন করার জন্য ব্যবহৃত হয়। LeafletJS এর মাধ্যমে আপনি সহজেই GeoJSON ডেটা ম্যাপে লোড এবং প্রদর্শন করতে পারেন। GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন এবং স্টাইল কাস্টমাইজেশনও করা যায়, যা ম্যাপের ভিজুয়ালাইজেশন এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
GeoJSON হলো একটি ফাইল ফরম্যাট যা Geospatial (জিওস্পেশাল) ডেটা স্টোর করতে ব্যবহৃত হয়। GeoJSON ডেটা ম্যাপে পয়েন্ট, লাইন, পলিগন, মাল্টিপল পলিগন ইত্যাদি ধারণ করে, এবং এটি LeafletJS এর মাধ্যমে ওয়েব ম্যাপে সহজেই প্রদর্শন করা যায়। LeafletJS এর L.geoJSON() ফাংশন ব্যবহার করে আপনি GeoJSON ডেটা ম্যাপে লোড করতে পারেন।
নিচে আমরা GeoJSON ডেটা লোড করার এবং প্রদর্শন করার বিভিন্ন পদ্ধতি আলোচনা করবো।
১. GeoJSON ডেটা লোকালি লোড করা
উদাহরণ ১: GeoJSON ডেটা ম্যাপে যোগ করা
এই উদাহরণে, আমরা একটি GeoJSON ডেটা তৈরি করব এবং সেটি LeafletJS এর মাধ্যমে ম্যাপে প্রদর্শন করব।
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 ডেটা ম্যাপে লোড করা:
// ম্যাপ তৈরি
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 ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
এখানে:
L.geoJSON(geojsonData)ফাংশনটি GeoJSON ডেটা লোড এবং ম্যাপে যোগ করার জন্য ব্যবহার করা হয়েছে।
২. GeoJSON ফাইল URL থেকে লোড করা
GeoJSON ডেটা যদি একটি এক্সটার্নাল ফাইল বা URL থেকে লোড করতে হয়, তবে fetch() ফাংশন ব্যবহার করা হয়।
উদাহরণ ২: GeoJSON ফাইল URL থেকে লোড করা
fetch('path/to/your/geojson-file.geojson')
.then(response => response.json())
.then(data => {
L.geoJSON(data).addTo(map);
})
.catch(error => console.log('Error loading GeoJSON file: ', error));
এখানে:
- fetch() ফাংশনটি ব্যবহার করে GeoJSON ফাইলটি লোড করা হয়েছে এবং তারপর L.geoJSON() ব্যবহার করে সেটি ম্যাপে প্রদর্শন করা হয়েছে।
৩. GeoJSON ডেটা প্রপার্টি এবং স্টাইল কাস্টমাইজেশন
GeoJSON ফিচারের উপর স্টাইল কাস্টমাইজ করতে style অপশন ব্যবহার করা হয়।
উদাহরণ ৩: GeoJSON ডেটার স্টাইল কাস্টমাইজেশন
L.geoJSON(geojsonData, {
style: function (feature) {
return {
color: feature.properties.name === 'London' ? 'blue' : 'green',
weight: 3,
opacity: 0.7
};
}
}).addTo(map);
এখানে:
- style() ফাংশনটি GeoJSON ফিচারের স্টাইল কাস্টমাইজ করতে ব্যবহৃত হয়।
feature.properties.nameএর উপর ভিত্তি করে রঙ পরিবর্তন করা হচ্ছে।
৪. GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন
GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন যোগ করতে onEachFeature ফাংশন ব্যবহার করা হয়। এতে ক্লিক, হোভার ইভেন্ট যোগ করা যায়।
উদাহরণ ৪: ক্লিক ইভেন্ট এবং পপ-আপ
L.geoJSON(geojsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup('Name: ' + feature.properties.name);
// ক্লিক ইভেন্ট
layer.on('click', function () {
alert('You clicked on ' + feature.properties.name);
});
}
}).addTo(map);
এখানে:
- onEachFeature ফাংশনটি প্রতিটি GeoJSON ফিচারের উপর ইভেন্ট হ্যান্ডলিং করার জন্য ব্যবহৃত হয়।
- bindPopup() পপ-আপ প্রদর্শন করার জন্য ব্যবহৃত হয়।
- on('click') ক্লিক ইভেন্ট যোগ করতে ব্যবহৃত হয়।
৫. GeoJSON ফিচারের উপর হোভার ইফেক্ট
GeoJSON ফিচারের উপর mouseover এবং mouseout ইভেন্ট ব্যবহার করা হয় যাতে ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারেন।
উদাহরণ ৫: হোভার ইফেক্ট
L.geoJSON(geojsonData, {
onEachFeature: function (feature, layer) {
layer.on({
mouseover: function () {
layer.setStyle({
weight: 5,
color: 'orange',
opacity: 0.7
});
},
mouseout: function () {
layer.setStyle({
weight: 3,
color: 'blue',
opacity: 0.7
});
}
});
}
}).addTo(map);
এখানে:
- mouseover ইভেন্টে, আপনি লেয়ারের স্টাইল পরিবর্তন করেছেন যখন মাউস এর উপর আসে।
- mouseout ইভেন্টে, আপনি আগের স্টাইলে ফিরে যান।
সারাংশ
GeoJSON ফাইলের মাধ্যমে আপনি সহজেই স্থানিক ডেটা LeafletJS ম্যাপে লোড এবং প্রদর্শন করতে পারেন। আপনি GeoJSON ডেটার উপর ইন্টারঅ্যাকশন, স্টাইল কাস্টমাইজেশন, এবং অন্যান্য ফিচার যোগ করতে পারেন। GeoJSON ফিচারগুলির উপর ক্লিক, হোভার ইভেন্ট, পপ-আপ এবং স্টাইল কাস্টমাইজেশন দিয়ে একটি শক্তিশালী ম্যাপিং অ্যাপ্লিকেশন তৈরি করতে পারবেন। GeoJSON ফাইলগুলি ওয়েব ম্যাপিং প্রোজেক্টের জন্য একটি অত্যন্ত কার্যকরী এবং নমনীয় উপাদান হিসেবে কাজ করে।
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 এর মাধ্যমে সেগুলিকে ম্যাপে সহজে প্রদর্শন করা যায়।
LeafletJS আপনাকে GeoJSON ডেটা ফাইল প্রদর্শন করতে এবং তার স্টাইল ও ইন্টারঅ্যাকশন কাস্টমাইজ করতে সাহায্য করে। GeoJSON হল একটি জনপ্রিয় ফরম্যাট যা জিওস্পেশাল ডেটা, যেমন পয়েন্ট, লাইন, এবং পলিগন, ওয়েব অ্যাপ্লিকেশনে প্রদর্শনের জন্য ব্যবহৃত হয়। LeafletJS এ GeoJSON ফাইল স্টাইলিং এবং ইন্টারঅ্যাকশন যোগ করা সহজ এবং কার্যকরী।
GeoJSON ফাইল লোড করা
GeoJSON ফাইল লোড করতে, প্রথমে LeafletJS এ L.geoJSON() ফাংশন ব্যবহার করে এটি ম্যাপে যোগ করা হয়। এর মাধ্যমে আপনি JSON ফাইল থেকে GeoJSON ডেটা ইম্পোর্ট করতে পারবেন।
GeoJSON লোড করার উদাহরণ:
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.49, -0.08],
[51.5, -0.06],
[51.51, -0.07],
[51.49, -0.08]
]
]
},
"properties": {
"name": "Sample Area"
}
}
]
};
// GeoJSON ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);
এখানে, GeoJSON ডেটা একটি পয়েন্ট এবং একটি পলিগন ধারণ করছে, এবং L.geoJSON() ফাংশনটি GeoJSON ডেটা ম্যাপে প্রদর্শন করছে।
GeoJSON Styling
GeoJSON এর স্টাইল কাস্টমাইজ করতে, আপনি style অপশন ব্যবহার করতে পারেন, যা পলিগন, পলিলাইন বা পয়েন্টের রঙ, প্রস্থ, পূর্ণতার পরিমাণ ইত্যাদি নিয়ন্ত্রণ করে।
GeoJSON Styling উদাহরণ:
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.49, -0.08],
[51.5, -0.06],
[51.51, -0.07],
[51.49, -0.08]
]
]
},
"properties": {
"name": "Sample Area"
}
}
]
};
// GeoJSON Styling ফাংশন
function style(feature) {
return {
weight: 2,
color: 'green', // সীমান্তের রঙ
fillColor: 'yellow', // ভরের রঙ
fillOpacity: 0.5 // পূর্ণতার পরিমাণ
};
}
// GeoJSON ডেটার স্টাইলিং
L.geoJSON(geojsonData, {
style: style
}).addTo(map);
এখানে, style() ফাংশন ব্যবহার করা হয়েছে যা GeoJSON ডেটার পলিগনের রঙ, সীমানার প্রস্থ এবং পূর্ণতার পরিমাণ কাস্টমাইজ করেছে।
GeoJSON Interactivity
GeoJSON এর উপর Interactivity যোগ করতে, আপনি onEachFeature ফাংশন ব্যবহার করতে পারেন, যা প্রতিটি ফিচারের জন্য ইভেন্ট হ্যান্ডলিং এবং পপ-আপ যুক্ত করতে সহায়তা করে।
GeoJSON Interactivity উদাহরণ:
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.49, -0.08],
[51.5, -0.06],
[51.51, -0.07],
[51.49, -0.08]
]
]
},
"properties": {
"name": "Sample Area"
}
}
]
};
// Interactivity যুক্ত করা
function onEachFeature(feature, layer) {
// পপ-আপ যোগ করা
if (feature.properties && feature.properties.name) {
layer.bindPopup("<b>" + feature.properties.name + "</b>");
}
// ক্লিক ইভেন্ট
layer.on('click', function () {
alert("আপনি " + feature.properties.name + " এ ক্লিক করেছেন!");
});
}
// GeoJSON এর উপর Interactivity যোগ করা
L.geoJSON(geojsonData, {
onEachFeature: onEachFeature
}).addTo(map);
এখানে, onEachFeature() ফাংশনটি প্রতিটি ফিচারের জন্য একটি পপ-আপ এবং ক্লিক ইভেন্ট যুক্ত করেছে। যখন ব্যবহারকারী একটি ফিচারে ক্লিক করবেন, তখন একটি এলার্ট বার্তা দেখানো হবে।
সারাংশ
LeafletJS-এ GeoJSON এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ধরনের জিওস্পেশাল ডেটা প্রদর্শন করতে পারেন এবং সেগুলোর Styling এবং Interactivity কাস্টমাইজ করতে পারেন। আপনি GeoJSON ফাইল লোড করতে এবং তার স্টাইল, রঙ, আকার, এবং ইন্টারঅ্যাকটিভ ফিচার (যেমন পপ-আপ, ক্লিক ইভেন্ট) যোগ করতে পারেন। এর ফলে, আপনার ওয়েব অ্যাপ্লিকেশন আরো ইন্টারেকটিভ এবং দর্শনীয় হয়ে ওঠে।
Read more
