Google Maps Android Marker Clustering Utility

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

মার্কার ক্লাস্টার করার মাধ্যমে, আপনি ম্যাপে অনেক মার্কার যোগ করতে পারবেন এবং ম্যাপটি পড়তে অসুবিধা হবে না।

ভূমিকা

এই ভিডিওতে মার্কার ক্লাস্টারিংয়ের ব্যবহার নিয়ে আলোচনা করা হয়েছে, যখন আপনার ডেটার জন্য ম্যাপে অনেক ডেটা পয়েন্টের প্রয়োজন হয়।

মার্কার ক্লাস্টারিং ইউটিলিটি আপনাকে বিভিন্ন জুম লেভেলে একাধিক মার্কার ম্যানেজ করতে সাহায্য করে। আরও স্পষ্ট করে বলতে গেলে, এই মুহূর্তে 'মার্কার' আসলে 'আইটেম', এবং রেন্ডার করার পরেই সেগুলি 'মার্কার' হয়ে ওঠে। তবে, স্পষ্টতার জন্য, এই ডকুমেন্ট জুড়ে তাদের 'মার্কার' নাম দেওয়া হবে।

কোনও ব্যবহারকারী ম্যাপটি খুব বেশি জুম লেভেলে দেখলে, ম্যাপে আলাদা আলাদা মার্কার দেখা যায়। ব্যবহারকারী জুম আউট করলে, মার্কারগুলি একসাথে ক্লাস্টারে সংগ্রহ করা হয়, যাতে ম্যাপ দেখা সহজ হয়। মার্কার ক্লাস্টারিং ইউটিলিটি হল Maps SDK for Android Utility Library-এর অংশ। আপনি এখনও লাইব্রেরি সেট-আপ না করে থাকলে, এই পৃষ্ঠার বাকি অংশ পড়ার আগে সেট-আপ গাইড অনুসরণ করুন।

ক্লাস্টার করা মার্কার

মার্কার ক্লাস্টারিং ইউটিলিটি ব্যবহার করতে, আপনাকে ClusterManager-এ ClusterItem অবজেক্ট হিসেবে মার্কার যোগ করতে হবে। ClusterManager মার্কারগুলিকে Algorithm-এ পাস করে, যা সেগুলিকে ক্লাস্টারের সেটে রূপান্তরিত করে। ClusterRenderer ক্লাস্টার ও স্বতন্ত্র মার্কার যোগ করা ও সরানোর মাধ্যমে রেন্ডারিংয়ের বিষয়টি দেখে। ClusterRenderer ও Algorithm হল প্লাগেবল এবং কাস্টমাইজ করা যায়।

ইউটিলিটি লাইব্রেরিতে একটি ডেমো অ্যাপ থাকে যা মার্কার ক্লাস্টারিং ইউটিলিটির স্যাম্পেল প্রয়োগ প্রদান করে। ডেমো অ্যাপ চালানোর ব্যাপারে সাহায্য পেতে, সেট-আপ গাইড দেখুন। ডেমো অ্যাপে নিম্নলিখিত মার্কার ক্লাস্টারিং স্যাম্পেল অন্তর্ভুক্ত রয়েছে:

• ClusteringDemoActivity: মার্কার ক্লাস্টারিংয়ের একটি সহজ অ্যাক্টিভিটি।
• BigClusteringDemoActivity: ২০০০টি মার্কারের সাথে ক্লাস্টার করা হচ্ছে।
• CustomMarkerClusteringDemoActivity: ক্লাস্টার করা মার্কারের জন্য কাস্টম ডিজাইন তৈরি করা।

একটি সাধারণ মার্কার ক্লাস্টারার যোগ করুন

দশটি মার্কারের একটি সাধারণ ক্লাস্টার তৈরি করতে নিচের ধাপগুলি অনুসরণ করুন। ফলাফল এইরকম দেখতে হবে, যদিও দেখানো/ক্লাস্টার করা মার্কারের সংখ্যা জুম লেভেলের উপর নির্ভর করে পরিবর্তিত হবে:

দশটি ক্লাস্টার করা মার্কার

প্রয়োজনীয় ধাপের সারসংক্ষেপ এখানে দেওয়া হল:

1. ম্যাপে মার্কার দেখাতে ClusterItem ব্যবহার করুন। ক্লাস্টার আইটেমটি LatLng অবজেক্ট হিসেবে মার্কারের পজিশন এবং একটি ঐচ্ছিক শীর্ষক বা স্নিপেট রিটার্ন করে।
2. জুম লেভেলের উপর ভিত্তি করে ক্লাস্টার আইটেম (মার্কার) গ্রুপ করতে ClusterManager নতুন যোগ করুন।
3. ম্যাপের OnCameraIdleListener() ClusterManager-এ সেট করুন, কারণ ClusterManager লিসেনার ইমপ্লিমেন্ট করে।
4. মার্কার ক্লিক ইভেন্টের উত্তরে আপনি নির্দিষ্ট কার্যকারিতা যোগ করতে চাইলে, ম্যাপের OnMarkerClickListener()-কে ClusterManager-এ সেট করুন, কারণ ClusterManager লিসেনার প্রয়োগ করে।
5. ClusterManager-এ মার্কার ফিড করুন।

ধাপগুলি আরও বিস্তারিতভাবে দেখা যাক: দশটি মার্কারের সাধারণ ক্লাস্টার তৈরি করতে, প্রথমে একটি MyItem ক্লাস তৈরি করুন যা ClusterItem প্রয়োগ করে।

Kotlin

class MyItem(
    lat: Double,
    lng: Double,
    override val title: String,
    override val snippet: String
) : ClusterItem {

    override val position: LatLng = LatLng(lat, lng)

    override val zIndex: Float = 0f

    override fun equals(other: Any?): Boolean {
        if (this === other) return true
        if (other !is MyItem) return false
        return position == other.position && title == other.title
    }

    override fun hashCode(): Int {
        var result = position.hashCode()
        result = 31 * result + title.hashCode()
        return result
    }
}

      

Java

public static class MyItem implements ClusterItem {
    private final LatLng position;
    private final String title;
    private final String snippet;

    public MyItem(double lat, double lng, String title, String snippet) {
        position = new LatLng(lat, lng);
        this.title = title;
        this.snippet = snippet;
    }

    @Override
    public LatLng getPosition() {
        return position;
    }

    @Override
    public String getTitle() {
        return title;
    }

    @Override
    public String getSnippet() {
        return snippet;
    }

    @Nullable
    @Override
    public Float getZIndex() {
        return 0f;
    }
}

      

আপনার ম্যাপ অ্যাক্টিভিটিতে, ClusterManager যোগ করুন এবং এতে ক্লাস্টার আইটেম ফিড করুন। টাইপ আর্গুমেন্ট <MyItem> লক্ষ্য করুন, যা ClusterManager-কে MyItem টাইপ হিসেবে ঘোষণা করে।

Kotlin

// Position the map.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(LatLng(51.503186, -0.126446), 10f))

// Initialize the manager with the context and the map.
// (Activity extends context, so we can pass 'this' in the constructor.)
val manager = ClusterManager<MyItem>(context, map)
clusterManager = manager

// Point the map's listeners at the listeners implemented by the cluster
// manager.
map.setOnCameraIdleListener(manager)
map.setOnMarkerClickListener(manager)

// Add cluster items (markers) to the cluster manager.
addItems()
manager.cluster()

      

Java

// Position the map.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(51.503186, -0.126446), 10));

// Initialize the manager with the context and the map.
// (Activity extends context, so we can pass 'this' in the constructor.)
clusterManager = new ClusterManager<MyItem>(context, map);

// Point the map's listeners at the listeners implemented by the cluster
// manager.
map.setOnCameraIdleListener(clusterManager);
map.setOnMarkerClickListener(clusterManager);

// Add cluster items (markers) to the cluster manager.
addItems();
clusterManager.cluster();

      

এছাড়াও, জুম ইন ও জুম আউট করার সময় ক্লাস্টারিং অ্যানিমেশন বন্ধ করার বিকল্প বেছে নিতে পারবেন। অ্যানিমেশন বন্ধ করা থাকলে, ক্লাস্টারের মধ্যে ও বাইরে মাইগ্রেট করার পরিবর্তে মার্কারগুলি পজিশনে স্ন্যাপ করে। অ্যানিমেশন বন্ধ করতে, নিচে দেখানো পদ্ধতি অনুযায়ী ClusterManager-এ setAnimation() ব্যবহার করুন:

Kotlin

it.setAnimation(false)

      

Java

clusterManager.setAnimation(false);

      

ক্লাস্টার করা আলাদা মার্কারের জন্য তথ্য উইন্ডো যোগ করা

নির্দিষ্ট ক্লাস্টার করা মার্কারের জন্য তথ্য উইন্ডো যোগ করতে, ClusterItem-এর আপনার ইমপ্লিমেন্টেশনের কনস্ট্রাক্টরে শিরোনাম এবং স্নিপেট স্ট্রিং যোগ করুন।

নিচে দেওয়া উদাহরণে, addItems() পদ্ধতিতে, একটি শীর্ষক ও স্নিপেট সেট করে, তথ্য উইন্ডো সহ একটি মার্কার যোগ করা হয়েছে:

Kotlin

// Set the lat/long coordinates for the marker.
val lat = 51.5009
val lng = -0.122

// Set the title and snippet strings.
val title = "This is the title"
val snippet = "and this is the snippet."

// Create a cluster item for the marker and set the title and snippet using the constructor.
val infoWindowItem = MyItem(lat, lng, title, snippet)

// Add the cluster item (marker) to the cluster manager.
it.addItem(infoWindowItem)
it.cluster()

      

Java

// Set the lat/long coordinates for the marker.
double lat = 51.5009;
double lng = -0.122;

// Set the title and snippet strings.
String title = "This is the title";
String snippet = "and this is the snippet.";

// Create a cluster item for the marker and set the title and snippet using the constructor.
MyItem infoWindowItem = new MyItem(lat, lng, title, snippet);

// Add the cluster item (marker) to the cluster manager.
clusterManager.addItem(infoWindowItem);

      

মার্কার ক্লাস্টার কাস্টমাইজ করা

ClusterManager কনস্ট্রাক্টর একটি DefaultClusterRenderer এবং একটি NonHierarchicalDistanceBasedAlgorithm তৈরি করে। আপনি ClusterManager-এর setAlgorithm(Algorithm<T> algorithm) এবং setRenderer(ClusterRenderer<T> view) পদ্ধতি ব্যবহার করে ClusterRenderer এবং Algorithm পরিবর্তন করতে পারবেন।

ক্লাস্টার রেন্ডার করার পদ্ধতি কাস্টমাইজ করতে আপনি ClusterRenderer প্রয়োগ করতে পারবেন। DefaultClusterRenderer থেকে শুরু করলে ভালো বেস পাওয়া যায়। DefaultClusterRenderer-এর সাবক্লাস তৈরি করে, আপনি ডিফল্ট ওভাররাইড করতে পারবেন।

কাস্টমাইজেশনের বিস্তারিত উদাহরণের জন্য, ইউটিলিটি লাইব্রেরির সাথে শিপ করা ডেমো অ্যাপে CustomMarkerClusteringDemoActivity দেখুন।

কাস্টম ক্লাস্টার করা মার্কার

CustomMarkerClusteringDemoActivity তার নিজস্ব ক্লাস্টার আইটেম, Person সংজ্ঞায়িত করে এবং DefaultClusterRenderer-কে PersonRenderer হিসেবে এক্সটেন্ড করে রেন্ডার করে।

এছাড়াও, ক্লাস্টারে ক্লিক করা হলে, ব্যক্তির সম্পর্কে আরও তথ্য দেখানোর জন্য ClusterManager.OnClusterClickListener<Person> ইন্টারফেস কীভাবে প্রয়োগ করতে হয়, ডেমোটি তা দেখায়। আপনি একইভাবে ClusterManager.OnClusterItemClickListener<Person> প্রয়োগ করতে পারবেন।

ডেমো অ্যাপ চালানোর ব্যাপারে সাহায্য পেতে, সেট-আপ গাইড দেখুন।