LeafletJS এর মাধ্যমে আপনি ম্যাপের Marker এবং Shape এর ওপর বিভিন্ন ইভেন্ট পরিচালনা করতে পারেন। এই ইভেন্টগুলো ব্যবহারকারীর ইন্টারঅ্যাকশনকে ট্র্যাক করতে সহায়ক হয়, যেমন মার্কারের উপর ক্লিক করা, শেপের রেঞ্জ পরিবর্তন করা, অথবা ম্যাপে শেপের ড্র্যাগ করা। এই ইভেন্টগুলো ব্যবহার করে আপনি ম্যাপের ইউজার এক্সপিরিয়েন্স উন্নত করতে পারেন।
Marker এর ইভেন্ট পরিচালনা
১. Click Event (মার্কার ক্লিক)
মার্কার উপর ক্লিক ইভেন্ট ট্র্যাক করতে 'click' ইভেন্ট ব্যবহার করা হয়।
উদাহরণ:
var marker = L.marker([51.5, -0.09]).addTo(map);
// ক্লিক ইভেন্ট
marker.on('click', function(e) {
alert('মার্কারে ক্লিক করা হয়েছে!');
});
এখানে, 'click' ইভেন্ট ব্যবহার করে মার্কারে ক্লিক করলে একটি এলার্ট প্রদর্শিত হবে।
২. Mouseover Event (মাউসওভার)
মার্কার উপর মাউসের হোভার করলে 'mouseover' ইভেন্ট ট্রিগার হয়। আপনি এটি ব্যবহার করে মার্কারের উপর মাউস হোভার করার পর বিভিন্ন ক্রিয়া পরিচালনা করতে পারেন।
উদাহরণ:
marker.on('mouseover', function(e) {
marker.bindPopup("আপনি এই মার্কারের উপর মাউস রেখেছেন!").openPopup();
});
marker.on('mouseout', function(e) {
marker.closePopup();
});
এখানে, 'mouseover' ইভেন্টে মার্কারের ওপর মাউস রাখলে একটি পপ-আপ দেখা যাবে, এবং 'mouseout' ইভেন্টে মাউস সরিয়ে নিলে পপ-আপটি বন্ধ হয়ে যাবে।
৩. Drag Event (মার্কার ড্র্যাগ)
মার্কারকে ড্র্যাগযোগ্য (draggable) করতে draggable: true অপশন ব্যবহার করা হয়। এরপর dragstart, dragend, drag ইভেন্ট ব্যবহার করে মার্কারের ড্র্যাগ অবস্থান ট্র্যাক করা যায়।
উদাহরণ:
var draggableMarker = L.marker([51.5, -0.09], { draggable: true }).addTo(map);
draggableMarker.on('dragstart', function() {
console.log("মার্কার ড্র্যাগ শুরু হয়েছে");
});
draggableMarker.on('drag', function() {
console.log("মার্কার ড্র্যাগ হচ্ছে");
});
draggableMarker.on('dragend', function() {
console.log("মার্কার ড্র্যাগ শেষ হয়েছে");
});
Shape এর ইভেন্ট পরিচালনা
LeafletJS-এ Shape (যেমন Polygon, Polyline, Circle, Rectangle) এর বিভিন্ন ইভেন্ট ব্যবহার করা হয়, যেমন সেগুলি ড্র্যাগ করা, আকার পরিবর্তন করা বা মাউসের ইন্টারঅ্যাকশন।
১. Click Event (শেপ ক্লিক)
শেপের উপর ক্লিক করলে 'click' ইভেন্ট ট্রিগার হয়। আপনি এর মাধ্যমে শেপের সাথে কোনো কার্যকলাপ পরিচালনা করতে পারেন।
উদাহরণ:
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
polygon.on('click', function() {
alert('পলিগনে ক্লিক করা হয়েছে!');
});
এখানে, 'click' ইভেন্ট ব্যবহার করে পলিগন উপর ক্লিক করলে একটি এলার্ট প্রদর্শিত হবে।
২. Mouseover and Mouseout Event (শেপ হোভার)
'mouseover' এবং 'mouseout' ইভেন্ট ব্যবহার করে আপনি শেপের উপর মাউস হোভার করলে বা সরিয়ে নিলে কোনো কার্যকলাপ পরিচালনা করতে পারেন।
উদাহরণ:
polygon.on('mouseover', function() {
polygon.setStyle({ color: 'red' }); // রঙ পরিবর্তন
});
polygon.on('mouseout', function() {
polygon.setStyle({ color: 'blue' }); // আগের রঙে ফেরত
});
এখানে, শেপের উপর মাউস রাখলে এর রঙ লাল হয়ে যাবে এবং মাউস সরিয়ে নিলে রঙ নীল হয়ে যাবে।
৩. Drag Event (শেপ ড্র্যাগ)
LeafletJS-এ শেপগুলোকে ড্র্যাগযোগ্য (draggable) করা সম্ভব এবং 'dragstart', 'drag', এবং 'dragend' ইভেন্ট ব্যবহার করে শেপের ড্র্যাগ অবস্থান ট্র্যাক করা যায়।
উদাহরণ:
var rectangle = L.rectangle([[51.49, -0.08], [51.5, -0.06]], { draggable: true }).addTo(map);
rectangle.on('dragstart', function() {
console.log("পলিগন ড্র্যাগ শুরু হয়েছে");
});
rectangle.on('drag', function() {
console.log("পলিগন ড্র্যাগ হচ্ছে");
});
rectangle.on('dragend', function() {
console.log("পলিগন ড্র্যাগ শেষ হয়েছে");
});
এখানে, draggable: true অপশন ব্যবহার করে পলিগনকে ড্র্যাগযোগ্য করা হয়েছে এবং 'dragstart', 'drag', 'dragend' ইভেন্টের মাধ্যমে ড্র্যাগিংয়ের বিভিন্ন অবস্থা ট্র্যাক করা হচ্ছে।
সারাংশ
LeafletJS ব্যবহার করে আপনি Marker এবং Shape এর বিভিন্ন ইভেন্ট ট্র্যাক করতে পারেন। ইভেন্টগুলো যেমন click, mouseover, drag, mouseout ইত্যাদি ব্যবহার করে আপনি মার্কার বা শেপের উপর ব্যবহারকারীর ইন্টারঅ্যাকশন গুলি অনুসরণ করতে পারবেন এবং সেগুলোর ওপর বিভিন্ন ক্রিয়া পরিচালনা করতে পারবেন। এই ইভেন্টগুলো আপনার ম্যাপিং অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
