LeafletJS এর Popup এবং Tooltip হল দুটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ম্যাপের উপর ক্লিক বা হোভার করার মাধ্যমে ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। আপনি Popup এবং Tooltip এর উপর ইভেন্ট হ্যান্ডলিং (যেমন, ক্লিক, মাউসওভার, মাউসআউট) যোগ করতে পারেন, যা ম্যাপের ইন্টারঅ্যাকশনকে আরও উন্নত এবং ইন্টারঅ্যাকটিভ করে তোলে।
এই টিউটোরিয়ালে আমরা Popup এবং Tooltip এর উপর বিভিন্ন ইভেন্ট হ্যান্ডলিং কিভাবে করা যায়, তা দেখবো।
১. Popup Events হ্যান্ডল করা
Popup সাধারণত ক্লিক বা টাচ করার মাধ্যমে প্রদর্শিত হয় এবং এটি ম্যাপের উপর বিভিন্ন তথ্য বা ইন্টারঅ্যাকশন প্রদর্শন করতে ব্যবহৃত হয়। আপনি পপ-আপের উপর বিভিন্ন ইভেন্ট যেমন open, close, click ইত্যাদি হ্যান্ডল করতে পারেন।
১.১ Popup Open এবং Close ইভেন্ট হ্যান্ডল করা
popupopen এবং popupclose ইভেন্ট ব্যবহার করে আপনি পপ-আপ খোলা এবং বন্ধ হওয়ার সময় কিছু কার্যকলাপ করতে পারেন।
উদাহরণ: Popup Open এবং Close ইভেন্ট
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.bindPopup("Click me!");
marker.on('popupopen', function() {
alert("Popup Opened!");
});
marker.on('popupclose', function() {
alert("Popup Closed!");
});
এখানে:
popupopen: পপ-আপ যখন খোলা হবে, তখন এটি কার্যকর হবে।popupclose: পপ-আপ যখন বন্ধ হবে, তখন এটি কার্যকর হবে।
১.২ Popup Click ইভেন্ট হ্যান্ডল করা
আপনি পপ-আপের উপর ক্লিক করার সময় কিছু কার্যকলাপও করতে পারেন।
উদাহরণ: Popup Click ইভেন্ট
marker.on('click', function() {
marker.openPopup(); // পপ-আপ খুলবে
});
এখানে, click ইভেন্ট ব্যবহার করে পপ-আপ ক্লিক করলে এটি খোলা হবে।
২. Tooltip Events হ্যান্ডল করা
Tooltip হল একটি ছোট তথ্য বাক্স যা সাধারণত মার্কার বা অন্যান্য শেপের উপর হোভার করলে প্রদর্শিত হয়। আপনি Tooltip এর উপরও ইভেন্ট হ্যান্ডলিং করতে পারেন, যেমন mouseover, mouseout ইত্যাদি।
২.১ Tooltip Mouseover এবং Mouseout ইভেন্ট হ্যান্ডল করা
mouseover এবং mouseout ইভেন্ট ব্যবহার করে আপনি টুলটিপের উপর হোভার এবং টুলটিপ থেকে বের হয়ে যাওয়ার সময় কিছু কার্যকলাপ করতে পারেন।
উদাহরণ: Tooltip Mouseover এবং Mouseout
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindTooltip("This is a tooltip", {
permanent: true, // টুলটিপ সবসময় দৃশ্যমান
direction: 'right'
});
marker.on('mouseover', function() {
console.log("Mouse Over Tooltip");
});
marker.on('mouseout', function() {
console.log("Mouse Out of Tooltip");
});
এখানে:
mouseover: টুলটিপের উপর মাউস হোভার করলে এটি কার্যকর হবে।mouseout: টুলটিপ থেকে মাউস বাইরে চলে গেলে এটি কার্যকর হবে।
২.২ Tooltip Open এবং Close ইভেন্ট হ্যান্ডল করা
যদিও টুলটিপ সাধারণত mouseover ইভেন্টে প্রদর্শিত হয় এবং mouseout ইভেন্টে বন্ধ হয়, তবে আপনি open এবং close ইভেন্টের মাধ্যমে টুলটিপের অবস্থান নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: Tooltip Open এবং Close ইভেন্ট
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindTooltip("Hover to see tooltip");
marker.on('tooltipopen', function() {
console.log("Tooltip Opened!");
});
marker.on('tooltipclose', function() {
console.log("Tooltip Closed!");
});
এখানে:
tooltipopen: টুলটিপ খোলার পর এই ইভেন্টটি ট্রিগার হবে।tooltipclose: টুলটিপ বন্ধ হলে এই ইভেন্টটি ট্রিগার হবে।
৩. Popup এবং Tooltip স্টাইল কাস্টমাইজেশন
LeafletJS এ পপ-আপ এবং টুলটিপের কাস্টম স্টাইলিং করার জন্য CSS ব্যবহার করা হয়।
৩.১ Popup Styling
<style>
.leaflet-popup {
background-color: lightyellow;
color: darkblue;
font-size: 14px;
padding: 15px;
border-radius: 10px;
}
</style>
এখানে:
.leaflet-popupক্লাসের মাধ্যমে পপ-আপের পটভূমি, টেক্সট রঙ, ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
৩.২ Tooltip Styling
<style>
.leaflet-tooltip {
background-color: lightblue;
color: darkgreen;
font-size: 14px;
padding: 8px;
border-radius: 5px;
}
</style>
এখানে:
.leaflet-tooltipক্লাসের মাধ্যমে টুলটিপের পটভূমি, টেক্সট রঙ, ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
সারাংশ
Popup এবং Tooltip হল LeafletJS এর দুটি অত্যন্ত শক্তিশালী ফিচার যা ম্যাপের উপর অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। আপনি mouseover, mouseout, click, open, এবং close ইভেন্টের মাধ্যমে পপ-আপ এবং টুলটিপের ইন্টারঅ্যাকশন কাস্টমাইজ করতে পারেন। এছাড়া, আপনি CSS ব্যবহার করে এগুলোর স্টাইলও কাস্টমাইজ করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত এবং আকর্ষণীয় করে তোলে।
