LeafletJS এর Popup একটি গুরুত্বপূর্ণ উপাদান যা ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ তথ্য প্রদর্শন করতে ব্যবহৃত হয়। একটি Popup সাধারণত ম্যাপে কোনো মার্কার বা অন্য কোনো উপাদানের সাথে সংযুক্ত হয় এবং এটি ক্লিক করলে বা হোভার করলে ব্যবহারকারীকে অতিরিক্ত তথ্য দেখাতে সহায়তা করে।
LeafletJS এ Popup তৈরি এবং প্রদর্শন করার জন্য bindPopup() ফাংশন ব্যবহার করা হয়।
Popup তৈরি করা
১. Popup তৈরি এবং মার্কারের সাথে সংযুক্ত করা
প্রথমে একটি marker তৈরি করা হবে, এবং সেটির সাথে একটি পপ-আপ সংযুক্ত করা হবে।
উদাহরণ:
// ম্যাপ তৈরি করা
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)
.bindPopup("<b>Hello world!</b><br>This is a popup.")
.openPopup(); // পপ-আপটি স্বয়ংক্রিয়ভাবে খোলা হবে
এখানে:
L.marker([51.5, -0.09]): একটি মার্কার তৈরি করা হয়েছে এবং ম্যাপে যোগ করা হয়েছে।bindPopup(): এই ফাংশনটি মার্কারের সাথে পপ-আপ যোগ করতে ব্যবহৃত হয়েছে। পপ-আপের ভিতরে HTML কনটেন্ট দেয়া হয়েছে।openPopup(): পপ-আপটি স্বয়ংক্রিয়ভাবে খোলার জন্য ব্যবহার করা হয়েছে।
২. Popup কাস্টমাইজেশন
Popup এর কন্টেন্ট কাস্টমাইজ করতে আপনি HTML, CSS বা JavaScript ব্যবহার করতে পারেন। আপনি চাইলে কাস্টম স্টাইলিং, ইমেজ, লিঙ্ক বা অন্যান্য HTML উপাদানও যোগ করতে পারবেন।
উদাহরণ:
var marker = L.marker([51.5, -0.09]).addTo(map);
var popupContent = `
<div style="color: blue; font-size: 16px;">
<h3>Custom Popup</h3>
<p>This is a custom styled popup with an <a href="https://www.example.com" target="_blank">example link</a>.</p>
<img src="https://via.placeholder.com/150" alt="Example Image">
</div>
`;
marker.bindPopup(popupContent).openPopup();
এখানে:
popupContentএ HTML কনটেন্টের মাধ্যমে স্টাইলিং এবং ছবি যোগ করা হয়েছে।
৩. Popup এবং অন্যান্য উপাদানগুলির সাথে ইন্টারঅ্যাকশন
Popup এর সাথে আপনি অন্যান্য উপাদানগুলির ইন্টারঅ্যাকশন যোগ করতে পারেন, যেমন mouse events, form elements, dynamic data ইত্যাদি।
উদাহরণ: ইন্টারঅ্যাকটিভ Popup
var marker = L.marker([51.5, -0.09]).addTo(map);
var popupContent = `
<div>
<p>Click the button to change the popup content:</p>
<button id="changePopup">Change Popup Content</button>
</div>
`;
var popup = marker.bindPopup(popupContent);
document.getElementById("changePopup").addEventListener("click", function() {
popup.setContent("The popup content has been changed!");
});
popup.openPopup();
এখানে:
setContent()ফাংশন ব্যবহার করে পপ-আপের কন্টেন্ট ডায়নামিকভাবে পরিবর্তন করা হয়েছে যখন ব্যবহারকারী বোতামে ক্লিক করেন।
৪. Multiple Popups (একাধিক পপ-আপ)
একাধিক পপ-আপ তৈরি করা এবং তাদেরকে ম্যাপে যোগ করা সম্ভব। একাধিক মার্কার বা পলিগনের সাথে পপ-আপ যুক্ত করা যায়।
উদাহরণ: একাধিক পপ-আপ
var marker1 = L.marker([51.5, -0.09]).addTo(map).bindPopup("Popup 1");
var marker2 = L.marker([51.51, -0.1]).addTo(map).bindPopup("Popup 2");
var marker3 = L.marker([51.52, -0.11]).addTo(map).bindPopup("Popup 3");
এখানে, তিনটি আলাদা মার্কার তৈরি করা হয়েছে এবং তাদের প্রতিটির সাথে একটি পপ-আপ যোগ করা হয়েছে।
৫. Custom Popup Positioning
LeafletJS এ পপ-আপের অবস্থান কাস্টমাইজ করা যায়। সাধারণত পপ-আপটি মার্কারের ঠিক উপরে বা পাশে প্রদর্শিত হয়, তবে আপনি চাইলে এটি অন্য কোথাও পজিশন করতে পারেন।
উদাহরণ: পপ-আপের পজিশন কাস্টমাইজ করা
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("Custom Positioned Popup", {
offset: L.point(0, -30) // পপ-আপটির অবস্থান উপরের দিকে 30 পিক্সেল সেট করা হয়েছে
}).openPopup();
এখানে, offset ব্যবহার করে পপ-আপের অবস্থান কাস্টমাইজ করা হয়েছে।
সারাংশ
LeafletJS এ Popup তৈরি করা এবং প্রদর্শন করা খুবই সহজ। আপনি bindPopup() ফাংশন ব্যবহার করে পপ-আপ তৈরি করতে পারেন এবং কাস্টম HTML কনটেন্ট, স্টাইল, ছবি, লিঙ্ক ইত্যাদি যোগ করতে পারেন। আপনি পপ-আপের অবস্থানও কাস্টমাইজ করতে পারেন এবং এতে ডায়নামিক কন্টেন্ট, ইন্টারঅ্যাকটিভ বাটন, বা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে কন্টেন্ট পরিবর্তনও করতে পারেন।
Read more
