LeafletJS আপনাকে একাধিক ম্যাপ লেয়ার (Multiple Map Layers) একসাথে প্রদর্শন করতে সহায়তা করে। এটি একটি খুব শক্তিশালী বৈশিষ্ট্য, যা ব্যবহারকারীদের বিভিন্ন ধরনের ম্যাপ লেয়ার যেমন রাস্তাঘাট, স্যাটেলাইট, থার্মাল, বা অন্য কোনো কাস্টম লেয়ার নিয়ে কাজ করার সুযোগ দেয়।
এটি সাধারণত লেয়ার কন্ট্রোল (Layer Control) এর মাধ্যমে পরিচালনা করা হয়, যা ব্যবহারকারীদের একটি নির্দিষ্ট লেয়ার অন/অফ করার সুবিধা প্রদান করে।
Multiple Layers কনফিগার করার জন্য প্রয়োজনীয় উপকরণ
- Tile Layer: ম্যাপের ব্যাকগ্রাউন্ড লেয়ার (যেমন OpenStreetMap, Google Maps, ইত্যাদি)।
- Marker Layer: ম্যাপের উপর মার্কার যোগ করার জন্য।
- GeoJSON Layer: জিওস্পেশাল ডেটা প্রদর্শনের জন্য GeoJSON লেয়ার ব্যবহার করা হয়।
- Overlay Layer: ম্যাপের উপর অতিরিক্ত ডেটা, যেমন পলিগন বা পলিলাইন।
১. Multiple Tile Layers যোগ করা
আপনি একাধিক টাইল লেয়ার যোগ করতে পারেন এবং ব্যবহারকারীদের জন্য একটি লেয়ার কন্ট্রোল তৈরি করতে পারেন। নিচে একটি উদাহরণ দেয়া হলো, যেখানে দুটি টাইল লেয়ার (OpenStreetMap এবং Google Satellite) কনফিগার করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Multiple Layers</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 লেয়ার তৈরি
var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// Google Satellite লেয়ার তৈরি
var googleSatelliteLayer = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
attribution: '© <a href="https://www.google.com/maps">Google Maps</a>'
});
// Default লেয়ার সেট করা (এটি প্রথম লোড হবে)
openStreetMapLayer.addTo(map);
// লেয়ার কন্ট্রোল তৈরি করা
var baseLayers = {
"OpenStreetMap": openStreetMapLayer,
"Google Satellite": googleSatelliteLayer
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
এখানে, দুইটি টাইল লেয়ার—একটি OpenStreetMap এবং একটি Google Satellite লেয়ার তৈরি করা হয়েছে। L.control.layers() ফাংশন ব্যবহার করে দুটি লেয়ারকে কন্ট্রোলের মধ্যে যোগ করা হয়েছে, যাতে ব্যবহারকারীরা সহজেই যেকোনো লেয়ার নির্বাচন করতে পারে।
২. Multiple Overlay Layers যোগ করা
এছাড়াও আপনি Overlay Layers ব্যবহার করে অন্য ধরনের ডেটা (যেমন, মার্কার, পলিগন ইত্যাদি) ম্যাপের উপর উপস্থাপন করতে পারেন। এখানে একটি উদাহরণ দেয়া হলো যেখানে GeoJSON Layer এবং Marker Layer দুটি overlay layer হিসেবে ব্যবহার করা হচ্ছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Multiple Overlay Layers</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 লেয়ার
var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Marker Layer তৈরি করা
var markerLayer = L.layerGroup([
L.marker([51.5, -0.09]).bindPopup("Marker 1"),
L.marker([51.495, -0.083]).bindPopup("Marker 2")
]);
// GeoJSON লেয়ার তৈরি করা
var geojsonLayer = L.geoJSON({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.09, 51.505]
},
"properties": {
"name": "Feature 1"
}
}]
});
// Overlay Layers কন্ট্রোল তৈরি করা
var overlayLayers = {
"Markers": markerLayer,
"GeoJSON Layer": geojsonLayer
};
// লেয়ার কন্ট্রোল যোগ করা
L.control.layers(null, overlayLayers).addTo(map);
// Overlay Layers ম্যাপের উপরে যোগ করা
markerLayer.addTo(map);
geojsonLayer.addTo(map);
</script>
</body>
</html>
এই কোডে:
- Marker Layer এবং GeoJSON Layer দুইটি overlay layer হিসেবে ব্যবহৃত হয়েছে।
L.layerGroup()ফাংশন ব্যবহার করে একাধিক মার্কার একসাথে গ্রুপ করা হয়েছে।L.geoJSON()ফাংশন ব্যবহার করে একটি GeoJSON ডেটা লেয়ার তৈরি করা হয়েছে।L.control.layers()ব্যবহার করে overlay লেয়ারগুলিকে কন্ট্রোলের মাধ্যমে পরিচালিত করা হয়েছে।
৩. লেয়ার কন্ট্রোলের মাধ্যমে বিভিন্ন লেয়ার পরিচালনা
এখন, ব্যবহারকারী ম্যাপের উপর থেকে যেকোনো লেয়ার অন বা অফ করতে সক্ষম হবে। আপনি এই লেয়ার কন্ট্রোলটি নিজের চাহিদা অনুযায়ী কাস্টমাইজ করতে পারেন, যেমন:
- লেয়ার কন্ট্রোলের অবস্থান পরিবর্তন করা।
- টুলটিপ যোগ করা।
- কোন লেয়ারটি ডিফল্ট হিসেবে দেখানো হবে তা নির্ধারণ করা।
সারাংশ
LeafletJS ব্যবহার করে Multiple Layers কনফিগার করা খুবই সহজ এবং এটি আপনার ম্যাপের অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং বিস্তারিত করে তোলে। আপনি বিভিন্ন টাইল লেয়ার এবং overlay লেয়ার ব্যবহার করে ব্যবহারকারীদের জন্য একটি উন্নত মানের ম্যাপিং অভিজ্ঞতা তৈরি করতে পারবেন।
Read more
