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

ওভারভিউ

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

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

একটি ক্লাস্টারের সংখ্যা নির্দেশ করে এতে কতগুলি মার্কার রয়েছে। লক্ষ্য করুন যে আপনি ক্লাস্টারের যেকোন অবস্থানে জুম করার সাথে সাথে ক্লাস্টারের সংখ্যা কমে যায় এবং আপনি মানচিত্রে পৃথক মার্কারগুলি দেখতে শুরু করেন। মানচিত্র থেকে জুম আউট করা মার্কারগুলিকে আবার ক্লাস্টারে একত্রিত করে।

নীচের নমুনাটি এই মানচিত্রটি তৈরি করতে আপনার প্রয়োজনীয় পুরো কোডটি দেখায়।

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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: -28.024, lng: 140.887 },
      mapId: 'DEMO_MAP_ID',
    }
  );

  const infoWindow = new google.maps.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 google.maps.marker.PinElement({
      glyph: label,
      glyphColor: "white",
    })
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position,
      content: pinGlyph.element,
    });

    // markers can only be keyboard focusable when they have click listeners
    // open info window when marker is clicked
    marker.addListener("click", () => {
      infoWindow.setContent(position.lat + ", " + position.lng);
      infoWindow.open(map, marker);
    });
    return marker;
  });

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

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 },
];

initMap();
index.ts

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

async function initMap() {
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: -28.024, lng: 140.887 },
    mapId: "DEMO_MAP_ID",
  });
  const infoWindow = new google.maps.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 google.maps.marker.PinElement({
      glyph: label,
      glyphColor: "white",
    });
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position,
      content: pinGlyph.element,
    });

    // markers can only be keyboard focusable when they have click listeners
    // open info window when marker is clicked
    marker.addListener("click", () => {
      infoWindow.setContent(position.lat + ", " + position.lng);
      infoWindow.open(map, marker);
    });
    return marker;
  });

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

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 },
];

initMap();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

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

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

একটি মার্কার ক্লাস্টার যোগ করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:

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

   এনপিএম

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

   npm install @googlemaps/markerclusterer

   সিডিএন

   নিচের স্ক্রিপ্টটি unpkg.com CDN থেকে লাইব্রেরির সর্বশেষ 1.xx সংস্করণ লোড করে।

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

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

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

   এনপিএম

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

   সিডিএন

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

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

   এই নমুনা markers অ্যারেকে MarkerClusterer পাস করে।

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

আরও জানুন

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