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 আপনাকে ইন্টারেক্টিভ ম্যাপিং অভিজ্ঞতা তৈরি করতে সাহায্য করে, যা বিভিন্ন ওয়েব অ্যাপ্লিকেশনে ব্যবহার করা হয়।
Read more
