LeafletJS এ Custom Marker Icons এবং Labels ব্যবহারের মাধ্যমে আপনি ম্যাপের মার্কারগুলোকে কাস্টমাইজ করতে পারেন এবং মার্কারের সাথে আরও তথ্য প্রদর্শন করতে পারেন। এই কাস্টমাইজেশন ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ম্যাপের আরো ইন্টারেক্টিভ করতে সাহায্য করে।
Custom Marker Icons
LeafletJS এ ডিফল্ট মার্কারের পরিবর্তে আপনি নিজের কাস্টম আইকন ব্যবহার করতে পারেন। কাস্টম মার্কার আইকন ব্যবহার করার জন্য L.icon() ফাংশন ব্যবহার করা হয়, যা আপনি সহজেই আইকন ডিফাইন করতে পারেন।
Custom Marker Icons কিভাবে তৈরি করবেন?
প্রথমে, আপনাকে কাস্টম আইকনের জন্য একটি ইমেজ বা SVG ফাইলের URL ব্যবহার করতে হবে। এরপর L.icon() ফাংশনের মাধ্যমে সেটি কনফিগার করতে হবে।
Custom Marker Icon এর উদাহরণ
<script>
var customIcon = L.icon({
iconUrl: 'https://example.com/custom-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: আইকনের আকার, যেমন 32x32 পিক্সেল।iconAnchor: আইকনের অবস্থান, যেখানে এটি ম্যাপে সঠিক স্থানে প্রদর্শিত হবে।popupAnchor: পপ-আপের অবস্থান সেট করে, যাতে পপ-আপটি মার্কারের সঠিক অবস্থানে দেখায়।
Labels (পাঠ্য চিহ্ন)
LeafletJS এ আপনি মার্কারের সাথে Labels বা টেক্সট যুক্ত করতে পারেন, যা ব্যবহারকারীকে আরও তথ্য প্রদান করতে সহায়তা করে। Labels সাধারণত মার্কারের পাশেই প্রদর্শিত হয়, এবং এটি কাস্টম টেক্সট বা ডাইনামিক ডেটা হতে পারে।
Label কিভাবে যুক্ত করবেন?
LeafletJS এ bindTooltip() ফাংশন ব্যবহার করে মার্কারের সাথে টুলটিপ বা লেবেল যুক্ত করা যায়। এটি ব্যবহারকারীর মাউস মার্কারের উপর রাখলেই টুলটিপ বা লেবেলটি দেখাবে।
Labels (Tooltip) যুক্ত করার উদাহরণ
<script>
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindTooltip("এটি একটি মার্কার লেবেল", {
permanent: true, // টুলটিপ স্থায়ীভাবে প্রদর্শিত হবে
direction: 'right' // টুলটিপের অবস্থান
}).openTooltip();
</script>
এখানে:
bindTooltip(): এটি মার্কারের সাথে টুলটিপ বা লেবেল যুক্ত করে।permanent: যদিtrueসেট করা হয়, তাহলে টুলটিপ স্থায়ীভাবে মার্কারের পাশে প্রদর্শিত হবে, অন্যথায় এটি শুধুমাত্র মাউসের উপর আসলে প্রদর্শিত হবে।direction: এটি টুলটিপের অবস্থান নিয়ন্ত্রণ করে, যেমনright,top,bottomইত্যাদি।
Custom Icon এবং Labels একসাথে ব্যবহার করা
এখন, আপনি Custom Icons এবং Labels একসাথে ব্যবহার করতে পারেন, যাতে একটি কাস্টম মার্কার এবং তার সাথে টুলটিপ বা লেবেল প্রদর্শিত হয়।
Custom Icon এবং Label একসাথে ব্যবহার করার উদাহরণ
<script>
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);
// কাস্টম আইকন সহ মার্কার এবং লেবেল যুক্ত করা
marker.bindTooltip("এটি একটি কাস্টম মার্কার", {
permanent: true,
direction: 'right'
}).openTooltip();
marker.bindPopup("<b>মার্কার পপ-আপ</b><br>এটি একটি কাস্টম মার্কারের পপ-আপ।");
</script>
এখানে:
- Custom Icon ব্যবহার করা হয়েছে।
- Tooltip বা লেবেল স্থায়ীভাবে মার্কারের পাশে প্রদর্শিত হচ্ছে।
- Popup যোগ করা হয়েছে, যা মার্কারের উপর ক্লিক করলে খোলা হবে।
সারাংশ
LeafletJS এ Custom Marker Icons এবং Labels ব্যবহার করার মাধ্যমে আপনি আপনার ম্যাপের মার্কারগুলিকে কাস্টমাইজ করতে পারেন এবং তাদের সাথে টুলটিপ বা পপ-আপ যোগ করতে পারেন। Custom Icons আপনাকে আপনার মার্কারের চেহারা সম্পূর্ণভাবে নিয়ন্ত্রণ করতে সাহায্য করে, এবং Labels বা Tooltips ব্যবহারকারীদের জন্য সহজে قابل বোঝার তথ্য প্রদর্শন করতে পারে। এই কাস্টমাইজেশনগুলি ম্যাপের অভিজ্ঞতাকে আরো ইন্টারেক্টিভ এবং তথ্যপূর্ণ করে তোলে।
Read more
