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

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

এক নজরে

ম্যাপে বিপুল সংখ্যক মার্কার দেখানোর জন্য কীভাবে মার্কার ক্লাস্টার ব্যবহার করতে হয় তা এই টিউটোরিয়াল থেকে জানতে পারবেন। কাছাকাছি থাকা মার্কারগুলিকে একত্রিত করে ক্লাস্টার তৈরি করতে এবং ম্যাপে মার্কারের ডিসপ্লে সহজ করতে, আপনি Maps JavaScript API-এর সাথে @googlemaps/markerclusterer লাইব্রেরি ব্যবহার করতে পারেন।

মার্কার ক্লাস্টারিং কীভাবে কাজ করে তা দেখতে, নিচের ম্যাপটি দেখুন।

একটি ক্লাস্টারের সংখ্যা নির্দেশ করে যে এতে কতগুলি মার্কার রয়েছে। লক্ষ্য করুন, আপনি ক্লাস্টার লোকেশনের মধ্যে কোনও একটিতে জুম-ইন করলে, ক্লাস্টারের সংখ্যা কমে যায় এবং আপনি ম্যাপে আলাদা আলাদা মার্কার দেখতে পাবেন। ম্যাপ জুম-আউট করলে মার্কারগুলি আবার ক্লাস্টারে একত্রিত হয়ে যায়।

এই ম্যাপ তৈরি করার জন্য প্রয়োজনীয় সম্পূর্ণ কোড নিচের নমুনাতে দেখানো হয়েছে।

TypeScript

import { MarkerClusterer } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

import { MarkerClusterer } from '@googlemaps/markerclusterer';

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement, PinElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('marker'),
        ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const infoWindow = new InfoWindow({
        content: '',
        disableAutoPan: true,
    });

    // Create an array of alphabetical characters used to label the markers.
    const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    const markers = locations.map((position, i) => {
        const label = labels[i % labels.length];
        const pinGlyph = new PinElement({
            glyphText: label,
            glyphColor: 'white',
        });

        const marker = new AdvancedMarkerElement({
            position,
            content: pinGlyph,
            gmpClickable: true,
        });

        // markers can only be keyboard focusable when they have click listeners
        // open info window when marker is clicked
        marker.addEventListener('gmp-click', () => {
            const content = document.createElement('div');
            content.textContent = `${String(position.lat)}, ${String(position.lng)}`;
            infoWindow.setContent(content);

            infoWindow.open({
                anchor: marker,
                map: innerMap,
            });
        });
        return marker;
    });

    // Add a marker clusterer to manage the markers.
    new MarkerClusterer({ markers, map: innerMap });
}

const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
];

void init();
index.js

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Marker Clustering</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="-28.024,140.887"
            zoom="3"
            map-id="DEMO_MAP_ID"></gmp-map>
    </body>
</html>
index.html

উদাহরণ হিসেবে, এই টিউটোরিয়ালটি locations অ্যারে ব্যবহার করে ম্যাপে মার্কারের একটি সেট যোগ করে। আপনার ম্যাপের জন্য মার্কার পেতে আপনি অন্যান্য সোর্স ব্যবহার করতে পারেন। আরও তথ্যের জন্য, মার্কার তৈরি করা সংক্রান্ত নির্দেশিকা পড়ুন।

মার্কার ক্লাস্টারার যোগ করুন

মার্কার ক্লাস্টারার যোগ করতে নিচে উল্লেখ করা ধাপগুলি অনুসরণ করুন:

1. আপনার পৃষ্ঠা বা অ্যাপ্লিকেশনে মার্কার ক্লাস্টারিং লাইব্রেরি যোগ করুন। লাইব্রেরিটি NPM-এ @googlemaps/markerclusterer-এ এবং GitHub-এ রিপোজিটরিতে উপলভ্য।

   NPM

   NPM ব্যবহার করে @googlemaps/markerclusterer লাইব্রেরির লেটেস্ট ভার্সন ইনস্টল করুন।

   npm install @googlemaps/markerclusterer

   CDN

   নিচের স্ক্রিপ্টটি unpkg.com CDN থেকে লাইব্রেরির লেটেস্ট 2.x.x ভার্সন লোড করে।

   <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

2. আপনার অ্যাপে মার্কার ক্লাস্টারার যোগ করুন।

   নিচের কোডটি ম্যাপে একটি মার্কার ক্লাস্টারার যোগ করে।

   NPM

   import { MarkerClusterer } from "@googlemaps/markerclusterer";
   
   const markerCluster = new MarkerClusterer({ markers, map });

   CDN

   CDN-এর মাধ্যমে অ্যাক্সেস করা হলে, লাইব্রেরিটি markerClusterer গ্লোবালের অধীনে উপলভ্য হয়।

   const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

   এই স্যাম্পেল markers অ্যারে MarkerClusterer-এ পাস করে।

3. মার্কার ক্লাস্টারার কাস্টমাইজ করুন।
   • রেন্ডারার ইন্টারফেসের মাধ্যমে ক্লাস্টার আইকন কাস্টমাইজ করুন।
   • ক্লাস্টার তৈরি করার জন্য অ্যালগরিদম পরিবর্তন করুন।

আরও জানুন

আপনি GitHub-এর রিপোজিটরিতে মার্কার ক্লাস্টারিংয়ের আরও জটিল উদাহরণ দেখতে এবং লাইব্রেরির জন্য রেফারেন্স ডকুমেন্টেশন পড়তে পারেন।