LeafletJS একটি শক্তিশালী টুল যা ব্যবহারকারীদের জন্য ইন্টারেকটিভ ম্যাপ তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ধরনের ইভেন্ট (যেমন ক্লিক বা হোভার) এবং কাস্টম পপ-আপ তৈরি করতে পারেন। এটি ওয়েবসাইটে ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়ানোর জন্য অত্যন্ত কার্যকরী।
মার্কার ইভেন্টস
১. ক্লিক ইভেন্ট (Click Event)
মার্কার উপর ক্লিক করা হলে কিছু অ্যাকশন বা কার্যকলাপ করতে পারবেন, যেমন পপ-আপ দেখানো, কাস্টম স্টাইল প্রয়োগ করা ইত্যাদি।
উদাহরণ:
// একটি ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap টাইল লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// মার্কারের উপর ক্লিক ইভেন্ট যোগ করা
marker.on('click', function() {
alert('মার্কারে ক্লিক করা হয়েছে!');
});
এখানে, যখন ব্যবহারকারী মার্কারের উপর ক্লিক করবেন, তখন একটি পপ-আপ উইন্ডো প্রদর্শিত হবে যা "মার্কারে ক্লিক করা হয়েছে!" বার্তা দেখাবে।
২. হোভার ইভেন্ট (Hover Event)
মার্কারের উপর মাউসের হোভার (Mouse Hover) ইভেন্ট ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন তৈরির জন্য ব্যবহার করা হয়। হোভার করার সময় মার্কারের স্টাইল পরিবর্তন বা অতিরিক্ত তথ্য প্রদর্শন করা যেতে পারে।
উদাহরণ:
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// মার্কারের উপর হোভার ইভেন্ট যোগ করা
marker.on('mouseover', function() {
this.bindPopup('আপনি মার্কারের উপর হোভার করছেন!').openPopup();
});
marker.on('mouseout', function() {
this.closePopup();
});
এখানে, যখন ব্যবহারকারী মার্কারের উপর মাউস রেখে হোভার করবেন, তখন একটি পপ-আপ উইন্ডো প্রদর্শিত হবে। যখন মাউস মার্কারের বাইরে চলে যাবে, পপ-আপটি বন্ধ হয়ে যাবে।
কাস্টম পপ-আপ
LeafletJS এর মাধ্যমে আপনি কাস্টম পপ-আপ তৈরি করতে পারেন যা বিভিন্ন ধরনের HTML কনটেন্ট যেমন ছবি, টেক্সট, লিঙ্ক ইত্যাদি ধারণ করতে পারে।
১. কাস্টম পপ-আপ তৈরি করা
মার্কারের উপর ক্লিক করলে একটি কাস্টম পপ-আপ তৈরি করা যেতে পারে, যেটি HTML কনটেন্ট ধারণ করবে।
উদাহরণ:
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// কাস্টম পপ-আপ তৈরি করা
var popupContent = "<b>এটি একটি কাস্টম পপ-আপ!</b><br>এখানে আপনি HTML কনটেন্ট রাখতে পারেন।";
marker.bindPopup(popupContent);
এখানে, মার্কারে ক্লিক করার সাথে সাথে একটি কাস্টম পপ-আপ দেখানো হবে যেখানে HTML কনটেন্ট থাকবে।
২. কাস্টম পপ-আপের স্টাইল পরিবর্তন করা
আপনি চাইলে পপ-আপের স্টাইলও কাস্টমাইজ করতে পারেন, যেমন পপ-আপের ব্যাকগ্রাউন্ড রঙ, আকার ইত্যাদি।
উদাহরণ:
// কাস্টম পপ-আপ স্টাইল তৈরি করা
var popupContent = "<div style='background-color: #f39c12; padding: 10px; color: white;'><b>কাস্টম স্টাইল!</b><br>এটি একটি কাস্টম পপ-আপ।</div>";
marker.bindPopup(popupContent);
এটি একটি কাস্টম পপ-আপ তৈরি করবে যার ব্যাকগ্রাউন্ড রঙ হল সোনালী এবং টেক্সটের রঙ সাদা।
সারাংশ
LeafletJS ব্যবহার করে আপনি সহজেই মার্কার ইভেন্ট (যেমন ক্লিক এবং হোভার) পরিচালনা করতে পারেন এবং কাস্টম পপ-আপ তৈরি করতে পারেন। ক্লিক ইভেন্টের মাধ্যমে আপনি মার্কারের উপর ব্যবহারকারীকে প্রতিক্রিয়া জানাতে পারবেন, এবং হোভার ইভেন্টের মাধ্যমে আপনি মার্কারের ওপর অতিরিক্ত তথ্য প্রদর্শন করতে পারবেন। এছাড়া, আপনি কাস্টম HTML কনটেন্ট দিয়ে পপ-আপ কাস্টমাইজ করতে পারেন, যা আরও আকর্ষণীয় এবং ইন্টারেকটিভ তৈরি করবে।
Read more
