LeafletJS তে Layers Control এবং Custom Map Controls এর মাধ্যমে ম্যাপের ভিউ এবং ফিচারগুলির উপর কাস্টম কন্ট্রোল যুক্ত করা সম্ভব। এটি ব্যবহারকারীকে ম্যাপের উপাদানগুলো সক্রিয় বা নিষ্ক্রিয় করতে এবং ম্যাপের প্যানেল বা কন্ট্রোলগুলো কাস্টমাইজ করতে সাহায্য করে। এই ফিচারটি ওয়েব ম্যাপিং অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
Layers Control
Layers Control ম্যাপের বিভিন্ন লেয়ার (যেমন, টাইল লেয়ার, মার্কার, পলিগন) যোগ এবং নিয়ন্ত্রণ করতে ব্যবহৃত হয়। LeafletJS এর মধ্যে L.control.layers() ব্যবহার করে আপনি সহজে লেয়ার কন্ট্রোল তৈরি করতে পারেন। এটি একটি ইউজার ইন্টারফেস উপাদান সরবরাহ করে যেখানে ব্যবহারকারী বিভিন্ন লেয়ার দেখার জন্য সিলেক্ট করতে পারেন।
Layers Control কনফিগারেশন
১. বেস লেয়ার এবং ওভারলেয়ার কন্ট্রোল তৈরি করা
LeafletJS এ বেস লেয়ার হলো ম্যাপের মূল টাইল লেয়ার (যেমন OpenStreetMap), এবং ওভারলেয়ার হলো সেই লেয়ার যা আপনি ম্যাপে বসাতে পারেন (যেমন মার্কার, পলিগন)। আপনি L.control.layers() ফাংশন ব্যবহার করে এই লেয়ার কন্ট্রোল তৈরি করতে পারেন।
উদাহরণ:
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap এবং Satellite টাইল লেয়ার
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var satelliteLayer = L.tileLayer('https://{s}.tile.satellite.com/{z}/{x}/{y}.jpg', {
attribution: 'Tiles © <a href="https://www.satellite.com">Satellite</a>'
});
// মার্কার লেয়ার
var markerLayer = L.layerGroup([
L.marker([51.5, -0.09]).bindPopup('London'),
L.marker([51.51, -0.1]).bindPopup('Paris')
]);
// Layers Control
var baseMaps = {
"OpenStreetMap": osmLayer,
"Satellite": satelliteLayer
};
var overlayMaps = {
"Markers": markerLayer
};
// Layers Control যুক্ত করা
L.control.layers(baseMaps, overlayMaps).addTo(map);
// প্রথমে OpenStreetMap লেয়ার যোগ করা
osmLayer.addTo(map);
ব্যাখ্যা:
L.control.layers(): এটি ম্যাপে একাধিক লেয়ার নিয়ন্ত্রণের জন্য ব্যবহৃত হয়।baseMaps: এখানে OpenStreetMap এবং Satellite টাইল লেয়ার দুটো বেস লেয়ার হিসেবে রাখা হয়েছে।overlayMaps: এখানে Markers নামের একটি লেয়ার গ্রুপ রাখা হয়েছে।addTo(map): এটি লেয়ার কন্ট্রোলটি ম্যাপে যোগ করে।
এখানে, ব্যবহারকারী OpenStreetMap অথবা Satellite টাইল লেয়ার বেছে নিতে পারবেন, এবং মার্কার লেয়ার চালু বা বন্ধ করতে পারবেন।
Custom Map Control কনফিগারেশন
LeafletJS এ আপনি Custom Map Controls তৈরি করতে পারেন। কাস্টম কন্ট্রোলগুলি আপনাকে ম্যাপের উপাদানগুলির উপর নির্দিষ্ট কার্যকলাপ করতে সাহায্য করে, যেমন ম্যাপের স্কেল পরিবর্তন, ম্যাপের প্যানেল তৈরি করা বা কাস্টম বাটন যোগ করা।
২. Custom Control তৈরি করা
LeafletJS এ কাস্টম কন্ট্রোল তৈরি করার জন্য L.Control ব্যবহার করা হয়। আপনি L.Control কে একটি কাস্টম HTML উপাদান হিসেবে কনফিগার করতে পারেন, যা পরে ম্যাপের মধ্যে প্রদর্শিত হবে।
উদাহরণ:
// Custom Control তৈরি করা
var customControl = L.Control.extend({
options: {
position: 'topright' // কন্ট্রোলটি ম্যাপের কোন দিকে বসবে
},
onAdd: function(map) {
var div = L.DomUtil.create('div', 'custom-control');
div.innerHTML = '<button onclick="alert(\'Custom Control Clicked\')">Custom Button</button>';
return div;
}
});
// কাস্টম কন্ট্রোলটি ম্যাপে যোগ করা
map.addControl(new customControl());
ব্যাখ্যা:
L.Control.extend(): এটি একটি কাস্টম কন্ট্রোল তৈরির জন্য ব্যবহার করা হয়, যা একটি div উপাদান তৈরি করে এবং সেটিতে একটি বাটন যুক্ত করা হয়।onAdd(): এটি কাস্টম কন্ট্রোলটি যখন ম্যাপে যোগ করা হবে তখন কী কাজ করবে তা নির্ধারণ করে।position: এটি কন্ট্রোলটির ম্যাপের কোন স্থানে প্রদর্শিত হবে তা নির্ধারণ করে। যেমনtopleft,topright,bottomleft,bottomright।
৩. Custom Zoom Control
LeafletJS তে Custom Zoom Control তৈরি করা সম্ভব। আপনি zoomIn এবং zoomOut বাটন কাস্টমাইজ করে একটি নতুন কন্ট্রোল তৈরি করতে পারেন।
উদাহরণ:
var customZoomControl = L.Control.zoom.extend({
options: {
position: 'topright'
},
onAdd: function(map) {
var container = L.DomUtil.create('div', 'leaflet-bar');
// Zoom In বাটন
var zoomInButton = L.DomUtil.create('a', 'leaflet-control-zoom-in', container);
zoomInButton.innerHTML = '+';
zoomInButton.href = '#';
L.DomEvent.on(zoomInButton, 'click', function() {
map.zoomIn();
});
// Zoom Out বাটন
var zoomOutButton = L.DomUtil.create('a', 'leaflet-control-zoom-out', container);
zoomOutButton.innerHTML = '-';
zoomOutButton.href = '#';
L.DomEvent.on(zoomOutButton, 'click', function() {
map.zoomOut();
});
return container;
}
});
// কাস্টম Zoom Control যোগ করা
map.addControl(new customZoomControl());
ব্যাখ্যা:
L.Control.zoom.extend(): এটি কাস্টম Zoom Control তৈরি করতে ব্যবহৃত হয়েছে।- Zoom In/Out বাটন তৈরি এবং সেটি ম্যাপে যুক্ত করা হয়েছে।
সারাংশ
LeafletJS এর মাধ্যমে আপনি ম্যাপের Layers Control এবং Custom Controls কাস্টমাইজ করে ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি ম্যাপিং অ্যাপ্লিকেশন তৈরি করতে পারেন। Layers Control ব্যবহারে বিভিন্ন টাইল লেয়ার ও উপাদান নিয়ন্ত্রণ করা যায় এবং Custom Controls ব্যবহার করে ম্যাপের বিভিন্ন কার্যকলাপ কাস্টমাইজ করা সম্ভব, যেমন ম্যাপের জুম, প্যান এবং অন্যান্য কাস্টম বাটন যোগ করা।
Read more
