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 এ মার্কার যোগ করা এবং কাস্টমাইজ করা সহজ এবং অত্যন্ত কার্যকরী। আপনি মার্কারের আইকন, আকার, পপ-আপ, ইভেন্ট হ্যান্ডলিং ইত্যাদি কাস্টমাইজ করে একটি সম্পূর্ণ ইন্টারেক্টিভ ম্যাপ তৈরি করতে পারেন। এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ ও কার্যকরী অভিজ্ঞতা প্রদান করতে পারবেন।
Read more
