Overlay এর জন্য Interactivity এবং Events

Overlay হল সেই সমস্ত উপাদান যা ম্যাপের মূল টাইল লেয়ারের উপরে থাকে এবং এটি মার্কার, লাইন, পলিগন বা অন্যান্য জিওস্পেশাল উপাদান হতে পারে। LeafletJS এ আপনি সহজেই Overlay যোগ করতে পারেন এবং এর উপর Interactivity এবং Events যোগ করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।

Interactivity এবং Events ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরো শক্তিশালী করে, যেমন ক্লিক, হোভার, মাউস আউট ইত্যাদি ইভেন্টগুলি ট্র্যাক করতে এবং Overlay এর সাথে ব্যবহারকারীকে আরো সোজাসুজি যোগাযোগ করতে সহায়তা করে।

Overlay তে Interactivity যোগ করা

১. Marking Interaction: Overlay মার্কারে ক্লিক ইভেন্ট

Marking Overlay (যেমন, Markers বা Polygons) এ ইন্টারঅ্যাকশন যোগ করতে সাধারণত ক্লিক ইভেন্ট ব্যবহৃত হয়, যেখানে ক্লিক করার পর কোনো কিছু হবে যেমন পপ-আপ প্রদর্শন করা।

উদাহরণ: Overlay Markers এ ক্লিক ইভেন্ট

// ম্যাপ তৈরি
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);

// একটি মার্কার তৈরি এবং ক্লিক ইভেন্ট যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map);

// ক্লিক ইভেন্ট
marker.on('click', function() {
  alert('You clicked on the marker!');
});

এখানে:

• on('click'): এটি মার্কারের উপর ক্লিক করলে একটি এলার্ট মেসেজ প্রদর্শন করবে।

২. Polygon Overlay Interaction: হোভার এবং ক্লিক

Polygon বা অন্য শেপের উপর হোভার বা ক্লিক ইভেন্ট যোগ করা সম্ভব। আপনি mouseover, mouseout, এবং click ইভেন্ট দিয়ে Overlay এর ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন।

উদাহরণ: Polygon এ হোভার এবং ক্লিক ইভেন্ট

var latlngs = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
];

var polygon = L.polygon(latlngs, {
  color: 'red',
  fillColor: 'green',
  fillOpacity: 0.5
}).addTo(map);

// হোভার ইভেন্ট
polygon.on('mouseover', function() {
  polygon.setStyle({
    color: 'blue',
    weight: 5
  });
});

// মাউসআউট ইভেন্ট
polygon.on('mouseout', function() {
  polygon.setStyle({
    color: 'red',
    weight: 2
  });
});

// ক্লিক ইভেন্ট
polygon.on('click', function() {
  alert('Polygon clicked!');
});

এখানে:

• mouseover: যখন মাউস পলিগনের উপর আসবে তখন এটি রঙ এবং প্রস্থ পরিবর্তন করবে।
• mouseout: মাউস পলিগনের বাইরে চলে গেলে আগের অবস্থায় ফিরে যাবে।
• click: পলিগনে ক্লিক করলে একটি এলার্ট প্রদর্শিত হবে।

Overlay তে Event Handling

LeafletJS তে Overlay উপাদানগুলো যেমন Marking, Polyline, Polygon, Circle, Rectangle ইত্যাদিতে বিভিন্ন ধরনের Events হ্যান্ডেল করা সম্ভব। নীচে কিছু গুরুত্বপূর্ণ ইভেন্টের উদাহরণ দেওয়া হলো:

৩. Marking Overlay তে Event Handling

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

// পপ-আপ ওপেন করার ইভেন্ট
marker.on('popupopen', function() {
  console.log('Popup is opened');
});

// পপ-আপ ক্লোজ করার ইভেন্ট
marker.on('popupclose', function() {
  console.log('Popup is closed');
});

// ক্লিক ইভেন্ট
marker.on('click', function() {
  marker.bindPopup('You clicked the marker!').openPopup();
});

এখানে:

• popupopen: পপ-আপ যখন খুলবে তখন এটি ট্রিগার হবে।
• popupclose: পপ-আপ যখন বন্ধ হবে তখন এটি ট্রিগার হবে।
• click: মার্কারের উপর ক্লিক করলে পপ-আপ প্রদর্শিত হবে।

৪. Polyline Overlay তে Event Handling

var latlngs = [
  [51.5, -0.09],
  [51.51, -0.1],
  [51.52, -0.11]
];

var polyline = L.polyline(latlngs, {
  color: 'blue',
  weight: 4
}).addTo(map);

// ক্লিক ইভেন্ট
polyline.on('click', function() {
  alert('You clicked on the polyline!');
});

// মাউসওভার ইভেন্ট
polyline.on('mouseover', function() {
  polyline.setStyle({ color: 'green' });
});

// মাউসআউট ইভেন্ট
polyline.on('mouseout', function() {
  polyline.setStyle({ color: 'blue' });
});

এখানে:

• click: পলিলাইনে ক্লিক করলে একটি এলার্ট দেখাবে।
• mouseover: পলিলাইনে মাউস আসলে তার রঙ পরিবর্তিত হবে।
• mouseout: পলিলাইন থেকে মাউস বের হলে রঙ পূর্বাবস্থায় ফিরে যাবে।

৫. Circle Overlay Interaction

Circle একটি বৃত্তাকার Overlay যা ব্যবহারকারীকে একটি এলাকা প্রদর্শন করতে সাহায্য করে। এটি radius, fillColor, stroke ইত্যাদি কাস্টমাইজ করতে সহায়তা করে।

var circle = L.circle([51.508, -0.11], {
  color: 'red',
  fillColor: 'green',
  fillOpacity: 0.5,
  radius: 500
}).addTo(map);

// ক্লিক ইভেন্ট
circle.on('click', function() {
  alert('You clicked on the circle!');
});

// হোভার ইভেন্ট
circle.on('mouseover', function() {
  circle.setStyle({ color: 'blue' });
});

এখানে:

• click: বৃত্তের উপর ক্লিক করলে একটি এলার্ট প্রদর্শিত হবে।
• mouseover: মাউস বৃত্তের উপর আসলে তার রঙ পরিবর্তিত হবে।

সারাংশ

Overlay এ Interactivity এবং Events যোগ করার মাধ্যমে আপনি LeafletJS ম্যাপে ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও শক্তিশালী করতে পারেন। Marker, Polygon, Polyline, Circle ইত্যাদির উপর ইভেন্ট হ্যান্ডলিং এবং কাস্টম স্টাইলিং ব্যবহার করে আপনি ইউজার ইন্টারফেস এবং অভিজ্ঞতাকে উন্নত করতে পারবেন। Events যেমন click, mouseover, mouseout, popupopen, এবং popupclose ইত্যাদি দিয়ে Overlay এর উপর ইন্টারঅ্যাকশন কাস্টমাইজ করা যায়।