ডেটা লেয়ার

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

সংক্ষিপ্ত বিবরণ

ডেটা লেয়ার সম্পর্কে আরও জানতে এই DevBytes ভিডিওটি দেখুন।

Maps JavaScript API ব্যবহার করে আপনি বিভিন্ন ধরণের ওভারলে, যেমন মার্কার, পলিলাইন, বহুভুজ ইত্যাদি দিয়ে একটি মানচিত্র চিহ্নিত করতে পারেন। এই প্রতিটি টীকা স্টাইলিং তথ্যকে অবস্থানের ডেটার সাথে একত্রিত করে। google.maps.Data ক্লাস হল নির্বিচারে ভূ-স্থানিক ডেটার জন্য একটি ধারক। এই ওভারলেগুলি যোগ করার পরিবর্তে, আপনি আপনার মানচিত্রে নির্বিচারে ভৌগোলিক ডেটা যোগ করতে ডেটা স্তর ব্যবহার করতে পারেন। যদি সেই ডেটাতে জ্যামিতি থাকে, যেমন পয়েন্ট, লাইন বা বহুভুজ, তাহলে API ডিফল্টরূপে এগুলিকে মার্কার, পলিলাইন এবং বহুভুজ হিসাবে রেন্ডার করবে। আপনি এই বৈশিষ্ট্যগুলিকে একটি সাধারণ ওভারলে হিসাবে স্টাইল করতে পারেন, অথবা আপনার ডেটা সেটে থাকা অন্যান্য বৈশিষ্ট্যের উপর ভিত্তি করে স্টাইলিং নিয়ম প্রয়োগ করতে পারেন।

google.maps.Data ক্লাস আপনাকে এগুলি করতে দেয়:

• তোমার মানচিত্রে বহুভুজ আঁক।
• আপনার মানচিত্রে GeoJSON ডেটা যোগ করুন।
  GeoJSON হল ইন্টারনেটে ভূ-স্থানিক ডেটার জন্য একটি স্ট্যান্ডার্ড। Data ক্লাসটি তার ডেটা উপস্থাপনায় GeoJSON এর কাঠামো অনুসরণ করে এবং GeoJSON ডেটা প্রদর্শন করা সহজ করে তোলে। GeoJSON ডেটা সহজেই আমদানি করতে এবং পয়েন্ট, লাইন-স্ট্রিং এবং বহুভুজ প্রদর্শন করতে loadGeoJson() পদ্ধতি ব্যবহার করুন।
• ইচ্ছামত ডেটা মডেল করতে google.maps.Data ব্যবহার করুন।
  বেশিরভাগ বাস্তব-বিশ্বের সত্তার সাথে সম্পর্কিত অন্যান্য বৈশিষ্ট্য রয়েছে। উদাহরণস্বরূপ, দোকানগুলির খোলার সময় রয়েছে, রাস্তাগুলিতে ট্র্যাফিকের গতি রয়েছে এবং প্রতিটি গার্ল গাইড ট্রুপের কুকি বিক্রির জায়গা রয়েছে। google.maps.Data এর সাহায্যে, আপনি এই বৈশিষ্ট্যগুলিকে মডেল করতে পারেন এবং সেই অনুযায়ী আপনার ডেটা স্টাইল করতে পারেন।
• আপনার ডেটা কীভাবে উপস্থাপন করা হবে তা বেছে নিন এবং তৎক্ষণাৎ আপনার মন পরিবর্তন করুন ।
  ডেটা স্তর আপনাকে আপনার ডেটার ভিজ্যুয়ালাইজেশন এবং ইন্টারঅ্যাকশন সম্পর্কে সিদ্ধান্ত নিতে দেয়। উদাহরণস্বরূপ, সুবিধাজনক দোকানের মানচিত্র দেখার সময় আপনি কেবল সেই দোকানগুলি প্রদর্শন করতে পারেন যেখানে ট্রানজিট টিকিট বিক্রি হয়।

একটি বহুভুজ আঁকুন

Data.Polygon ক্লাসটি আপনার জন্য বহুভুজ ঘুরানোর কাজ পরিচালনা করে। আপনি এটিকে এক বা একাধিক রৈখিক বলয়ের একটি অ্যারে পাস করতে পারেন, যা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক হিসাবে সংজ্ঞায়িত করা হয়। প্রথম রৈখিক বলয়টি বহুভুজের বাইরের সীমানা নির্ধারণ করে। যদি আপনি একাধিক রৈখিক বলয় অতিক্রম করেন, তাহলে দ্বিতীয় এবং পরবর্তী রৈখিক বলয়গুলি বহুভুজের অভ্যন্তরীণ পথ (গর্ত) নির্ধারণ করতে ব্যবহৃত হয়।

নিচের উদাহরণটি দুটি ছিদ্র সহ একটি আয়তক্ষেত্রাকার বহুভুজ তৈরি করে:

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

GeoJSON লোড করুন

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

map.data.loadGeoJson('google.json');

প্রতিটি মানচিত্রে একটি map.data অবজেক্ট থাকে, যা GeoJSON সহ নির্বিচারে ভূ-স্থানিক ডেটার জন্য একটি ডেটা স্তর হিসেবে কাজ করে। আপনি data অবজেক্টের loadGeoJSON() পদ্ধতিটি কল করে একটি GeoJSON ফাইল লোড এবং প্রদর্শন করতে পারেন। নীচের উদাহরণে দেখানো হয়েছে কিভাবে একটি মানচিত্র যোগ করতে হয় এবং বহিরাগত GeoJSON ডেটা লোড করতে হয়।

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    let innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

initMap();
index.ts

async function initMap() {
    (await google.maps.importLibrary('maps'));
    const mapElement = document.querySelector('gmp-map');
    let innerMap = mapElement.innerMap;
    innerMap.data.loadGeoJson('google.json');
}
initMap();
index.js

নমুনা GeoJSON

এই পৃষ্ঠার বেশিরভাগ উদাহরণে একটি সাধারণ GeoJSON ফাইল ব্যবহার করা হয়েছে। এই ফাইলটি 'Google'-এর ছয়টি অক্ষরকে অস্ট্রেলিয়ার বহুভুজ হিসেবে সংজ্ঞায়িত করে। ডেটা স্তর পরীক্ষা করার সময় অনুগ্রহ করে এই ফাইলটি অনুলিপি বা পরিবর্তন করতে দ্বিধা করবেন না।

দ্রষ্টব্য: অন্য ডোমেন থেকে একটি json ফাইল লোড করার জন্য, সেই ডোমেনে অবশ্যই Cross-origin resource sharing সক্ষম থাকতে হবে।

google.json শব্দের পাশের ছোট তীরটি প্রসারিত করে ফাইলটির সম্পূর্ণ লেখাটি নীচে দেখা যাবে।

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

স্টাইল GeoJSON ডেটা

আপনার ডেটা কেমন দেখাবে তা নির্দিষ্ট করতে Data.setStyle() পদ্ধতি ব্যবহার করুন। setStyle() পদ্ধতিটি হয় একটি StyleOptions অবজেক্ট লিটারেল নেয়, অথবা একটি ফাংশন নেয় যা প্রতিটি বৈশিষ্ট্যের জন্য স্টাইল গণনা করে।

সহজ স্টাইলের নিয়ম

স্টাইল বৈশিষ্ট্যের সবচেয়ে সহজ উপায় হল StyleOptions অবজেক্ট লিটারেলকে setStyle() এ পাস করা। এটি আপনার সংগ্রহের প্রতিটি বৈশিষ্ট্যের জন্য একটি একক স্টাইল সেট করবে। মনে রাখবেন যে প্রতিটি বৈশিষ্ট্যের ধরণ কেবলমাত্র উপলব্ধ বিকল্পগুলির একটি উপসেট রেন্ডার করতে সক্ষম। এর অর্থ হল একটি একক অবজেক্ট লিটারেলের মধ্যে বিভিন্ন বৈশিষ্ট্যের ধরণের জন্য স্টাইল একত্রিত করা সম্ভব। উদাহরণস্বরূপ, নীচের স্নিপেটটি একটি কাস্টম icon উভয়ই সেট করে, যা কেবল পয়েন্ট জ্যামিতিগুলিকে প্রভাবিত করে এবং fillColor যা কেবল বহুভুজকে প্রভাবিত করে।

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

বৈধ স্টাইল/বৈশিষ্ট্যের সমন্বয় সম্পর্কে আরও তথ্য স্টাইল অপশনে পাওয়া যাবে।

StyleOptions অবজেক্ট লিটারেল ব্যবহার করে বিভিন্ন বৈশিষ্ট্যের জন্য স্ট্রোক এবং ফিল কালার সেট করার একটি উদাহরণ নিচে দেওয়া হল। লক্ষ্য করুন যে প্রতিটি বহুভুজ একই স্টাইল করা হয়েছে।

async function initMap() {
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

initMap();
index.ts

async function initMap() {
    (await google.maps.importLibrary('maps'));
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Load GeoJSON.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });
    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}
initMap();
index.js

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

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

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>
index.html

ঘোষণামূলক শৈলীর নিয়ম

যদি আপনি মার্কার বা পলিলাইনের মতো বিপুল সংখ্যক ওভারলে-এর স্টাইল আপডেট করতে চান, তাহলে আপনাকে সাধারণত আপনার মানচিত্রের প্রতিটি ওভারলে পুনরাবৃত্তি করতে হবে এবং এর স্টাইল পৃথকভাবে সেট করতে হবে। ডেটা লেয়ারের সাহায্যে, আপনি ঘোষণামূলকভাবে নিয়ম সেট করতে পারেন এবং সেগুলি আপনার সমগ্র ডেটা সেট জুড়ে প্রয়োগ করা হবে। যখন ডেটা, অথবা নিয়মগুলি, আপডেট করা হয়, তখন স্টাইলিং স্বয়ংক্রিয়ভাবে প্রতিটি বৈশিষ্ট্যে প্রয়োগ করা হবে। আপনি এর স্টাইল কাস্টমাইজ করতে একটি বৈশিষ্ট্য বৈশিষ্ট্য ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, নিচের কোডটি আমাদের google.json এ প্রতিটি অক্ষরের রঙ ascii অক্ষর সেটে তার অবস্থান পরীক্ষা করে সেট করে। এই ক্ষেত্রে আমরা আমাদের ডেটার সাথে অক্ষরের অবস্থান এনকোড করেছি।

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

স্টাইলগুলি সরান

যদি আপনি কোনও প্রয়োগকৃত শৈলী অপসারণ করতে চান, তাহলে setStyles() পদ্ধতিতে একটি খালি বস্তু আক্ষরিকভাবে পাস করুন।

// Remove custom styles.
map.data.setStyle({});

এটি আপনার নির্দিষ্ট করা যেকোনো কাস্টম স্টাইল মুছে ফেলবে এবং বৈশিষ্ট্যগুলি ডিফল্ট স্টাইল ব্যবহার করে রেন্ডার হবে। যদি আপনি আর বৈশিষ্ট্যগুলি রেন্ডার করতে না চান, তাহলে StyleOptions এর visible বৈশিষ্ট্যটিকে false এ সেট করুন।

// Hide the Data layer.
map.data.setStyle({visible: false});

ডিফল্ট স্টাইল ওভাররাইড করুন

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

বিশেষ স্টাইলিং নিয়ম প্রয়োগ করতে, overrideStyle() পদ্ধতি ব্যবহার করুন। overrideStyle() পদ্ধতির মাধ্যমে আপনি যে কোনও বৈশিষ্ট্য পরিবর্তন করেন তা setStyle() এ ইতিমধ্যেই নির্দিষ্ট করা গ্লোবাল স্টাইলের পাশাপাশি প্রয়োগ করা হয়। উদাহরণস্বরূপ, নীচের কোডটি ক্লিক করলে একটি বহুভুজের ফিল রঙ পরিবর্তন করবে, কিন্তু অন্য কোনও স্টাইল সেট করবে না।

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

সকল স্টাইল ওভাররাইড অপসারণ করতে revertStyle() পদ্ধতিটি কল করুন।

স্টাইলের বিকল্পগুলি

প্রতিটি বৈশিষ্ট্য স্টাইল করার জন্য উপলব্ধ বিকল্পগুলি বৈশিষ্ট্যের ধরণের উপর নির্ভর করে। উদাহরণস্বরূপ, fillColor শুধুমাত্র বহুভুজ জ্যামিতিতে রেন্ডার করবে, যখন icon শুধুমাত্র একটি বিন্দু জ্যামিতিতে প্রদর্শিত হবে। StyleOptions এর রেফারেন্স ডকুমেন্টেশনে আরও তথ্য পাওয়া যাবে।

সকল জ্যামিতিতে উপলব্ধ

• clickable : যদি true , তাহলে বৈশিষ্ট্যটি মাউস এবং স্পর্শ ইভেন্টগুলি গ্রহণ করে
• visible : If true , the feature is visible.
• zIndex : সমস্ত বৈশিষ্ট্য মানচিত্রে তাদের zIndex অনুসারে প্রদর্শিত হয়, উচ্চতর মানগুলি নিম্ন মানের বৈশিষ্ট্যগুলির সামনে প্রদর্শিত হয়। মার্কারগুলি সর্বদা লাইন-স্ট্রিং এবং বহুভুজের সামনে প্রদর্শিত হয়।

পয়েন্ট জ্যামিতিতে উপলব্ধ

• cursor : হোভারে দেখানোর জন্য মাউস কার্সার।
• icon : বিন্দু জ্যামিতির জন্য দেখানোর জন্য আইকন।
• shape : হিট সনাক্তকরণের জন্য ব্যবহৃত চিত্র মানচিত্র সংজ্ঞায়িত করে।
• title : রোলওভার টেক্সট।

অনলাইন জ্যামিতি উপলব্ধ

• strokeColor : স্ট্রোকের রঙ। বর্ধিত নামযুক্ত রঙ ছাড়া সমস্ত CSS3 রঙ সমর্থিত।
• strokeOpacity : ০.০ এবং ১.০ এর মধ্যে স্ট্রোক অস্বচ্ছতা।
• strokeWeight : পিক্সেলে স্ট্রোকের প্রস্থ।

বহুভুজ জ্যামিতিতে উপলব্ধ

• fillColor : ফিল রঙ। বর্ধিত নামযুক্ত রঙ ছাড়া সমস্ত CSS3 রঙ সমর্থিত।
• fillOpacity : 0.0 এবং 1.0.
• strokeColor : স্ট্রোকের রঙ। বর্ধিত নামযুক্ত রঙ ছাড়া সমস্ত CSS3 রঙ সমর্থিত।
• strokeOpacity : ০.০ এবং ১.০ এর মধ্যে স্ট্রোক অস্বচ্ছতা।
• strokeWeight : পিক্সেলে স্ট্রোকের প্রস্থ।

ইভেন্ট হ্যান্ডলার যোগ করুন

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

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});
index.js

ডেটা স্তর ইভেন্ট

নিম্নলিখিত ঘটনাগুলি জ্যামিতির ধরণ নির্বিশেষে সকল বৈশিষ্ট্যের ক্ষেত্রেই সাধারণ:

• addfeature
• click
• dblclick
• mousedown
• mouseout
• mouseover
• mouseup
• removefeature
• removeproperty
• rightclick
• setgeometry
• setproperty

এই ইভেন্টগুলি সম্পর্কে আরও তথ্য google.maps.data ক্লাসের রেফারেন্স ডকুমেন্টেশনে পাওয়া যাবে।

গতিশীলভাবে চেহারা পরিবর্তন করুন

আপনি google.maps.data.setStyle() পদ্ধতিতে প্রতিটি বৈশিষ্ট্যের স্টাইল গণনা করে এমন একটি ফাংশন পাস করে ডেটা লেয়ারের স্টাইল সেট করতে পারেন। প্রতিবার কোনও বৈশিষ্ট্যের বৈশিষ্ট্য আপডেট করার সময় এই ফাংশনটি কল করা হবে।

নিচের উদাহরণে, আমরা click ইভেন্টের জন্য একটি ইভেন্ট লিসেনার যোগ করেছি যা ফিচারের isColorful প্রপার্টি আপডেট করে। প্রপার্টি সেট করার সাথে সাথে পরিবর্তনটি প্রতিফলিত করার জন্য ফিচার স্টাইলিং আপডেট করা হয়।

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});