LeafletJS ব্যবহার করে আপনি সহজেই Popup এবং Tooltip কাস্টমাইজ করতে পারেন, যা ম্যাপের উপর অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক। আপনি HTML, CSS এবং JavaScript ব্যবহার করে পপ-আপ এবং টুলটিপের স্টাইল এবং কন্টেন্ট কাস্টমাইজ করতে পারেন।
এখানে, আমরা Popup এবং Tooltip এর কাস্টম স্টাইলিং এবং কাস্টম কন্টেন্ট কিভাবে তৈরি করা যায় তা দেখবো।
১. Custom Popup Styling
Popup একটি উইন্ডো যা ব্যবহারকারীর ক্লিক বা টাচ করার মাধ্যমে ম্যাপের উপর প্রদর্শিত হয়। আপনি পপ-আপের কাস্টম স্টাইলিং যেমন পটভূমি, টেক্সট রঙ, আকার, এবং বর্ডার পরিবর্তন করতে পারেন।
উদাহরণ: Custom Popup Styling
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);
// কাস্টম HTML পপ-আপ তৈরি
var customPopup = '<div style="background-color: lightyellow; padding: 15px; border-radius: 10px; font-size: 16px; color: darkblue;">'
+ '<strong>Custom Popup</strong><br>This is a custom styled popup!</div>';
// পপ-আপ যোগ করা
marker.bindPopup(customPopup);
CSS দিয়ে কাস্টম Popup Styling
<style>
.leaflet-popup {
background-color: lightyellow;
color: darkblue;
font-size: 16px;
padding: 15px;
border-radius: 10px;
}
</style>
এখানে:
background-color: পপ-আপের পটভূমি রঙ কাস্টমাইজ করা হয়েছে।border-radius: পপ-আপের কোণার আকার কাস্টমাইজ করা হয়েছে।font-sizeএবংcolor: টেক্সটের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।
২. Custom Tooltip Styling
Tooltip হলো একটি ছোট বার্তা যা সাধারণত একটি মার্কার বা শেপের উপর মাউস হোভার করলে প্রদর্শিত হয়। আপনি টুলটিপের স্টাইল এবং কন্টেন্ট কাস্টমাইজ করতে পারেন।
উদাহরণ: Custom Tooltip Styling
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);
// কাস্টম টুলটিপ তৈরি
var customTooltip = '<div style="background-color: lightblue; color: darkgreen; font-size: 14px; padding: 8px; border-radius: 5px;">'
+ 'This is a custom Tooltip!</div>';
// টুলটিপ যোগ করা
marker.bindTooltip(customTooltip).openTooltip();
CSS দিয়ে কাস্টম Tooltip Styling
<style>
.leaflet-tooltip {
background-color: lightblue;
color: darkgreen;
font-size: 14px;
padding: 8px;
border-radius: 5px;
}
</style>
এখানে:
background-color: টুলটিপের পটভূমি রঙ কাস্টমাইজ করা হয়েছে।color: টুলটিপের টেক্সটের রঙ কাস্টমাইজ করা হয়েছে।font-sizeএবংpadding: টুলটিপের ফন্ট সাইজ এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
৩. Dynamic Content with Custom Popup and Tooltip
Popup এবং Tooltip এ ডাইনামিক কন্টেন্ট যোগ করা যেতে পারে, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর নির্ভর করে পরিবর্তিত হতে পারে।
উদাহরণ: Dynamic Content in Custom Popup
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);
// ডাইনামিক কন্টেন্ট
var userData = {
name: "John Doe",
location: "London"
};
var dynamicPopup = `<div style="background-color: lightyellow; padding: 15px; font-size: 16px; color: darkblue;">
<strong>Name:</strong> ${userData.name}<br>
<strong>Location:</strong> ${userData.location}
</div>`;
// পপ-আপ যোগ করা
marker.bindPopup(dynamicPopup);
এখানে:
userDataঅবজেক্টের ডাইনামিক তথ্য পপ-আপে প্রদর্শিত হচ্ছে।${userData.name}এবং${userData.location}এর মাধ্যমে ডাইনামিক কন্টেন্ট টেনে আনা হচ্ছে।
উদাহরণ: Dynamic Tooltip with Custom Content
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);
// ডাইনামিক টুলটিপ কন্টেন্ট
var dynamicTooltip = "Current Time: " + new Date().toLocaleTimeString();
// টুলটিপ যোগ করা
marker.bindTooltip(dynamicTooltip).openTooltip();
এখানে:
new Date().toLocaleTimeString()ব্যবহার করে ডাইনামিক কন্টেন্ট (বর্তমান সময়) টুলটিপে প্রদর্শিত হচ্ছে।
৪. Custom Popup with HTML Content
LeafletJS আপনাকে Popup এবং Tooltip এর মধ্যে কাস্টম HTML কন্টেন্ট যোগ করার অনুমতি দেয়। আপনি HTML ট্যাগ যেমন <h1>, <p>, <img> ইত্যাদি ব্যবহার করে কাস্টম কন্টেন্ট যোগ করতে পারেন।
উদাহরণ: Custom HTML Content in Popup
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);
// কাস্টম HTML পপ-আপ তৈরি
var customPopup = '<h2>Welcome to the Custom Popup!</h2>'
+ '<p>This is a <strong>custom HTML</strong> popup. You can add <em>images</em>, <a href="#">links</a>, and much more.</p>'
+ '<img src="https://www.example.com/image.jpg" alt="Custom Image" width="200"/>';
// পপ-আপ যোগ করা
marker.bindPopup(customPopup);
এখানে:
- HTML কন্টেন্ট: পপ-আপের মধ্যে কাস্টম HTML যোগ করা হয়েছে, যেমন
<h2>,<p>,<img>।
সারাংশ
Popup এবং Tooltip হল LeafletJS এর অত্যন্ত গুরুত্বপূর্ণ ফিচার, যা ম্যাপের উপর অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। আপনি HTML, CSS, এবং JavaScript ব্যবহার করে পপ-আপ এবং টুলটিপের কাস্টম কন্টেন্ট এবং স্টাইল কাস্টমাইজ করতে পারেন। ডাইনামিক কন্টেন্ট, কাস্টম স্টাইলিং, এবং HTML কন্টেন্ট যোগ করার মাধ্যমে আপনি ম্যাপের ইন্টারঅ্যাকশন এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে পারেন।
Read more
