LeafletJS তে Popup এবং Tooltip হল ইন্টারঅ্যাকটিভ ফিচার, যা ম্যাপের উপর বিভিন্ন তথ্য প্রদর্শন করতে ব্যবহৃত হয়। Popup সাধারণত ক্লিক ইভেন্টের মাধ্যমে প্রদর্শিত হয় এবং ব্যবহারকারীর সাথে তথ্য শেয়ার করতে সাহায্য করে, যেখানে Tooltip মাউস হোভার করার সময় প্রদর্শিত হয় এবং এটি সাধারণত ছোট তথ্য বা ব্যাখ্যা প্রদান করে। এই দুটি উপাদান ম্যাপিং অ্যাপ্লিকেশনগুলিতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
১. Popup Integration
Popup হল একটি ডায়ালগ বক্স বা ইনফো উইন্ডো যা সাধারণত একটি নির্দিষ্ট স্থানে ক্লিক করলে প্রদর্শিত হয়। এটি ম্যাপের উপর নির্দিষ্ট তথ্য প্রদর্শন করতে ব্যবহৃত হয়, যেমন কোনো নির্দিষ্ট অবস্থান বা জিওস্পেশাল ডেটার ব্যাখ্যা।
উদাহরণ: Popup তৈরি এবং যুক্ত করা
// ম্যাপ তৈরি
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);
marker.bindPopup("<b>Hello world!</b><br>This is a popup.").openPopup();
এখানে:
- bindPopup() ফাংশনটি ব্যবহার করে মার্কারে একটি পপ-আপ যোগ করা হয়েছে।
- openPopup() ফাংশনটি পপ-আপটি স্বয়ংক্রিয়ভাবে খুলে দেয়।
Popup কাস্টমাইজেশন
Popup এর ভিউ, আকার এবং কন্টেন্ট কাস্টমাইজ করা যায়। নিচে একটি কাস্টম Popup স্টাইলিং এর উদাহরণ দেওয়া হলো:
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<div style='color: red;'>This is a custom popup!</div>");
এখানে, Popup এর ভিতরে HTML কন্টেন্ট ব্যবহার করে কাস্টম স্টাইল যোগ করা হয়েছে।
২. Tooltip Integration
Tooltip হল একটি ছোট বার্তা যা সাধারণত মাউস হোভার করার সময় প্রদর্শিত হয়। এটি সাধারণত একটি উপাদান বা স্থান সম্পর্কে দ্রুত তথ্য প্রদান করতে ব্যবহৃত হয়। Tooltips সাধারণত স্বল্প এবং সংক্ষিপ্ত তথ্য প্রদান করে, যেমন "মাউস হোভার করলে দেখাবে"।
উদাহরণ: Tooltip তৈরি এবং যুক্ত করা
// একটি মার্কার তৈরি এবং টুলটিপ যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindTooltip("This is a tooltip").openTooltip();
এখানে:
- bindTooltip() ফাংশনটি ব্যবহার করে মার্কারের উপর একটি টুলটিপ যোগ করা হয়েছে।
- openTooltip() ফাংশনটি টুলটিপটি স্বয়ংক্রিয়ভাবে খুলে দেয়।
Tooltip কাস্টমাইজেশন
Tooltips কাস্টমাইজ করা যায় যেমন আকার, রঙ, অবস্থান এবং কন্টেন্ট দিয়ে। নিচে একটি কাস্টম Tooltip উদাহরণ দেয়া হলো:
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindTooltip("<span style='color: blue;'>Custom Tooltip</span>", {
permanent: true, // টুলটিপ স্থায়ী
direction: "right" // টুলটিপের অবস্থান
}).openTooltip();
এখানে:
- permanent: true: টুলটিপটি স্থায়ীভাবে প্রদর্শিত হবে।
- direction: "right": টুলটিপের অবস্থানকে মার্কারের ডান দিকে নির্ধারণ করা হয়েছে।
৩. Popup এবং Tooltip এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Popup | Tooltip |
|---|---|---|
| প্রদর্শন | ক্লিক করার পরে | মাউস হোভার করার পরে |
| কাস্টমাইজেশন | কাস্টম HTML, স্টাইলিং, লম্বা বার্তা | সাধারণত ছোট বার্তা, HTML কন্টেন্ট |
| অবস্থান | নির্দিষ্ট স্থানে প্রদর্শিত হয় | মার্কারের উপর হোভার করা হলে প্রদর্শিত হয় |
| স্বাভাবিক সময়কাল | ব্যবহারকারী ক্লিক করার পর বন্ধ হয় | মাউস থেকে সরালে টুলটিপটি বন্ধ হয়ে যায় |
৪. Popup এবং Tooltip ইভেন্ট হ্যান্ডলিং
Popup এবং Tooltip এ বিভিন্ন ধরনের ইভেন্ট হ্যান্ডলিং যোগ করা যায় যেমন ক্লিক, মাউসওভার, মাউসআউট ইত্যাদি।
উদাহরণ: Popup ইভেন্ট হ্যান্ডলিং
marker.on('popupopen', function() {
console.log('Popup opened');
});
marker.on('popupclose', function() {
console.log('Popup closed');
});
এখানে:
- popupopen ইভেন্টটি তখন ট্রিগার হয় যখন পপ-আপ খুলে।
- popupclose ইভেন্টটি তখন ট্রিগার হয় যখন পপ-আপ বন্ধ হয়।
উদাহরণ: Tooltip ইভেন্ট হ্যান্ডলিং
marker.on('tooltipopen', function() {
console.log('Tooltip opened');
});
marker.on('tooltipclose', function() {
console.log('Tooltip closed');
});
এখানে:
- tooltipopen ইভেন্টটি তখন ট্রিগার হয় যখন টুলটিপ খুলে।
- tooltipclose ইভেন্টটি তখন ট্রিগার হয় যখন টুলটিপ বন্ধ হয়।
সারাংশ
LeafletJS এ Popup এবং Tooltip ব্যবহার করে আপনি ম্যাপে ইন্টারঅ্যাকটিভ বার্তা, তথ্য বা ব্যাখ্যা প্রদর্শন করতে পারেন। Popup ব্যবহারকারীকে বিস্তারিত তথ্য দিতে পারে, যা ক্লিক করলে প্রদর্শিত হয়, এবং Tooltip ছোট বার্তা প্রদর্শন করে যখন ব্যবহারকারী মার্কারের উপর হোভার করে। এই দুটি উপাদান ম্যাপের ইন্টারঅ্যাকটিভতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে, এবং আপনি এগুলির স্টাইল, কাস্টমাইজেশন এবং ইভেন্ট হ্যান্ডলিংও করতে পারেন।
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 কনটেন্ট, স্টাইল, ছবি, লিঙ্ক ইত্যাদি যোগ করতে পারেন। আপনি পপ-আপের অবস্থানও কাস্টমাইজ করতে পারেন এবং এতে ডায়নামিক কন্টেন্ট, ইন্টারঅ্যাকটিভ বাটন, বা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে কন্টেন্ট পরিবর্তনও করতে পারেন।
Tooltip হলো একটি ছোট উইন্ডো বা বার্তা, যা ব্যবহারকারীর ক্লিক বা হোভার করার পর দেখানো হয়। এটি সাধারণত কোনও পয়েন্ট, মার্কার বা এলাকা সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহৃত হয়। LeafletJS এ Tooltip তৈরি এবং ব্যবহারের জন্য সহজ এবং সরল পদ্ধতি রয়েছে।
Tooltip তৈরি করা
LeafletJS তে Tooltip তৈরি করতে bindTooltip() মেথড ব্যবহার করা হয়। এটি সাধারণত কোনো লেয়ার বা মার্কারের সাথে যুক্ত থাকে এবং ব্যবহারকারী যখন সেই লেয়ারে হোভার বা ক্লিক করে তখন তা প্রদর্শিত হয়।
উদাহরণ ১: একটি সহজ Tooltip তৈরি করা
// ম্যাপ তৈরি
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);
// একটি মার্কার তৈরি এবং Tooltip যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি Tooltip।")
.openTooltip();
এখানে:
- bindTooltip() মেথড ব্যবহার করে একটি Tooltip যুক্ত করা হয়েছে।
- openTooltip() মেথড দ্বারা Tooltipটি প্রথমে খুলে দেওয়া হয়েছে (যদি আপনি চাচ্ছেন যে এটি ইনিশিয়ালি খোলা থাকবে)।
Tooltip কাস্টমাইজ করা
LeafletJS এ Tooltips কাস্টমাইজ করা খুব সহজ। আপনি Tooltip এর পজিশন, স্টাইল, কনটেন্ট এবং অন্যান্য সেটিংস কাস্টমাইজ করতে পারেন।
উদাহরণ ২: Tooltip এর কাস্টম স্টাইল এবং পজিশন কাস্টমাইজ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি কাস্টম Tooltip।", {
permanent: true, // Tooltip স্থায়ী হবে
direction: "top", // Tooltip এর পজিশন
className: "custom-tooltip", // Tooltip এর জন্য কাস্টম ক্লাস
opacity: 0.8 // Tooltip এর স্বচ্ছতা
});
এখানে:
permanent: true: Tooltipটি স্থায়ী হবে এবং এটি মার্কারের উপর থেকে চলে যাবে না।direction: "top": Tooltipটি মার্কারের উপরে প্রদর্শিত হবে।className: "custom-tooltip": Tooltip এর জন্য একটি কাস্টম CSS ক্লাস নির্ধারণ করা হয়েছে।opacity: 0.8: Tooltip এর স্বচ্ছতা কাস্টমাইজ করা হয়েছে।
এখন আপনি CSS দিয়ে custom-tooltip ক্লাসের স্টাইল কাস্টমাইজ করতে পারেন।
.custom-tooltip {
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
}
Tooltip এর কাস্টম HTML কনটেন্ট ব্যবহার করা
Tooltip এর কনটেন্টটি সাধারণত টেক্সট হয়, তবে আপনি চাইলে HTML কনটেন্টও ব্যবহার করতে পারেন। যেমন, আপনি ইমেজ, লিঙ্ক বা অন্যান্য HTML উপাদান Tooltip এর মধ্যে রাখতে পারেন।
উদাহরণ ৩: Tooltip এ HTML কনটেন্ট ব্যবহার করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip('<b>HTML কনটেন্ট:</b> <br><img src="https://example.com/image.jpg" width="100px">')
.openTooltip();
এখানে:
- Tooltip এর মধ্যে HTML কনটেন্ট দেওয়া হয়েছে যেমন ইমেজ এবং টেক্সট।
Tooltip ইভেন্ট হ্যান্ডলিং
LeafletJS তে আপনি Tooltip এর উপর ইভেন্ট হ্যান্ডলিং যোগ করতে পারেন, যেমন mouseover, mouseout, click ইত্যাদি।
উদাহরণ ৪: Tooltip এ ইভেন্ট যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("Hover me!", { permanent: false, direction: "top" })
.on('mouseover', function () {
this.openTooltip();
})
.on('mouseout', function () {
this.closeTooltip();
});
এখানে:
- mouseover ইভেন্টে, Tooltip ওপেন করা হয়েছে।
- mouseout ইভেন্টে, Tooltip বন্ধ করা হয়েছে।
Tooltip এর স্থায়ী এবং অনুপস্থিত অবস্থান
Tooltip দুটি প্রধান অবস্থানে থাকতে পারে:
- স্থায়ী (Permanent): Tooltip ম্যাপের মধ্যে স্থায়ীভাবে প্রদর্শিত হবে।
- অনুপস্থিত (Non-Permanent): Tooltip শুধু যখন ব্যবহারকারী মাউস দিয়ে মার্কারের উপর যাবে, তখনই দেখাবে।
উদাহরণ ৫: স্থায়ী Tooltip তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindTooltip("এটি একটি স্থায়ী Tooltip।", { permanent: true })
.openTooltip();
এখানে:
permanent: trueসেট করে Tooltip স্থায়ী করা হয়েছে।
সারাংশ
LeafletJS এ Tooltip একটি খুবই গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য প্রদান করতে ব্যবহৃত হয়। আপনি Tooltip এর কনটেন্ট, পজিশন, স্টাইল এবং ইভেন্ট কাস্টমাইজ করতে পারেন। এটি পয়েন্ট, মার্কার, লাইন, পলিগন বা অন্য যেকোনো লেয়ারের সাথে যুক্ত করা যেতে পারে এবং এটি ইনস্ট্যান্টলি প্রদর্শিত হয় অথবা স্থায়ীভাবে সেট করা যেতে পারে।
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 কন্টেন্ট যোগ করার মাধ্যমে আপনি ম্যাপের ইন্টারঅ্যাকশন এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে পারেন।
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 ব্যবহার করে এগুলোর স্টাইলও কাস্টমাইজ করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত এবং আকর্ষণীয় করে তোলে।
Read more
