ডেটা লেয়ার

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

Google Maps ডেটা লেয়ার, ইচ্ছামতো জিওস্পেশিয়াল ডেটার জন্য একটি কন্টেনার প্রদান করে। আপনার কাস্টম ডেটা স্টোর করতে বা Google ম্যাপে GeoJSON ডেটা দেখাতে আপনি ডেটা লেয়ার ব্যবহার করতে পারেন।

এক নজরে

ডেটা লেয়ার সম্পর্কে আরও জানতে এই 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 ক্লাস আপনার জন্য পলিগন ওয়াইন্ডিং ম্যানেজ করে। আপনি এক বা একাধিক লিনিয়ার রিংয়ের অ্যারে পাস করতে পারেন, যা অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক হিসেবে সংজ্ঞায়িত। প্রথম লিনিয়ার রিং বহুভুজের বাইরের সীমানা নির্ধারণ করে। আপনি একাধিক লিনিয়ার রিং পাস করলে, দ্বিতীয় এবং পরবর্তী লিনিয়ার রিংগুলি পলিগনের ভিতরের পথ (গর্ত) সংজ্ঞায়িত করতে ব্যবহার করা হয়।

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

TypeScript

// 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

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

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

// 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 হল ইন্টারনেটে জিওস্পেশিয়াল ডেটা শেয়ার করার একটি সাধারণ স্ট্যান্ডার্ড। এটি লাইটওয়েট এবং মানুষের-পঠনযোগ্য, তাই শেয়ার ও কোলাবরেশনের জন্য এটি আদর্শ। ডেটা লেয়ারের সাহায্যে, আপনি মাত্র এক লাইন কোড ব্যবহার করে Google ম্যাপে GeoJSON ডেটা যোগ করতে পারবেন।

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

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

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

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

    const innerMap = mapElement.innerMap;

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

void init();
index.ts

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

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

async function init() {
    await google.maps.importLibrary('maps');

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

    const innerMap = mapElement.innerMap;

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

void init();
index.js

উদাহরণ দেখুন

GeoJSON-এর নমুনা

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

মনে রাখবেন: অন্য ডোমেন থেকে 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 অবজেক্ট লিটারাল, অথবা এমন একটি ফাংশন নেয় যা প্রতিটি ফিচারের জন্য স্টাইল গণনা করে।

সহজ স্টাইল সংক্রান্ত নিয়ম

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

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

সঠিক স্টাইল/ফিচার কম্বিনেশন সম্পর্কে আরও তথ্য স্টাইল বিকল্প থেকে পাওয়া যাবে।

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

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

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

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    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,
    });
}

void init();
index.ts

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

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

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

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

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    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,
    });
}

void init();
index.js

CSS

/* 
 * 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

<html>
    <head>
        <title>Data Layer: Styling</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,137" zoom="4"></gmp-map>
    </body>
</html>
index.html

উদাহরণ দেখুন

ডিক্লারেটিভ স্টাইল সংক্রান্ত নিয়ম

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

যেমন, নিচের কোডটি 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: স্ট্রোকের অস্বচ্ছতা ০.০ থেকে ১.০-এর মধ্যে।
• 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

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

The following events are common to all features, regardless of their geometry type:

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