ডেটা লেয়ার

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

Google মানচিত্র ডেটা স্তর নির্বিচারে ভূ-স্থানিক ডেটার জন্য একটি ধারক সরবরাহ করে। আপনি আপনার কাস্টম ডেটা সঞ্চয় করতে বা Google মানচিত্রে GeoJSON ডেটা প্রদর্শন করতে ডেটা স্তর ব্যবহার করতে পারেন৷

ওভারভিউ

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

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

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

  • আপনার মানচিত্রে বহুভুজ আঁকুন।
  • আপনার মানচিত্রে GeoJSON ডেটা যোগ করুন।
    GeoJSON হল ইন্টারনেটে ভূ-স্থানিক ডেটার জন্য একটি মানক। Data ক্লাস জিওজেএসএন-এর কাঠামোকে তার ডেটা উপস্থাপনায় অনুসরণ করে এবং জিওজেএসএন ডেটা প্রদর্শন করা সহজ করে তোলে। সহজেই জিওজেএসএন ডেটা আমদানি করতে এবং পয়েন্ট, লাইন-স্ট্রিং এবং বহুভুজ প্রদর্শন করতে 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 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { 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 হল ইন্টারনেটে ভূ-স্থানিক ডেটা শেয়ার করার জন্য একটি সাধারণ মান। এটি হালকা ওজনের এবং সহজে মানুষের পঠনযোগ্য, এটি ভাগ করে নেওয়া এবং সহযোগিতা করার জন্য আদর্শ করে তোলে৷ ডেটা স্তরের সাহায্যে, আপনি কোডের একটি লাইনে একটি Google মানচিত্রে GeoJSON ডেটা যোগ করতে পারেন।

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

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

টাইপস্ক্রিপ্ট

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

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

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

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
উদাহরণ দেখুন

নমুনা চেষ্টা করুন

নমুনা GeoJSON

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

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

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

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 অবজেক্ট আক্ষরিক ব্যবহার করে বিভিন্ন বৈশিষ্ট্যের জন্য স্ট্রোক এবং ফিল কালার সেট করার একটি উদাহরণ নিচে দেওয়া হল। লক্ষ্য করুন যে প্রতিটি বহুভুজ একই স্টাইল করা হয়েছে। 

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

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

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

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

// 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 : true হলে, বৈশিষ্ট্যটি দৃশ্যমান।
  • zIndex : সমস্ত বৈশিষ্ট্য ম্যাপে প্রদর্শিত হয় তাদের zIndex ক্রমানুসারে, উচ্চতর মানগুলি নিম্ন মানের বৈশিষ্ট্যগুলির সামনে প্রদর্শিত হয়৷ মার্কারগুলি সর্বদা লাইন-স্ট্রিং এবং বহুভুজের সামনে প্রদর্শিত হয়।

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

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

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

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

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

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

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

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

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

ডেটা লেয়ার ইভেন্ট

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

  • 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();
});