LeafletJS এর মাধ্যমে আপনি সহজেই markers (মার্কার) এবং popups (পপ-আপ) ব্যবহার করে ম্যাপের উপর বিভিন্ন পয়েন্টে তথ্য প্রদর্শন করতে পারেন। এগুলো ইন্টারেক্টিভ ম্যাপ তৈরির জন্য খুবই গুরুত্বপূর্ণ এবং আকর্ষণীয় উপাদান।
Markers (মার্কার)
LeafletJS এ marker হচ্ছে ম্যাপের একটি পয়েন্ট যা ব্যবহারকারীদের চোখে পড়ে এবং এতে কোনো নির্দিষ্ট স্থানের তথ্য প্রদর্শন করা হয়। মার্কার সাধারণত ম্যাপের উপর গুরুত্বপূর্ণ পজিশন বা জিওস্পেশাল ডেটার প্রতিনিধিত্ব করতে ব্যবহৃত হয়।
Marker তৈরি করা
মার্কার তৈরি করার জন্য L.marker() ফাংশন ব্যবহার করতে হয়, এবং এটি ম্যাপের একটি নির্দিষ্ট স্থান (latitude, longitude) এ বসানো হয়।
নিম্নলিখিত উদাহরণে, একটি মার্কার তৈরি করা হয়েছে যা ম্যাপের নির্দিষ্ট স্থানে রাখা হয়েছে:
// ম্যাপ তৈরি করা
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);
এখানে, মার্কারটি [51.5, -0.09] অবস্থানে বসানো হয়েছে এবং addTo(map) এর মাধ্যমে এটি ম্যাপে যোগ করা হয়েছে।
কাস্টম মার্কার ব্যবহার
আপনি চাইলে মার্কারের জন্য কাস্টম আইকনও ব্যবহার করতে পারেন। এটি করার জন্য L.icon() ফাংশন ব্যবহার করা হয়। উদাহরণস্বরূপ:
var customIcon = L.icon({
iconUrl: 'marker-icon.png', // আপনার কাস্টম আইকনের URL
iconSize: [32, 32], // আইকনের সাইজ
iconAnchor: [16, 32], // আইকনের অ্যানকর পজিশন
popupAnchor: [0, -32] // পপ-আপ এর অবস্থান
});
// কাস্টম আইকন সহ একটি মার্কার তৈরি করা
var markerWithCustomIcon = L.marker([51.5, -0.09], {icon: customIcon}).addTo(map);
এখানে marker-icon.png হলো কাস্টম আইকনের পাথ, যা আপনি নিজের মতো করে ডেভেলপ করতে পারেন।
Popups (পপ-আপ)
Popup একটি ছোট উইন্ডো যা সাধারণত মার্কারের সাথে যুক্ত থাকে এবং ব্যবহারকারী যখন মার্কারে ক্লিক করেন, তখন পপ-আপ উইন্ডোটি প্রদর্শিত হয়। এটি ম্যাপে বিস্তারিত তথ্য, ইমেজ, লিঙ্ক ইত্যাদি দেখানোর জন্য ব্যবহৃত হয়।
Popup যুক্ত করা
LeafletJS এ মার্কারের সাথে পপ-আপ যুক্ত করতে bindPopup() ফাংশন ব্যবহার করা হয়।
নিচে একটি উদাহরণ দেওয়া হলো:
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// পপ-আপ যুক্ত করা
marker.bindPopup("<b>এটি একটি মার্কার!</b><br>এই জায়গায় ক্লিক করলে পপ-আপ দেখা যাবে.");
এখানে, bindPopup() ফাংশনের মাধ্যমে আপনি মার্কারে ক্লিক করলে যে কনটেন্ট প্রদর্শিত হবে তা নির্ধারণ করতে পারেন। এটি HTML কনটেন্টও সাপোর্ট করে, যেমন <b>, <br>, ইত্যাদি।
পপ-আপটি খুলে রাখা
পপ-আপ সাধারণত ব্যবহারকারীর ক্লিক করার পর প্রদর্শিত হয়, তবে আপনি চাইলে এটি আগে থেকেই খোলা রাখতে পারেন। এটি করার জন্য openPopup() ফাংশন ব্যবহার করা হয়:
// মার্কার সহ পপ-আপ ওপেন করা
marker.bindPopup("<b>এটি একটি আগেই খোলা পপ-আপ!</b>").openPopup();
এটি পপ-আপটি খোলার সাথে সাথে মার্কারের উপর দৃশ্যমান করবে।
একাধিক মার্কার এবং পপ-আপ
LeafletJS এ আপনি একাধিক মার্কার এবং পপ-আপ তৈরি করতে পারেন। উদাহরণস্বরূপ:
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// লেয়ার যোগ করা
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 marker1 = L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>মার্কার ১</b><br>এই মার্কারটি প্রথম স্থানে।");
// দ্বিতীয় মার্কার তৈরি
var marker2 = L.marker([51.6, -0.1]).addTo(map)
.bindPopup("<b>মার্কার ২</b><br>এই মার্কারটি দ্বিতীয় স্থানে।");
এখানে দুটি মার্কার এবং তাদের পপ-আপ যুক্ত করা হয়েছে।
সারাংশ
LeafletJS এর Markers এবং Popups ব্যবহার করে আপনি আপনার ম্যাপের উপর গুরুত্বপূর্ণ স্থানগুলো চিহ্নিত করতে পারেন এবং সেখানে অতিরিক্ত তথ্য প্রদর্শন করতে পারেন। মার্কারের সাথে কাস্টম আইকন ব্যবহার এবং পপ-আপ এর মাধ্যমে বিভিন্ন ধরনের কনটেন্ট (টেক্সট, লিঙ্ক, ইমেজ) প্রদর্শন করা যায়, যা ব্যবহারকারীদের জন্য ইন্টারেক্টিভ এবং তথ্যপূর্ণ অভিজ্ঞতা প্রদান করে।
LeafletJS এ Markers এমন বিশেষ চিহ্ন (symbol) যা ম্যাপে নির্দিষ্ট স্থান বা অবস্থান নির্দেশ করার জন্য ব্যবহৃত হয়। এটি একটি ইন্টারেক্টিভ উপাদান, যা ব্যবহারকারীকে ম্যাপের নির্দিষ্ট স্থান সম্পর্কে জানাতে বা তথ্য প্রদান করতে সাহায্য করে। সাধারণত, Markers কোন নির্দিষ্ট স্থান যেমন শহর, স্থাপনা, বা বিশেষ বস্তুর অবস্থান প্রদর্শন করতে ব্যবহৃত হয়।
Markers এর মূল বৈশিষ্ট্য
- স্থান চিহ্নিত করা (Location Marking): Markers মূলত ম্যাপে স্থান নির্ধারণের জন্য ব্যবহার করা হয়। এর মাধ্যমে কোনও নির্দিষ্ট স্থান বা অঞ্চলের অবস্থান বোঝানো হয়।
- ইন্টারেক্টিভ উপাদান (Interactive Element): Markers এর সাথে পপ-আপ, ইভেন্ট বা অন্যান্য ইন্টারঅ্যাকটিভ ফিচার যুক্ত করা যায়।
- কাস্টমাইজেশন (Customization): Markers এর রঙ, আকার এবং আইকন ইত্যাদি কাস্টমাইজ করা যেতে পারে।
Markers কিভাবে কাজ করে?
LeafletJS এ Markers তৈরি করতে L.marker() ফাংশন ব্যবহার করা হয়। এই ফাংশনের মাধ্যমে আপনি ম্যাপে একটি মার্কার স্থাপন করতে পারেন, এবং সেটি নির্দিষ্ট কোঅর্ডিনেটে (latitude, longitude) থাকবে। পাশাপাশি, আপনি মার্কারের সাথে একটি পপ-আপ বা ইভেন্ট যুক্ত করতে পারেন।
Markers তৈরি করার উদাহরণ:
<script>
// ম্যাপ তৈরি করা
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>এটি একটি মার্কার</b><br>এখানে কিছু তথ্য রয়েছে।").openPopup();
</script>
এখানে:
L.marker(): এটি একটি মার্কার তৈরি করে এবং নির্দিষ্ট কোঅর্ডিনেটে (latitude, longitude) সেটি স্থাপন করে।bindPopup(): মার্কারের উপর ক্লিক করলে একটি পপ-আপ উইন্ডো প্রদর্শিত হবে, যা এখানে কিছু তথ্য প্রদান করছে।
Markers কাস্টমাইজেশন
LeafletJS এ Markers কাস্টমাইজ করা সম্ভব। আপনি সহজেই মার্কারের আকার, রঙ এবং আইকন পরিবর্তন করতে পারেন। এর জন্য icon অপশন ব্যবহার করা হয়।
কাস্টম মার্কার আইকন ব্যবহার:
<script>
var customIcon = L.icon({
iconUrl: 'https://example.com/marker-icon.png', // কাস্টম আইকন URL
iconSize: [32, 32], // আইকনের আকার
iconAnchor: [16, 32], // আইকনের অবস্থান
popupAnchor: [0, -32] // পপ-আপের অবস্থান
});
var marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);
marker.bindPopup("<b>কাস্টম মার্কার</b><br>এটি একটি কাস্টম আইকন সহ মার্কার।");
</script>
এখানে:
iconUrl: মার্কারের জন্য কাস্টম আইকনের URL।iconSize: আইকনের আকার নির্ধারণ করে।iconAnchor: আইকনের অবস্থান সেট করে, যাতে এটি সঠিক স্থানে প্রদর্শিত হয়।
Markers এর ইভেন্ট
LeafletJS এ Markers এর সাথে বিভিন্ন ইভেন্ট যুক্ত করা যায়, যেমন ক্লিক, ডাবল ক্লিক, মাউস ওভার ইত্যাদি। এর মাধ্যমে আপনি ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য রেসপন্স তৈরি করতে পারেন।
মার্কারে ক্লিক ইভেন্ট যুক্ত করা:
<script>
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.on('click', function() {
alert("মার্কার উপর ক্লিক করা হয়েছে!");
});
</script>
এখানে:
on('click', function() {...}): মার্কারের উপর ক্লিক করলে একটি পপ-আপ বা কাস্টম ফাংশন ট্রিগার হবে।
সারাংশ
LeafletJS এ Markers হল ম্যাপে নির্দিষ্ট স্থান চিহ্নিত করার জন্য ব্যবহৃত একটি গুরুত্বপূর্ণ উপাদান। এর মাধ্যমে আপনি শুধুমাত্র স্থান চিহ্নিত করতে পারেন না, বরং মার্কারের সাথে বিভিন্ন ধরনের ইন্টারেকশন, কাস্টম আইকন এবং পপ-আপ যোগ করতে পারেন। Markers আপনাকে ইন্টারেক্টিভ ম্যাপিং অভিজ্ঞতা তৈরি করতে সাহায্য করে, যা বিভিন্ন ওয়েব অ্যাপ্লিকেশনে ব্যবহার করা হয়।
LeafletJS তে Markers একটি গুরুত্বপূর্ণ উপাদান, যা ম্যাপের উপর পয়েন্ট বা স্থান চিহ্নিত করার জন্য ব্যবহৃত হয়। আপনি বিভিন্ন ধরনের মার্কার যুক্ত করতে পারেন এবং তাদের কাস্টমাইজও করতে পারেন যেমন বিভিন্ন ছবি, আইকন বা অন্যান্য বৈশিষ্ট্য ব্যবহার করে।
Markers যোগ করা
Markers ম্যাপে যোগ করতে আপনি L.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);
এখানে, L.marker([51.5, -0.09]) দিয়ে একটি মার্কার তৈরি করা হয়েছে এবং addTo(map) দিয়ে সেটি ম্যাপে যুক্ত করা হয়েছে।
Markers কাস্টমাইজ করা
LeafletJS এ আপনি মার্কারের চেহারা এবং আচরণ কাস্টমাইজ করতে পারেন, যেমন কাস্টম আইকন ব্যবহার করা, পপ-আপ যোগ করা, এবং আরও অনেক কিছু।
১. কাস্টম আইকন ব্যবহার করা
মার্কার আইকন কাস্টমাইজ করতে, L.icon() ফাংশন ব্যবহার করতে হয়, যেখানে আপনি আইকনের আকার, ছবি ইত্যাদি সেট করতে পারেন।
উদাহরণ:
var customIcon = L.icon({
iconUrl: 'https://example.com/custom-icon.png', // কাস্টম আইকনের ইউআরএল
iconSize: [32, 32], // আইকনের সাইজ
iconAnchor: [16, 32], // আইকনের অ্যানচার পয়েন্ট
popupAnchor: [0, -32] // পপ-আপ এর অ্যানচার পয়েন্ট
});
// কাস্টম আইকন সহ মার্কার তৈরি
var marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);
এখানে iconUrl দিয়ে কাস্টম আইকনের ছবি দেওয়া হয়েছে এবং iconSize দিয়ে আইকনের আকার নির্ধারণ করা হয়েছে।
২. পপ-আপ যোগ করা
মার্কারের সাথে পপ-আপ যোগ করতে bindPopup() ফাংশন ব্যবহার করা হয়, যা ব্যবহারকারীর ক্লিক করার পর প্রদর্শিত হয়।
উদাহরণ:
var marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);
// পপ-আপ যোগ করা
marker.bindPopup("<b>Hello world!</b><br>I am a custom popup.").openPopup();
এখানে, bindPopup() ফাংশনটি ব্যবহার করে একটি পপ-আপ যোগ করা হয়েছে, যা ব্যবহারকারীর ক্লিক করার পর প্রদর্শিত হবে।
৩. ইভেন্ট হ্যান্ডলিং (Event Handling)
মার্কার উপর ইভেন্ট হ্যান্ডলিং যোগ করা খুবই সহজ। আপনি on() মেথড ব্যবহার করে মার্কারের উপর ক্লিক ইভেন্ট বা অন্য কোনো ইভেন্ট ট্র্যাক করতে পারেন।
উদাহরণ:
marker.on('click', function() {
alert("মার্কারে ক্লিক করা হয়েছে!");
});
এখানে, মার্কারে ক্লিক করলে একটি এলার্ট মেসেজ প্রদর্শিত হবে।
Markers এর উন্নত কাস্টমাইজেশন
LeafletJS এ মার্কার কাস্টমাইজেশন অনেক বেশি এগিয়ে, যেমন আপনি মার্কারকে ড্র্যাগেবল, বিভিন্ন স্টাইল বা এনিমেশনও দিতে পারেন।
১. ড্র্যাগেবল মার্কার
মার্কারকে ড্র্যাগেবল বানাতে draggable অপশন ব্যবহার করতে পারেন:
var draggableMarker = L.marker([51.5, -0.09], { draggable: true }).addTo(map);
এখানে, draggable: true দিয়ে মার্কারকে ড্র্যাগ করা যাবে।
২. বিভিন্ন স্টাইল প্রয়োগ
মার্কার স্টাইল পরিবর্তন করতে আপনি setStyle() ফাংশন ব্যবহার করতে পারেন, যা মার্কারের আকার বা রঙ পরিবর্তন করতে সহায়তা করে।
সারাংশ
LeafletJS এ মার্কার যোগ করা এবং কাস্টমাইজ করা সহজ এবং অত্যন্ত কার্যকরী। আপনি মার্কারের আইকন, আকার, পপ-আপ, ইভেন্ট হ্যান্ডলিং ইত্যাদি কাস্টমাইজ করে একটি সম্পূর্ণ ইন্টারেক্টিভ ম্যাপ তৈরি করতে পারেন। এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ ও কার্যকরী অভিজ্ঞতা প্রদান করতে পারবেন।
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 কনটেন্ট, ছবি, টেক্সট বা লিংক হতে পারে। এটি ওয়েব ম্যাপিং অ্যাপ্লিকেশনে খুবই গুরুত্বপূর্ণ একটি ফিচার, যা ম্যাপের ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
LeafletJS একটি শক্তিশালী টুল যা ব্যবহারকারীদের জন্য ইন্টারেকটিভ ম্যাপ তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ধরনের ইভেন্ট (যেমন ক্লিক বা হোভার) এবং কাস্টম পপ-আপ তৈরি করতে পারেন। এটি ওয়েবসাইটে ব্যবহারকারীর ইন্টারঅ্যাকশন বাড়ানোর জন্য অত্যন্ত কার্যকরী।
মার্কার ইভেন্টস
১. ক্লিক ইভেন্ট (Click Event)
মার্কার উপর ক্লিক করা হলে কিছু অ্যাকশন বা কার্যকলাপ করতে পারবেন, যেমন পপ-আপ দেখানো, কাস্টম স্টাইল প্রয়োগ করা ইত্যাদি।
উদাহরণ:
// একটি ম্যাপ তৈরি করা
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.on('click', function() {
alert('মার্কারে ক্লিক করা হয়েছে!');
});
এখানে, যখন ব্যবহারকারী মার্কারের উপর ক্লিক করবেন, তখন একটি পপ-আপ উইন্ডো প্রদর্শিত হবে যা "মার্কারে ক্লিক করা হয়েছে!" বার্তা দেখাবে।
২. হোভার ইভেন্ট (Hover Event)
মার্কারের উপর মাউসের হোভার (Mouse Hover) ইভেন্ট ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন তৈরির জন্য ব্যবহার করা হয়। হোভার করার সময় মার্কারের স্টাইল পরিবর্তন বা অতিরিক্ত তথ্য প্রদর্শন করা যেতে পারে।
উদাহরণ:
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// মার্কারের উপর হোভার ইভেন্ট যোগ করা
marker.on('mouseover', function() {
this.bindPopup('আপনি মার্কারের উপর হোভার করছেন!').openPopup();
});
marker.on('mouseout', function() {
this.closePopup();
});
এখানে, যখন ব্যবহারকারী মার্কারের উপর মাউস রেখে হোভার করবেন, তখন একটি পপ-আপ উইন্ডো প্রদর্শিত হবে। যখন মাউস মার্কারের বাইরে চলে যাবে, পপ-আপটি বন্ধ হয়ে যাবে।
কাস্টম পপ-আপ
LeafletJS এর মাধ্যমে আপনি কাস্টম পপ-আপ তৈরি করতে পারেন যা বিভিন্ন ধরনের HTML কনটেন্ট যেমন ছবি, টেক্সট, লিঙ্ক ইত্যাদি ধারণ করতে পারে।
১. কাস্টম পপ-আপ তৈরি করা
মার্কারের উপর ক্লিক করলে একটি কাস্টম পপ-আপ তৈরি করা যেতে পারে, যেটি HTML কনটেন্ট ধারণ করবে।
উদাহরণ:
// একটি মার্কার তৈরি করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// কাস্টম পপ-আপ তৈরি করা
var popupContent = "<b>এটি একটি কাস্টম পপ-আপ!</b><br>এখানে আপনি HTML কনটেন্ট রাখতে পারেন।";
marker.bindPopup(popupContent);
এখানে, মার্কারে ক্লিক করার সাথে সাথে একটি কাস্টম পপ-আপ দেখানো হবে যেখানে HTML কনটেন্ট থাকবে।
২. কাস্টম পপ-আপের স্টাইল পরিবর্তন করা
আপনি চাইলে পপ-আপের স্টাইলও কাস্টমাইজ করতে পারেন, যেমন পপ-আপের ব্যাকগ্রাউন্ড রঙ, আকার ইত্যাদি।
উদাহরণ:
// কাস্টম পপ-আপ স্টাইল তৈরি করা
var popupContent = "<div style='background-color: #f39c12; padding: 10px; color: white;'><b>কাস্টম স্টাইল!</b><br>এটি একটি কাস্টম পপ-আপ।</div>";
marker.bindPopup(popupContent);
এটি একটি কাস্টম পপ-আপ তৈরি করবে যার ব্যাকগ্রাউন্ড রঙ হল সোনালী এবং টেক্সটের রঙ সাদা।
সারাংশ
LeafletJS ব্যবহার করে আপনি সহজেই মার্কার ইভেন্ট (যেমন ক্লিক এবং হোভার) পরিচালনা করতে পারেন এবং কাস্টম পপ-আপ তৈরি করতে পারেন। ক্লিক ইভেন্টের মাধ্যমে আপনি মার্কারের উপর ব্যবহারকারীকে প্রতিক্রিয়া জানাতে পারবেন, এবং হোভার ইভেন্টের মাধ্যমে আপনি মার্কারের ওপর অতিরিক্ত তথ্য প্রদর্শন করতে পারবেন। এছাড়া, আপনি কাস্টম HTML কনটেন্ট দিয়ে পপ-আপ কাস্টমাইজ করতে পারেন, যা আরও আকর্ষণীয় এবং ইন্টারেকটিভ তৈরি করবে।
Read more
