LeafletJS এ Layer এবং TileLayer গুরুত্বপূর্ণ উপাদান, যা ম্যাপিং সিস্টেমে ভিজুয়াল ডেটা প্রদর্শন এবং ইন্টারঅ্যাকটিভ ফিচার তৈরি করার জন্য ব্যবহৃত হয়। এই দুটি উপাদান ম্যাপের লেয়ারিং সিস্টেম তৈরি করতে সাহায্য করে, যেখানে আপনি বিভিন্ন ধরনের তথ্য, মার্কার এবং টাইল লেয়ার যুক্ত করতে পারেন।
Layer এর ভূমিকা
Layer (লেয়ার) হল ম্যাপের একটি অবজেক্ট, যা বিভিন্ন ধরনের ডেটা বা উপাদান ধারণ করে। লেয়ার বিভিন্ন রকমের হতে পারে, যেমন:
- মার্কার লেয়ার (Marker Layer): যেখানে ব্যবহারকারী নির্দিষ্ট স্থান বা পয়েন্টকে চিহ্নিত করতে পারেন।
- পলিগন লেয়ার (Polygon Layer): যে কোনো সীমানা বা অঞ্চল চিহ্নিত করার জন্য পলিগন ব্যবহার করা হয়।
- পথ বা লাইন লেয়ার (Polyline Layer): দুটি পয়েন্টের মধ্যে রুট বা লাইন প্রদর্শন করা হয়।
LeafletJS তে আপনি একাধিক লেয়ার যোগ করতে পারেন, এবং ব্যবহারকারীরা ইচ্ছামত এই লেয়ারগুলো সিলেক্ট বা আনসিলেক্ট করতে পারে।
Layer এর উদাহরণ
var markerLayer = L.layerGroup([
L.marker([23.8103, 90.4125]).bindPopup("ঢাকা"),
L.marker([22.3569, 91.7832]).bindPopup("চট্টগ্রাম")
]).addTo(map);
এখানে, L.layerGroup() এর মাধ্যমে আমরা একটি Layer তৈরি করেছি, যা দুটি Marker ধারণ করছে। এই লেয়ারটি map এ যোগ করা হয়েছে।
TileLayer এর ভূমিকা
TileLayer (টাইল লেয়ার) ম্যাপের ভিত্তি বা বেস লেয়ার হিসেবে কাজ করে। এটি ম্যাপের গ্রাফিক্যাল টাইলগুলোকে লোড ও প্রদর্শন করে। টাইল লেয়ার হলো ম্যাপের সন্নিবেশ করা টুকরো (tiles), যা একটি ম্যাপের সমগ্র দৃশ্য তৈরি করতে একসঙ্গে কাজ করে।
TileLayer এর উদাহরণ
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
এখানে, L.tileLayer() ব্যবহার করে আমরা OpenStreetMap এর টাইল লেয়ার যোগ করেছি। {z}, {x}, {y} হল টাইলের অবস্থান নির্দেশক, যা ম্যাপের লেয়ারের বিভিন্ন স্তরকে প্রদর্শন করে।
Layer এবং TileLayer এর মধ্যে পার্থক্য
- Layer সাধারণত বিভিন্ন ধরনের ডেটা বা গ্রাফিক্স (যেমন মার্কার, পলিগন) ধারণ করে, যা ব্যবহারকারী ইন্টারঅ্যাকশন করার জন্য ব্যবহার করেন।
- TileLayer একটি ভিত্তি হিসেবে কাজ করে এবং ম্যাপের দৃশ্য বা টাইলগুলোকে লোড ও প্রদর্শন করে। এটি ম্যাপের মূল ভিউ তৈরি করে।
ব্যবহারিক উদাহরণ
// ম্যাপ তৈরি করা
var map = L.map('map').setView([23.8103, 90.4125], 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);
// লেয়ার গ্রুপ তৈরি করা (মার্কার লেয়ার)
var markerLayer = L.layerGroup([
L.marker([23.8103, 90.4125]).bindPopup("ঢাকা"),
L.marker([22.3569, 91.7832]).bindPopup("চট্টগ্রাম")
]).addTo(map);
এখানে:
- TileLayer: OpenStreetMap এর টাইল লেয়ার ম্যাপের ভিত্তি হিসেবে যোগ করা হয়েছে।
- Layer (markerLayer): দুইটি মার্কারকে একটি লেয়ার গ্রুপে যোগ করা হয়েছে, যা ম্যাপের উপরে প্রদর্শিত হবে।
সারাংশ
Layer এবং TileLayer লিফলেটজেএস এর দুটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা ম্যাপিং অ্যাপ্লিকেশনগুলোতে ডেটা ভিজুয়ালাইজেশন এবং ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে। TileLayer ম্যাপের বেস লেয়ার হিসেবে কাজ করে, এবং Layer ব্যবহারকারীর জন্য ডায়নামিকভাবে তথ্য বা ম্যাপের অংশগুলোর প্রদর্শন নিশ্চিত করে।
Read more
