LeafletJS এ ম্যাপের বিভিন্ন অংশ বা লেয়ার গুলি পরিচালনা করার জন্য Base Layers এবং Overlay Layers ব্যবহার করা হয়। এই লেয়ারগুলো ম্যাপের মধ্যে বিভিন্ন তথ্য বা ভিজুয়াল কন্টেন্ট প্রদর্শন করতে সাহায্য করে। Base layers সাধারণত ম্যাপের ব্যাকগ্রাউন্ড হিসেবে কাজ করে, এবং Overlay layers অন্যান্য অতিরিক্ত তথ্য যেমন পলিগন, লাইন বা মার্কার হিসেবে কাজ করে।
Base Layers কনফিগার করা
Base layers মূলত ম্যাপের ব্যাকগ্রাউন্ড লেয়ার হিসেবে কাজ করে। আপনি একাধিক Base layer যোগ করতে পারেন, এবং ব্যবহারকারীরা এগুলোর মধ্যে যেকোনো একটি নির্বাচন করতে পারে। সাধারণত OpenStreetMap, Google Maps, এবং Mapbox এর মত টাইল লেয়ারগুলো Base layer হিসেবে ব্যবহৃত হয়।
Base Layer সেটআপ উদাহরণ
// OpenStreetMap Base Layer
var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// Google Maps Base Layer
var googleStreet = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
subdomains:['mt0', 'mt1', 'mt2', 'mt3'],
attribution: 'Google Maps'
});
// Leaflet Base Layer
var leafletBaseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
এখানে তিনটি Base Layer যুক্ত করা হয়েছে: OpenStreetMap, Google Maps, এবং একটি সাধারণ Leaflet TileLayer। এভাবে আপনি নিজের প্রয়োজন অনুযায়ী Base Layer নির্বাচন করতে পারেন।
Overlay Layers কনফিগার করা
Overlay Layers ব্যবহারকারীদের ম্যাপের উপরে অতিরিক্ত তথ্য প্রদর্শন করার সুযোগ দেয়। এই লেয়ারগুলোর মধ্যে সাধারণত মার্কার, পলিগন, লাইন, বা হিটম্যাপ অন্তর্ভুক্ত থাকে। Overlay Layer গুলোর মধ্যে একাধিক লেয়ার থাকতে পারে, এবং ব্যবহারকারী যেকোনো একটি বা একাধিক লেয়ার একসাথে ব্যবহার করতে পারে।
Overlay Layer সেটআপ উদাহরণ
// মার্কার Overlay Layer
var marker = L.marker([51.5, -0.09]).bindPopup('I am a marker');
var markerLayer = L.layerGroup([marker]);
// পলিগন Overlay Layer
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).bindPopup("I am a polygon.");
var polygonLayer = L.layerGroup([polygon]);
এখানে, দুটি Overlay Layer তৈরি করা হয়েছে: একটি মার্কার লেয়ার এবং একটি পলিগন লেয়ার। L.layerGroup() ফাংশনের মাধ্যমে একাধিক উপাদান একত্রিত করা হয়েছে, যা ম্যাপের উপর একটি গ্রুপ হিসেবে প্রদর্শিত হবে।
Base Layers এবং Overlay Layers একসাথে ব্যবহার করা
এখন, Base Layers এবং Overlay Layers একসাথে ব্যবহারের জন্য আমরা L.control.layers() ফাংশন ব্যবহার করতে পারি। এটি ব্যবহারকারীদের Base Layer এবং Overlay Layer সিলেক্ট করার সুবিধা দেয়।
Base Layers এবং Overlay Layers একত্রিত করে ব্যবহার করা
// ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13);
// Base Layers যোগ করা
var baseLayers = {
"OpenStreetMap": openStreetMap,
"Google Maps": googleStreet
};
// Overlay Layers যোগ করা
var overlayLayers = {
"Markers": markerLayer,
"Polygons": polygonLayer
};
// লেয়ার কন্ট্রোল তৈরি করা
L.control.layers(baseLayers, overlayLayers).addTo(map);
// ম্যাপের লেয়ারগুলি যুক্ত করা
openStreetMap.addTo(map); // ডিফল্ট Base Layer হিসাবে OpenStreetMap ব্যবহার
markerLayer.addTo(map); // ডিফল্ট Overlay Layer হিসাবে মার্কার লেয়ার ব্যবহার
এখানে L.control.layers() ফাংশন দিয়ে Base Layer এবং Overlay Layer দুটোই কনফিগার করা হয়েছে। ব্যবহারকারী যেকোনো Base Layer বা Overlay Layer নির্বাচন করতে পারবে। Base Layers কন্ট্রোল উইন্ডোতে এবং Overlay Layers কন্ট্রোল উইন্ডোতে প্রদর্শিত হবে।
সারাংশ
LeafletJS এ Base Layers এবং Overlay Layers ব্যবহার করে আপনি বিভিন্ন ম্যাপ লেয়ার কনফিগার করতে পারেন। Base Layers সাধারণত ম্যাপের ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হয়, যেমন OpenStreetMap বা Google Maps, আর Overlay Layers ম্যাপে অতিরিক্ত তথ্য যোগ করতে ব্যবহৃত হয়, যেমন মার্কার, পলিগন, বা অন্যান্য জিওস্পেশাল ডেটা। L.control.layers() ব্যবহার করে আপনি Base এবং Overlay Layers একসাথে কনফিগার করে একটি ইন্টারেকটিভ ম্যাপ তৈরি করতে পারেন, যা ব্যবহারকারীকে লেয়ার সিলেক্ট করার সুবিধা দেয়।
Read more
