স্টাইল ডেটা ফিচার

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

কোনও ডেটাসেট ফিচার লেয়ারের style প্রপার্টিকে google.maps.FeatureStyleFunction হিসেবে সেট করে ডেটা ফিচারে স্টাইল প্রয়োগ করুন, যার মধ্যে স্টাইলিং লজিক বা google.maps.FeatureStyleOptions থাকতে পারে, যাতে কোনও লেয়ারের সব ফিচারকে একইভাবে স্টাইল করা যায়। আপনি ডেটা ফিচারে ফিল (রঙ, অস্বচ্ছতা), স্ট্রোক (রঙ, অস্বচ্ছতা, স্ট্রোকের ওজন) এবং ব্যাস (পয়েন্ট) সংক্রান্ত স্টাইল প্রয়োগ করতে পারেন। এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে প্রোগ্রাম্যাটিক্যালি ডেটাসেট অ্যাক্সেস করতে হয় এবং এর ফিচার স্টাইল করতে হয় এবং পয়েন্ট, পলিগন ও পলিলাইন জিওমেট্রির উপর ভিত্তি করে ডেটা ফিচারের জন্য স্টাইলিংয়ের উদাহরণ দেখানো হয়েছে।

ডেটা-ড্রিভেন স্টাইলিং ডেটাসেটের জন্য ডেটা ফিচার রেন্ডার করে। এটি ডেটাসেট তৈরি করতে ব্যবহৃত জিওস্পেশিয়াল ডেটা ফাইল থেকে প্রদত্ত অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের উপর ভিত্তি করে করা হয়।

ডেটা ফিচার অ্যাট্রিবিউট

ফিচার স্টাইল ফাংশনে ডেটাসেটের সব ডেটা অ্যাক্সেস করা যায়। ডেটা ফিচার অ্যাট্রিবিউট পেতে, প্রথমে ডেটাসেট ফিচার পান, যার মধ্যে ডেটাসেটের মধ্যে থাকা সব ডেটা থাকে, তারপর আপনার পছন্দের নির্দিষ্ট ডেটা অ্যাট্রিবিউট পান, যেমনটি এখানে দেখানো হয়েছে:

TypeScript

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature as google.maps.DatasetFeature;
// Get all of the needed dataset attributes.
const furColors =
    datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

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

// Get the dataset feature, so we can work with all of its attributes.
const datasetFeature = params.feature;
// Get all of the needed dataset attributes.
const furColors =
    datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

ফিচার স্টাইলের বিকল্প

ফিচার স্টাইল সংক্রান্ত বিকল্প ব্যবহার করে আপনি ডেটা ফিচার লেয়ারের স্টাইল নির্ধারণ করতে পারবেন, যেমন, পলিগনের ফিল ও স্ট্রোকের স্টাইল অথবা পয়েন্টের রঙ ও ব্যাস। নিচের উদাহরণে ফিচার স্টাইল বিকল্প দেখানো হয়েছে, যা কোনও ফিচারের জন্য style প্রপার্টি ব্যবহার করে সরাসরি প্রয়োগ করা যেতে পারে:

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };

ফিচার স্টাইল ফাংশন

ডেটা সেটের ফিচার স্টাইল করার জন্য লজিক নির্ধারণ করতে ফিচার স্টাইল ফাংশন ব্যবহার করুন। কোনও ফিচারকে স্টাইল করতে, style প্রপার্টিকে google.maps.FeatureStyleFunction হিসেবে সেট করুন। স্টাইল ফাংশন হল এমন একটি জায়গা যেখানে আপনি ফিচার লেয়ারে স্বতন্ত্র ফিচার স্টাইল করার জন্য লজিক সংজ্ঞায়িত করেন। featureLayer.style সেট করা হলে, প্রভাবিত ফিচার লেয়ারের প্রতিটি ফিচারের উপর স্টাইল ফাংশন রান করা হয়। আপনি স্টাইল প্রপার্টি সেট করার সময় ফাংশনটি প্রয়োগ করা হয়। এটি আপডেট করতে, আপনাকে অবশ্যই আবার স্টাইল প্রপার্টি সেট করতে হবে। নিচের উদাহরণে একটি সাধারণ ফিচার স্টাইল ফাংশন দেখানো হয়েছে:

TypeScript

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params: google.maps.FeatureStyleFunctionOptions) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

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

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

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

পয়েন্ট ডেটা স্টাইলিংয়ের উদাহরণ

এই উদাহরণে পয়েন্ট জিওমেট্রি ভিত্তিক ডেটা ফিচার স্টাইল করার একটি পদ্ধতি দেখানো হয়েছে।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেট হল নিউ ইয়র্ক সিটির সেন্ট্রাল পার্কে ২০১৮ সালে করা কাঠবিড়ালিদের সমীক্ষার ফলাফল। CSV ডেটা ফাইলের নিম্নলিখিত অংশ থেকে আমরা দেখতে পাই যে x ও y কলাম ভূগোল সংক্রান্ত তথ্যের জন্য ব্যবহার করা হয়েছে; LatLng কলাম অন্তর্ভুক্ত করা হয়েছে, কিন্তু এই উদাহরণে এটি ব্যবহার করা হয়নি কারণ ভৌগোলিক অবস্থান দুটি কলামের মাধ্যমে দেখাতে হবে। কাঠবিড়ালির শুমারি ডেটাসেটে কাঠবিড়ালির পশমের রঙ এবং আচরণ সম্পর্কিত বিভিন্ন ডেটা পয়েন্টের একটি চমৎকার বৈচিত্র্য রয়েছে (সব দেখতে অনুভূমিকভাবে স্ক্রল করতে ভুলবেন না)।

X হ্যাঁ UniqueSquirrelID হেক্টর Shift তারিখ হেক্টর SquirrelNumber বয়স PrimaryFurColor HighlightFurColor CombinationofPrimaryandHighlightColor Colornotes লোকেশন AboveGroundSighter পরিমাপ SpecificLocation চলছে Chasing পর্বতারোহণ খাওয়া খাবার খোঁজা অন্যান্য অ্যাক্টিভিটি Kuks Quaas Moans Tailflags Tailtwitches পদ্ধতি উদাসীন Runsfrom OtherInteractions LatLng
-73.9561344937861 40.7940823884086 37F-PM-1014-03 37F PM 10142018 3 + মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা POINT (-73.9561344937861 40.7940823884086)
-73.9688574691102 40.7837825208444 21B-AM-1019-04 21B AM 10192018 4 + মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা POINT (-73.9688574691102 40.7837825208444)
-73.9742811484852 40.775533619083 11B-PM-1014-08 11B PM 10142018 8 ধূসর Gray+ মাটির উপরে 10 মিথ্যা সত্য মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা POINT (-73.97428114848522 40.775533619083)
-73.9596413903948 40.7903128889029 32E-PM-1017-14 32E PM 10172018 14 প্রাপ্তবয়স্ক ধূসর Gray+ প্রাইমারি হিসেবে কিছু বেছে নেওয়া হয়নি। হাইলাইট হিসেবে ধূসর রঙ বেছে নেওয়া হয়েছে। এক্সিকিউটিভ অ্যাডজাস্টমেন্ট করা হয়েছে। মিথ্যা মিথ্যা মিথ্যা সত্য সত্য মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা সত্য POINT (-73.9596413903948 40.7903128889029)
-73.9702676472613 40.7762126854894 13E-AM-1017-05 13E AM 10172018 5 প্রাপ্তবয়স্ক ধূসর দারচিনি ধূসর+দারচিনি মাটির উপরে গাছের গুঁড়ির উপরে মিথ্যা মিথ্যা মিথ্যা মিথ্যা সত্য মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা POINT (-73.9702676472613 40.7762126854894)
-73.9683613516225 40.7725908847499 11H-AM-1010-03 11H AM 10102018 3 প্রাপ্তবয়স্ক দারচিনি সাদা দারচিনি+সাদা মিথ্যা মিথ্যা মিথ্যা মিথ্যা সত্য মিথ্যা মিথ্যা মিথ্যা মিথ্যা সত্য মিথ্যা সত্য মিথ্যা POINT (-73.9683613516225 40.7725908847499)
-73.9541201789795 40.7931811701082 36H-AM-1010-02 ৩৬ঘণ্টা AM 10102018 2 প্রাপ্তবয়স্ক ধূসর Gray+ হেক্টরের ঠিক বাইরে গ্রাউন্ড প্লেন মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা সত্য মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা মিথ্যা POINT (-73.9541201789795 40.7931811701082)

স্টাইল পয়েন্ট ডেটা ফিচার

এই উদাহরণের কোডটি CombinationofPrimaryandHighlightColor অ্যাট্রিবিউটের উপর ভিত্তি করে প্রতিটি পয়েন্টের জন্য ফিল কালার এবং স্ট্রোক কালার স্টাইল করার সহজ পদ্ধতি গ্রহণ করে, যা প্রতিটি কাঠবিড়ালির জন্য প্রাথমিক এবং সেকেন্ডারি লোমের রঙকে একত্রিত করে।

TypeScript

function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}

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

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}

সম্পূর্ণ উদাহরণ কোড

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}

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

    // Get the inner map.
    innerMap = mapElement.innerMap;

    event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend();
    });

    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

// Creates a legend for the map.
function makeLegend() {
    const colors = {
        black: ['black'],
        cinnamon: ['#8b0000'],
        'cinnamon + gray': ['#8b0000', 'gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        gray: ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };

    const legend = document.getElementById('legend');
    legend!.id = 'legend';
    const title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend!.appendChild(title);

    for (const color of Object.keys(colors) as Iterable<keyof typeof colors>) {
        const wrapper = document.createElement('div');
        wrapper.id = 'container';
        const box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        } else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        const txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend!.appendChild(wrapper);
    }
}

void init();

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}

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

    // Get the inner map.
    innerMap = mapElement.innerMap;

    event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend();
    });

    // Dataset ID for squirrel dataset.
    const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

// Creates a legend for the map.
function makeLegend() {
    const colors = {
        black: ['black'],
        cinnamon: ['#8b0000'],
        'cinnamon + gray': ['#8b0000', 'gray'],
        'cinnamon + white': ['#8b0000', 'white'],
        gray: ['gray'],
        'gray + cinnamon': ['gray', '#8b0000'],
        'gray + cinnamon + white': ['silver', '#8b0000'],
        'gray + white': ['gray', 'white'],
        'no color data': ['yellow'],
    };

    const legend = document.getElementById('legend');
    legend.id = 'legend';
    const title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend.appendChild(title);

    for (const color of Object.keys(colors)) {
        const wrapper = document.createElement('div');
        wrapper.id = 'container';
        const box = document.createElement('div');
        box.style.backgroundColor = colors[color][0];
        if (colors[color][1]) {
            box.style.borderColor = colors[color][1];
        } else {
            box.style.borderColor = colors[color][0];
        }
        box.classList.add('box');
        const txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend.appendChild(wrapper);
    }
}

void init();

CSS

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

#attributionLabel {
    background-color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}

#legend,
#dataset,
#counter {
    background-color: #e5e5e5;
    width: 15em;

    margin-left: 1em;
    border-radius: 8px;
    font-family: Roboto, sans-serif;
    overflow: hidden;
}

#dataset select {
    border-radius: 0;
    padding: 0.1em;
    border: 1px solid black;
    width: auto;
    margin: 0.5em 1em;
}

.title {
    padding: 0.5em 1em;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    background-color: rgb(66, 133, 244);
    color: white;
    width: 100%;
}

.button {
    font-size: 1.2em;
    margin: 1em;
    background-color: rgb(66, 133, 244);
    color: white;
    padding: 0.5em;
    border-radius: 8px;
}

#legend #container {
    margin: 0.5em;
    display: flex;
}

#legend div .box {
    display: flex;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid;
}

#legend div .legend {
    display: flex;
    padding: 0.3em;
}

HTML

<html>
    <head>
        <title>Style a point data feature</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
            map-id="5cd2c9ca1cf05670"
            center="40.780101, -73.967780"
            zoom="17"
            map-type-control="false"
            street-view-control="false"
            fullscreen-control="false">
            <div id="legend" slot="control-inline-start-block-start"></div>
            <div id="attributionLabel" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>

বহুভুজ ডেটা স্টাইলিংয়ের উদাহরণ

এই উদাহরণে দেখানো হয়েছে যে কীভাবে বহুভুজ জ্যামিতি ভিত্তিক ডেটা ফিচার স্টাইল করা যায়।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেট নিউ ইয়র্ক সিটির পার্ক দেখায়। GeoJSON ফাইল থেকে নেওয়া ডেটাসেটের নিম্নলিখিত অংশটি একটি প্রতিনিধিত্বমূলক ফিচার এন্ট্রি দেখায়।

{
  "type": "Feature",
  "properties": {
    "jurisdiction": "DPR",
    "mapped": "False",
    "zipcode": "11356",
    "acres": "0.05",
    "location": "College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.",
    "nys_assembly": "27",
    "councildistrict": "19",
    "url": "http://www.nycgovparks.org/parks/Q042/",
    "typecategory": "Triangle/Plaza",
    "us_congress": "14",
    "eapply": "Poppenhusen Park",
    "parentid": "Q-07",
    "gispropnum": "Q042",
    "retired": "false",
    "communityboard": "407",
    "objectid": "6248",
    "globalid": "F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5",
    "name311": "Poppenhusen Park",
    "department": "Q-07",
    "pip_ratable": "true",
    "subcategory": "Sitting Area/Triangle/Mall",
    "precinct": "109",
    "permit": "true",
    "acquisitiondate": null,
    "omppropid": "Q042",
    "gisobjid": "100000301",
    "signname": "Poppenhusen Park",
    "address": null,
    "permitparent": "Q-07",
    "class": "PARK",
    "nys_senate": "11",
    "permitdistrict": "Q-07",
    "borough": "Q",
    "waterfront": "false"
  },
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [
            -73.84575702371716,
            40.78796240884273
          ],
          [
            -73.84593393292693,
            40.78796857347548
          ],
          [
            -73.84577256469657,
            40.787651355629556
          ],
          [
            -73.84575702371716,
            40.78796240884273
          ]
        ]
      ]
    ]
  }
},

বহুভুজ ডেটা ফিচার স্টাইল করুন

এই উদাহরণে দেওয়া কোডটি "উন্নয়ন করা হয়নি" বা "পার্কওয়ে" typecategory-এর সাথে যুক্ত ডেটা ফিচারের জন্য বিশেষ কালারিং প্রয়োগ করে এবং অন্যান্য সব ফিচারকে সবুজ রঙ করে।

TypeScript

const setStyle: google.maps.FeatureStyleFunction = (params) => {
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes.typecategory;

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
};

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

const setStyle = (params) => {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes.typecategory;

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
};

সম্পূর্ণ উদাহরণ কোড

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
const setStyle: google.maps.FeatureStyleFunction = (params) => {
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes.typecategory;

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
};

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

void init();

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
const setStyle = (params) => {
    const datasetFeature = params.feature;
    // 'typecategory' is an attribute in this Dataset.
    const typeCategory = datasetFeature.datasetAttributes.typecategory;

    switch (typeCategory) {
        case 'Undeveloped': // Color undeveloped areas blue.
            return {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
};

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = setStyle;
}

void init();

CSS

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

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}

HTML

<html>
    <head>
        <title>Style a polygon data feature with more detail</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="40.580732, -74.152826"
            zoom="14"
            map-id="5cd2c9ca1cf05670">
            <div id="attribution" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>

পলিলাইন ডেটা স্টাইলিংয়ের উদাহরণ

এই উদাহরণে পলিলাইন জ্যামেট্রি ভিত্তিক ডেটা ফিচার স্টাইল করার একটি পদ্ধতি দেখানো হয়েছে।

ডেটাসেট সম্পর্কে

এই উদাহরণে ব্যবহৃত ডেটাসেটে সিয়াটল এলাকার ব্রিজ দেখানো হয়েছে। GeoJSON ফাইল থেকে নেওয়া ডেটাসেটের নিম্নলিখিত অংশটি একটি প্রতিনিধিত্বমূলক ফিচার এন্ট্রি দেখায়।

{
  "type": "Feature",
  "properties": {
      "OBJECTID": 1,
      "COMPTYPE": 66,
      "COMPKEY": 515774,
      "HANSEGKEY": 489781,
      "UNITID": "BRG-935",
      "UNITTYPE": " ",
      "BRGUNITID": "BRG-935",
      "UNITDESC_BRG": "YALE AVE BR REV LANE OC                                                                                                                                                                                                                                        ",
      "UNITDESC_SEG": "HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB                                                                                                                                                                                                                    ",
      "INSTDATE": null,
      "EXPDATE": null,
      "STATUS": " ",
      "STATUSDT": null,
      "CONDITION": " ",
      "CONDDT": null,
      "OWN": " ",
      "LSTVERIFY": null,
      "MAINTBY": " ",
      "ADDBY": "GARCIAA",
      "ADDDTTM": "2010-01-21T00:00:00Z",
      "MODBY": null,
      "MODDTTM": null,
      "BR_NBR": 935,
      "BR_CODE": " 935",
      "BR_TYPE": "ST",
      "BR_NAME": "YALE AVE BR REV LANE OC",
      "BR_FACILITIES": "YALE AVE-SR 5 ON RAMP",
      "BR_FEATURES": "SR 5 REV LANE",
      "BR_RATING": 0,
      "BR_INSET": 1,
      "BR_GEO": "DT",
      "BR_OWNER": "DOT",
      "BR_OWNER_NAME": "State of Washington",
      "GEOBASID": 0,
      "XGEOBASID": 0,
      "GISSEGKEY": 489781,
      "EARTHQUAKE_RESPONSE_TEAM": " ",
      "SHAPE_Length": 220.11891836147655
  },
  "geometry": {
      "type": "LineString",
      "coordinates": [
          [
              -122.329201929090928,
              47.616910448708538
          ],
          [
              -122.329206483407461,
              47.616976719821004
          ],
          [
              -122.32921802149356,
              47.617042137515213
          ],
          [
              -122.329236413912909,
              47.617105967923777
          ],
          [
              -122.329261454336034,
              47.617167494985758
          ],
          [
              -122.329292861855023,
              47.617226028479571
          ],
          [
              -122.329330284134699,
              47.617280911766009
          ],
          [
              -122.329373301365223,
              47.617331529154569
          ],
          [
              -122.329421430971635,
              47.617377312810319
          ],
          [
              -122.329474133027375,
              47.617417749124023
          ],
          [
              -122.32953081631139,
              47.617452384473893
          ]
      ]
  }
},

পলিলাইন ডেটা ফিচারের স্টাইল

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

TypeScript

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };

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

// Apply style to all features.
datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);

    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}

void init();

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);

    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}

void init();

CSS

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

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}

HTML

<html>
    <head>
        <title>Style a polyline data feature</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="47.59, -122.31"
            zoom="14"
            map-id="5cd2c9ca1cf05670"
            map-type-control="false">
            <div id="attribution" slot="control-block-end-inline-start">
                Data source: NYC Open Data
            </div>
        </gmp-map>
    </body>
</html>