LeafletJS এ Markers হল পয়েন্টের চিহ্ন, যা ম্যাপের উপর নির্দিষ্ট স্থানের জন্য ব্যবহার করা হয়। একাধিক Markers যোগ করা খুবই সহজ এবং এটি ম্যাপের উপর বিভিন্ন স্থানে তথ্য প্রদর্শন করতে সাহায্য করে।
এখানে আমরা দেখবো কিভাবে একাধিক Markers যোগ করা যায় এবং তাদের সাথে Popup যুক্ত করা যায়, যা ব্যবহারকারীকে অতিরিক্ত তথ্য দেখানোর সুযোগ দেয়।
একাধিক Markers যোগ করার প্রক্রিয়া
একাধিক Markers যোগ করার জন্য, প্রথমে আপনাকে L.marker() ফাংশন ব্যবহার করে মার্কার তৈরি করতে হবে এবং তারপর সেগুলিকে ম্যাপে যোগ করতে হবে। আপনি চাইলে একাধিক মার্কারকে একটি LayerGroup বা MarkerCluster এর মধ্যে রাখতেও পারেন, যাতে তারা একত্রে পরিচালিত হয়।
একাধিক Markers যোগ করার উদাহরণ
// ম্যাপ তৈরি করা
var map = L.map('map').setView([23.8103, 90.4125], 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);
// একাধিক Markers যোগ করা
var marker1 = L.marker([23.8103, 90.4125]).bindPopup("ঢাকা");
var marker2 = L.marker([22.3569, 91.7832]).bindPopup("চট্টগ্রাম");
var marker3 = L.marker([24.8867, 91.2710]).bindPopup("সিলেট");
// সব মার্কারগুলো ম্যাপে যোগ করা
marker1.addTo(map);
marker2.addTo(map);
marker3.addTo(map);
এখানে, L.marker() ব্যবহার করে আমরা তিনটি মার্কার তৈরি করেছি, প্রতিটি মার্কারের জন্য একটি পপ-আপও সংযুক্ত করেছি, যা ব্যবহারকারীর ক্লিক করলে প্রদর্শিত হবে।
একাধিক Markers একটি LayerGroup এর মধ্যে রাখা
একাধিক Markers একত্রে পরিচালনা করার জন্য LayerGroup ব্যবহার করা যেতে পারে। এটি মার্কারগুলোকে একটি গ্রুপে রাখে, যার মাধ্যমে আপনি একসাথে সেগুলি দেখাতে এবং সরাতে পারবেন।
LayerGroup এর উদাহরণ
// একাধিক Markers এর গ্রুপ তৈরি করা
var markers = L.layerGroup([
L.marker([23.8103, 90.4125]).bindPopup("ঢাকা"),
L.marker([22.3569, 91.7832]).bindPopup("চট্টগ্রাম"),
L.marker([24.8867, 91.2710]).bindPopup("সিলেট")
]);
// গ্রুপটি ম্যাপে যোগ করা
markers.addTo(map);
এখানে, আমরা L.layerGroup() ব্যবহার করে তিনটি মার্কারকে একটি গ্রুপে রাখলাম এবং তারপর সেই গ্রুপটিকে ম্যাপে যোগ করলাম।
একাধিক Markers একটি MarkerCluster এর মধ্যে রাখা
MarkerCluster হল একটি কার্যকরী উপায়, যা একাধিক মার্কারকে ক্লাস্টারে গ্রুপ করে, এবং যখন ব্যবহারকারী একটি ক্লাস্টারের উপরে ক্লিক করেন, তখন সেই ক্লাস্টারের মধ্যে থাকা সমস্ত মার্কার প্রদর্শিত হয়। এটি ওয়েবসাইটের পারফরম্যান্সও উন্নত করে।
MarkerCluster এর উদাহরণ
// MarkerCluster ব্যবহার করা
var markers = L.markerClusterGroup();
// একাধিক Markers যোগ করা
markers.addLayer(L.marker([23.8103, 90.4125]).bindPopup("ঢাকা"));
markers.addLayer(L.marker([22.3569, 91.7832]).bindPopup("চট্টগ্রাম"));
markers.addLayer(L.marker([24.8867, 91.2710]).bindPopup("সিলেট"));
// ক্লাস্টারটি ম্যাপে যোগ করা
map.addLayer(markers);
এখানে, L.markerClusterGroup() ব্যবহার করে আমরা একাধিক মার্কারকে একটি ক্লাস্টারে যুক্ত করেছি, যা পরে ম্যাপে যোগ করা হয়েছে।
সারাংশ
LeafletJS এ একাধিক Markers যোগ করা সহজ এবং আপনি এটি বিভিন্ন উপায়ে করতে পারেন: সরাসরি ম্যাপে যোগ করা, LayerGroup ব্যবহার করে অথবা MarkerCluster ব্যবহার করে। মার্কারগুলোতে Popup যোগ করলে ব্যবহারকারী আরও বিস্তারিত তথ্য পেতে পারে। MarkerCluster ব্যবহার করলে একাধিক মার্কারকে একটি ক্লাস্টারে গ্রুপ করা যায়, যা পারফরম্যান্সে সহায়ক এবং UI (User Interface) আরও পরিষ্কার ও সুসংগঠিত হয়।
Read more
