LeafletJS এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হলো Layer Control, যার মাধ্যমে আপনি বিভিন্ন ধরনের মানচিত্রের লেয়ার (Tiles, Markers, Polygons ইত্যাদি) সহজেই নিয়ন্ত্রণ করতে পারেন। এতে ব্যবহারকারী সহজেই বিভিন্ন ম্যাপ লেয়ারগুলির মধ্যে সুইচ করতে পারেন, যেমন স্যাটেলাইট, টেরেন বা রাস্তা ম্যাপ।
এটি একটি ইন্টারেক্টিভ উপায়, যা ব্যবহারকারীদের বিভিন্ন লেয়ার দেখতে এবং তাদের মধ্যে পরিবর্তন করতে সাহায্য করে।
পদক্ষেপ ১: Layer Control সেট আপ করা
Layer Control ব্যবহার করতে হলে, প্রথমে আপনাকে একাধিক লেয়ার তৈরি করতে হবে এবং তারপর এগুলোকে Layer Control এ যোগ করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে OpenStreetMap এবং স্ট্যাটিক স্যাটেলাইট লেয়ার যোগ করা হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layer Control উদাহরণ</title>
<!-- LeafletJS এর CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<!-- মানচিত্রের জন্য ডিভ -->
<div id="map" style="height: 500px;"></div>
<!-- LeafletJS এর জাভাস্ক্রিপ্ট -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// মানচিত্র তৈরি করা
var map = L.map('map').setView([23.8103, 90.4125], 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'
});
// স্যাটেলাইট লেয়ার
var satelliteLayer = L.tileLayer('https://{s}.tile.satellitenav.com/{z}/{x}/{y}.jpg', {
attribution: '© <a href="https://www.satellitenav.com/copyright">Satellite Navigation</a>'
});
// Layer Control যুক্ত করা
var baseLayers = {
"OpenStreetMap": openStreetMapLayer,
"Satellite": satelliteLayer
};
// Layer Control মানচিত্রে যোগ করা
L.control.layers(baseLayers).addTo(map);
// ডিফল্ট লেয়ার সেট করা
openStreetMapLayer.addTo(map);
</script>
</body>
</html>
পদক্ষেপ ২: Layer Control এর ব্যবহার
- Base Layers: এখানে baseLayers অবজেক্টে দুটি লেয়ার যোগ করা হয়েছে: OpenStreetMap এবং Satellite।
- Layer Control:
L.control.layers()ফাংশনটি baseLayers অবজেক্টটি গ্রহণ করে এবং মানচিত্রে Layer Control যুক্ত করে। এতে ব্যবহারকারী দুটি লেয়ারের মধ্যে সুইচ করতে পারবেন। - ডিফল্ট লেয়ার:
openStreetMapLayer.addTo(map)ফাংশনটি ডিফল্ট লেয়ার হিসেবে OpenStreetMap যোগ করে।
বিভিন্ন লেয়ার ক্যাটাগরি
LeafletJS এর লেয়ার কন্ট্রোল মূলত দুটি ধরনের লেয়ার নিয়ন্ত্রণ করতে সহায়ক:
- Base Layers: যেগুলি একে অপরের সাথে একযোগে ব্যবহার করা যায়, যেমন OpenStreetMap বা স্যাটেলাইট লেয়ার।
- Overlays: এগুলি অতিরিক্ত লেয়ার হিসেবে ম্যাপে যোগ করা হয়, যেমন মার্কার, পলিগন বা রুট লাইন ইত্যাদি।
Overlay Layers যোগ করা
এছাড়া, আপনি Overlay Layers (যেমন মার্কার, পলিগন ইত্যাদি) যোগ করতে পারেন যা একাধিক সক্রিয় থাকতে পারে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি মার্কার এবং পলিগন অতিরিক্ত Overlay হিসেবে যোগ করা হয়েছে:
<script>
// Overlay Layers (মার্কার ও পলিগন)
var markerLayer = L.marker([23.8103, 90.4125]).bindPopup("এটি ঢাকা শহর!").openPopup();
var polygonLayer = L.polygon([
[23.8103, 90.4125],
[23.8203, 90.4225],
[23.8103, 90.4325]
]).bindPopup("এটি একটি পলিগন।");
// Overlay Layers অবজেক্ট
var overlays = {
"মার্কার": markerLayer,
"পলিগন": polygonLayer
};
// Overlay লেয়ার কন্ট্রোল যোগ করা
L.control.layers(baseLayers, overlays).addTo(map);
</script>
Layer Control এর সুবিধা
- ইন্টারেক্টিভ মানচিত্র: ব্যবহারকারী বিভিন্ন লেয়ার দেখতে এবং তাদের মধ্যে পরিবর্তন করতে পারেন।
- ডেটার ভিজুয়ালাইজেশন: একাধিক লেয়ার ব্যবহার করে তথ্যের ভিন্ন ভিন্ন দৃষ্টিভঙ্গি তৈরি করা যায়।
- ডাইনামিক কন্ট্রোল: একাধিক ধরনের মানচিত্রের লেয়ার সহজেই যোগ এবং অপসারণ করা যায়।
এইভাবে আপনি Layer Control ব্যবহার করে আপনার LeafletJS মানচিত্রে বিভিন্ন ধরনের লেয়ার যোগ করতে এবং ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করতে পারেন।
Read more
