LeafletJS এর Layers এবং TileLayers

LeafletJS এ Layers এবং TileLayers ম্যাপের জন্য অত্যন্ত গুরুত্বপূর্ণ দুটি কনসেপ্ট। এই দুটি ধারণা ব্যবহারকারীদের ম্যাপের ভিজ্যুয়াল উপস্থাপনা নিয়ন্ত্রণ করতে সাহায্য করে এবং ম্যাপের উপরে বিভিন্ন ধরণের ডেটা প্রদর্শন করতে সহায়ক।

Layers (লেয়ার)

LeafletJS এ Layers হল ম্যাপের বিভিন্ন উপাদান বা কনটেন্ট, যা আলাদা আলাদা লেয়ার হিসেবে রেন্ডার করা হয়। লেয়ার ব্যবহার করে আপনি ম্যাপের উপর বিভিন্ন ধরণের তথ্য যেমন মার্কার, পলিগন, লাইন, বা অন্যান্য জিওস্পেশাল ডেটা প্রদর্শন করতে পারেন।

Layer Types

LeafletJS এ বিভিন্ন ধরনের লেয়ার রয়েছে, যেমন:

• TileLayer: ম্যাপের পটভূমিতে থাকা মূল চিত্র। এটি সাধারণত ম্যাপের বিভিন্ন টাইলগুলি তৈরি করে।
• VectorLayer: ম্যাপে ভেক্টর শেপস (যেমন পলিগন, লাইন, বা পয়েন্ট) রেন্ডার করা হয়।
• MarkerLayer: ম্যাপে নির্দিষ্ট পয়েন্ট বা মার্কার প্রদর্শন করার জন্য ব্যবহৃত হয়।

Layers ব্যবহার

নিম্নলিখিত কোড উদাহরণটি দেখায় কিভাবে আপনি বিভিন্ন লেয়ার ব্যবহার করতে পারেন:

var map = L.map('map').setView([51.505, -0.09], 13);

var markerLayer = L.layerGroup([
    L.marker([51.5, -0.09]),
    L.marker([51.495, -0.083])
]).addTo(map);

var polygonLayer = L.layerGroup([
    L.polygon([
        [51.51, -0.08],
        [51.5, -0.06],
        [51.49, -0.08]
    ])
]).addTo(map);

এই কোডে markerLayer এবং polygonLayer দুটি আলাদা লেয়ার গ্রুপ তৈরি করা হয়েছে এবং তা ম্যাপে যোগ করা হয়েছে।

TileLayer (টাইললেয়ার)

TileLayer হল ম্যাপের পটভূমিতে থাকা চিত্রের অংশ। এটি সাধারণত একটি টাইল বা পটভূমি চিত্র হিসেবে কাজ করে এবং সেই চিত্রটিকে বিভিন্ন লেয়ার হিসেবে প্রদর্শন করা হয়। সাধারণভাবে, TileLayer বিভিন্ন ম্যাপ সার্ভিস প্রোভাইডার যেমন OpenStreetMap, Google Maps, বা Mapbox থেকে টাইল লোড করে।

TileLayer তৈরি করা

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);

এই কোডে OpenStreetMap এর টাইল ব্যবহার করা হয়েছে। এখানে {z}, {x}, এবং {y} হল টাইলের নির্দিষ্ট অংশ (zoom, x, y) যেগুলি URL এর মাধ্যমে ডাইনামিকভাবে লোড হয়।

TileLayer এর কনফিগারেশন

TileLayer এর কিছু কনফিগারেশন রয়েছে, যেমন:

• urlTemplate: টাইলের URL টেমপ্লেট, যা ম্যাপ টাইলগুলির ঠিকানা নির্ধারণ করে।
• attribution: ম্যাপের ক্রেডিট তথ্য, যা সাধারণত ব্যবহৃত হয়।

LeafletJS এ Layers এবং TileLayers এর ব্যবহার

একাধিক লেয়ার একসাথে ব্যবহার

LeafletJS এ আপনি একাধিক লেয়ার একসাথে ব্যবহার করতে পারেন এবং ব্যবহারকারীদের সিলেক্ট করতে দিতে পারেন কোন লেয়ার দেখতে চান। উদাহরণস্বরূপ:

var streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var satelliteLayer = L.tileLayer('https://{s}.tile.satelliteprovider.com/{z}/{x}/{y}.png');

var map = L.map('map', {
    layers: [streetLayer]  // ডিফল্টভাবে streetLayer ব্যবহার হবে
});

var baseMaps = {
    "Street View": streetLayer,
    "Satellite View": satelliteLayer
};

L.control.layers(baseMaps).addTo(map);

এখানে দুটি টাইললেয়ার (streetLayer এবং satelliteLayer) তৈরি করা হয়েছে এবং একটি layer control ব্যবহার করা হয়েছে, যাতে ব্যবহারকারী ম্যাপের ভিউ পরিবর্তন করতে পারেন।

Layers এবং TileLayers এর সারাংশ

LeafletJS এ Layers এবং TileLayers হল মূল উপাদান যা ম্যাপের বিভিন্ন তথ্য ও চিত্রগুলো প্রদর্শন করতে ব্যবহৃত হয়। TileLayer সাধারণত ম্যাপের পটভূমি হিসেবে কাজ করে, এবং Layers ব্যবহার করে আপনি বিভিন্ন ধরণের জিওস্পেশাল ডেটা যেমন মার্কার, লাইন, পলিগন ইত্যাদি ম্যাপে প্রদর্শন করতে পারেন। Layer Control এর মাধ্যমে একাধিক লেয়ার স্যুইচ করা সম্ভব, যা ব্যবহারকারীকে আরও ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করে।

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 ব্যবহারকারীর জন্য ডায়নামিকভাবে তথ্য বা ম্যাপের অংশগুলোর প্রদর্শন নিশ্চিত করে।

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 লেয়ার ব্যবহার করে ব্যবহারকারীদের জন্য একটি উন্নত মানের ম্যাপিং অভিজ্ঞতা তৈরি করতে পারবেন।

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 একসাথে কনফিগার করে একটি ইন্টারেকটিভ ম্যাপ তৈরি করতে পারেন, যা ব্যবহারকারীকে লেয়ার সিলেক্ট করার সুবিধা দেয়।

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 এর ব্যবহার

1. Base Layers: এখানে baseLayers অবজেক্টে দুটি লেয়ার যোগ করা হয়েছে: OpenStreetMap এবং Satellite।
2. Layer Control: L.control.layers() ফাংশনটি baseLayers অবজেক্টটি গ্রহণ করে এবং মানচিত্রে Layer Control যুক্ত করে। এতে ব্যবহারকারী দুটি লেয়ারের মধ্যে সুইচ করতে পারবেন।
3. ডিফল্ট লেয়ার: 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 মানচিত্রে বিভিন্ন ধরনের লেয়ার যোগ করতে এবং ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করতে পারেন।