Custom Controls তৈরি এবং মানচিত্রে যুক্ত করা

LeafletJS ব্যবহার করে আপনি Custom Controls তৈরি করতে পারেন, যা আপনার ম্যাপে অতিরিক্ত ফিচার যোগ করতে সাহায্য করে। এগুলি ম্যাপের উপরের বা পাশের কোনে বিভিন্ন ধরনের কাস্টম বাটন, ফর্ম, টুলবক্স, বা ইন্টারফেস উপাদান থাকতে পারে, যা ব্যবহারকারীদের সঙ্গে ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।

LeafletJS এ কাস্টম কন্ট্রোল তৈরি করতে L.Control ক্লাস ব্যবহার করা হয়, এবং এরপর সেটিকে addTo(map) ব্যবহার করে ম্যাপে যুক্ত করা হয়।

Custom Controls তৈরি করার ধাপ

১. Custom Control তৈরি করা

LeafletJS এ কাস্টম কন্ট্রোল তৈরি করতে L.Control ক্লাসটি ব্যবহার করতে হয়। নিচে একটি উদাহরণ দেয়া হলো যেখানে একটি কাস্টম কন্ট্রোল বাটন তৈরি করা হয়েছে।

উদাহরণ: একটি কাস্টম বাটন কন্ট্রোল তৈরি করা

var map = L.map('map').setView([51.505, -0.09], 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);

// Custom Control তৈরি করা
var customControl = L.control({ position: 'topright' });

customControl.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'custom-control');
  div.innerHTML = '<button style="padding: 10px; background-color: #4CAF50; color: white;">Click Me</button>';
  div.firstChild.onclick = function() {
    alert('Custom Button Clicked!');
  };
  return div;
};

// কাস্টম কন্ট্রোল ম্যাপে যোগ করা
customControl.addTo(map);

ব্যাখ্যা:

• L.control(): কাস্টম কন্ট্রোল তৈরি করার জন্য ব্যবহৃত হয়। এখানে position: 'topright' অপশনটি কন্ট্রোলের অবস্থান নির্দেশ করে, যা ম্যাপের উপর উপর ডান কোণায় থাকবে।
• onAdd(): কন্ট্রোলটি ম্যাপের সাথে যোগ করার পর এটি কিভাবে দেখাবে তা নির্ধারণ করে। এখানে, একটি button তৈরি করা হয়েছে।
• L.DomUtil.create(): HTML এলিমেন্ট (যেমন div, button) তৈরি করার জন্য ব্যবহৃত হয়।
• firstChild.onclick: বাটনে ক্লিক করলে একটি alert দেখানোর জন্য ব্যবহৃত হয়।

২. Custom Control এর স্টাইল কাস্টমাইজ করা

আপনার কাস্টম কন্ট্রোলের ডিজাইন এবং লুক-অ্যান্ড-ফিল কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন।

উদাহরণ: CSS দিয়ে কাস্টম কন্ট্রোল স্টাইল করা

<style>
  .custom-control {
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
  }

  .custom-control button {
    font-size: 16px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .custom-control button:hover {
    background-color: #45a049;
  }
</style>

এখানে, আমরা CSS এর মাধ্যমে বাটনটি সজ্জিত করেছি, যেমন এর রঙ, আকার, এবং হোভার ইফেক্ট।

৩. Custom Control এর ব্যবহারিক উদাহরণ

এখন, আপনি কাস্টম কন্ট্রোল ব্যবহার করে আরও কার্যকরী ফিচার যেমন Zoom In/Out, Search Bar, Layer Switcher ইত্যাদি তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম "Zoom In" বাটন তৈরি করা:

var zoomInControl = L.control({ position: 'topleft' });

zoomInControl.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'zoom-in-control');
  div.innerHTML = '<button style="font-size: 16px; background-color: #ff6347; color: white; padding: 10px;">Zoom In</button>';
  div.firstChild.onclick = function() {
    map.zoomIn();
  };
  return div;
};

zoomInControl.addTo(map);

এখানে:

• zoomIn() ফাংশনটি ম্যাপের জুম ইন করার জন্য ব্যবহৃত হয়েছে।

৪. Custom Control এর জন্য Event Listener যোগ করা

আপনার কাস্টম কন্ট্রোলের জন্য event listeners যোগ করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য আরও ফিচার যোগ করে।

উদাহরণ: কাস্টম কন্ট্রোলের জন্য ইভেন্ট যোগ করা

var customControl = L.control({ position: 'bottomleft' });

customControl.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'event-control');
  div.innerHTML = '<button style="font-size: 16px;">Toggle Layer</button>';
  div.firstChild.onclick = function () {
    map.hasLayer(layer1) ? map.removeLayer(layer1) : map.addLayer(layer1);
  };
  return div;
};

customControl.addTo(map);

এখানে:

• যখন Toggle Layer বাটনে ক্লিক করা হবে, তখন layer1 এর উপস্থিতি ম্যাপের উপর পরিবর্তিত হবে।

৫. Multiple Custom Controls তৈরি এবং যোগ করা

আপনি একাধিক কাস্টম কন্ট্রোল তৈরি করতে পারেন এবং এগুলোকে আপনার ম্যাপে একসাথে যোগ করতে পারেন।

উদাহরণ: একাধিক কাস্টম কন্ট্রোল

var control1 = L.control({ position: 'topleft' });
var control2 = L.control({ position: 'bottomright' });

control1.onAdd = function () {
  var div = L.DomUtil.create('div', 'control-1');
  div.innerHTML = '<button>Control 1</button>';
  return div;
};

control2.onAdd = function () {
  var div = L.DomUtil.create('div', 'control-2');
  div.innerHTML = '<button>Control 2</button>';
  return div;
};

control1.addTo(map);
control2.addTo(map);

এখানে:

• দুটি কাস্টম কন্ট্রোলের উদাহরণ দেয়া হয়েছে, একটি ম্যাপের উপরের বাম (top-left) কোণে এবং অন্যটি নিচের ডান (bottom-right) কোণে।

সারাংশ

LeafletJS এ কাস্টম কন্ট্রোল তৈরি করা সহজ এবং এটি ম্যাপের ইন্টারঅ্যাকটিভিটি ও ইউজার এক্সপিরিয়েন্স উন্নত করে। আপনি L.Control ব্যবহার করে কাস্টম বাটন, ফর্ম, টুলবক্স বা অন্যান্য উপাদান তৈরি করতে পারেন এবং আপনার প্রয়োজন অনুযায়ী স্টাইল কাস্টমাইজ করতে পারেন। কাস্টম কন্ট্রোল দিয়ে আপনি ম্যাপে বিভিন্ন অতিরিক্ত ফিচার যোগ করতে পারেন যেমন Zoom, Layer Switcher, Search Bar ইত্যাদি।