LeafletJS এ Popup হল একটি উইন্ডো যা ব্যবহারকারী একটি নির্দিষ্ট স্থানে ক্লিক করলে প্রদর্শিত হয়। এটি ম্যাপে কোন নির্দিষ্ট স্থানের উপর অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়, যেমন একটি টেক্সট, ছবি, লিংক বা HTML কনটেন্ট।
Popup তৈরি এবং প্রদর্শনের প্রক্রিয়া
১. Popup তৈরি করা
LeafletJS এ bindPopup() মেথড ব্যবহার করে আপনি একটি মার্কারের সাথে popup সংযুক্ত করতে পারেন। যখন ব্যবহারকারী সেই মার্কারে ক্লিক করবে, তখন পপআপটি প্রদর্শিত হবে।
Syntax:
marker.bindPopup("<b>Some Text</b>").openPopup();
এখানে, <b>Some Text</b> হলো সেই কনটেন্ট যা পপআপে দেখানো হবে।
উদাহরণ: Popup সহ মার্কার তৈরি
নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি মার্কারের সাথে popup যুক্ত করা হয়েছে। মার্কারে ক্লিক করলে পপআপ উইন্ডোতে কিছু টেক্সট দেখানো হবে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Popup Example</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map" style="height: 500px;"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// ম্যাপ তৈরি এবং কেন্দ্র সেট করা
var map = L.map('map').setView([51.505, -0.09], 13);
// Tile Layer যোগ করা
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();
</script>
</body>
</html>
এখানে:
L.marker([51.5, -0.09]): এটি একটি মার্কার তৈরি করে নির্দিষ্ট স্থান[51.5, -0.09]এ।bindPopup("<b>Hello World!</b><br>This is a popup."): এই লাইনে মার্কারের সাথে একটি পপআপ যুক্ত করা হয়েছে, যেখানে HTML ট্যাগ ব্যবহার করে কিছু কনটেন্ট প্রদর্শিত হবে।openPopup(): এটি পপআপটিকে স্বয়ংক্রিয়ভাবে ওপেন করবে, অর্থাৎ যখন পেজ লোড হবে তখনই পপআপটি প্রদর্শিত হবে।
২. Popup কাস্টমাইজ করা
পপআপে আপনি কেবল সাধারণ টেক্সটই নয়, HTML কনটেন্ট, ছবি বা লিংকও রাখতে পারেন। উদাহরণস্বরূপ:
marker.bindPopup('<h3>My Location</h3><img src="image.jpg" alt="Image" width="100%">');
এটি পপআপে একটি হেডিং এবং একটি ছবি প্রদর্শন করবে।
৩. একাধিক Popup ব্যবহার করা
আপনি একাধিক মার্কার বা পপআপ সহ আরো অনেকটি এলিমেন্ট ম্যাপে যুক্ত করতে পারেন। উদাহরণস্বরূপ:
var marker1 = L.marker([51.5, -0.09]).addTo(map);
marker1.bindPopup("<b>Marker 1</b><br>First marker popup.");
var marker2 = L.marker([51.6, -0.08]).addTo(map);
marker2.bindPopup("<b>Marker 2</b><br>Second marker popup.");
এখানে দুটি মার্কার তৈরি করা হয়েছে এবং তাদের সাথে দুটি আলাদা পপআপ যুক্ত করা হয়েছে।
সারাংশ
LeafletJS এ bindPopup() মেথড ব্যবহার করে আপনি ম্যাপে একটি মার্কারের সাথে পপআপ যুক্ত করতে পারেন। পপআপ ব্যবহারকারীকে নির্দিষ্ট স্থানের উপর অতিরিক্ত তথ্য দেখানোর সুযোগ দেয়, যা HTML কনটেন্ট, ছবি, টেক্সট বা লিংক হতে পারে। এটি ওয়েব ম্যাপিং অ্যাপ্লিকেশনে খুবই গুরুত্বপূর্ণ একটি ফিচার, যা ম্যাপের ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
Read more
