डेटा स्टाइल की सुविधाएं

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

डेटासेट फ़ीचर लेयर पर style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करके, डेटा फ़ीचर पर स्टाइल लागू करें. google.maps.FeatureStyleFunction में स्टाइलिंग लॉजिक या google.maps.FeatureStyleOptions शामिल हो सकता है. google.maps.FeatureStyleOptions का इस्तेमाल करके, किसी लेयर की सभी फ़ीचर को एक जैसा स्टाइल किया जा सकता है. डेटा फ़ीचर में स्टाइल लागू की जा सकती हैं. जैसे, फ़िल (रंग, ओपैसिटी), स्ट्रोक (रंग, ओपैसिटी, स्ट्रोक वेट), और डाइमीटर (पॉइंट). इस पेज पर, प्रोग्राम के ज़रिए किसी डेटासेट को ऐक्सेस करने और उसकी सुविधाओं को स्टाइल करने का तरीका बताया गया है. साथ ही, इसमें पॉइंट, पॉलीगॉन, और पॉलीलाइन ज्यामिति के आधार पर डेटा की सुविधाओं के लिए स्टाइलिंग के उदाहरण दिए गए हैं.

डेटासेट के लिए डेटा के हिसाब से स्टाइलिंग की सुविधा, डेटा की सुविधाओं को रेंडर करती है. ऐसा, डेटासेट बनाने के लिए इस्तेमाल की गई जियोस्पेशल डेटा फ़ाइल से मिले अक्षांश और देशांतर के कोऑर्डिनेट के आधार पर किया जाता है.

डेटा फ़ीचर के एट्रिब्यूट

डेटासेट में मौजूद सभी डेटा को, स्टाइल फ़ंक्शन की सुविधा में ऐक्सेस किया जा सकता है. डेटा की सुविधा से जुड़े एट्रिब्यूट पाने के लिए, सबसे पहले डेटासेट की सुविधा पाएं. इसमें डेटासेट का पूरा डेटा शामिल होता है. इसके बाद, वह डेटा एट्रिब्यूट पाएं जो आपको चाहिए. यहां दिखाया गया है:

TypeScript

// 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'];
index.ts

JavaScript

// 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'];
index.js

स्टाइल के विकल्प

स्टाइल से जुड़े विकल्प की मदद से, डेटा फ़ीचर लेयर के लिए स्टाइल तय की जाती है. उदाहरण के लिए, पॉलीगॉन के लिए फ़िल और स्ट्रोक की स्टाइल या पॉइंट के लिए रंग और व्यास. यहां दिए गए उदाहरण में, सुविधा के स्टाइल विकल्प दिखाए गए हैं. इन्हें किसी सुविधा के लिए, style प्रॉपर्टी का इस्तेमाल करके सीधे तौर पर लागू किया जा सकता है:

TypeScript

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

JavaScript

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

सुविधा की स्टाइल तय करने वाला फ़ंक्शन

डेटासेट की सुविधाओं को स्टाइल करने के लिए लॉजिक तय करने के लिए, फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल करें. किसी सुविधा को स्टाइल करने के लिए, 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(/* FeatureStyleFunctionOptions */ 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;
}
index.ts

JavaScript

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(/* FeatureStyleFunctionOptions */ 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;
}
index.js

स्टाइल फ़ंक्शन को सुविधाओं पर लागू करने पर, हमेशा एक जैसे नतीजे मिलने चाहिए. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सेट में रैंडम तरीके से रंग भरना है, तो रैंडम तरीके से रंग भरने की सुविधा, फ़ीचर स्टाइल फ़ंक्शन में नहीं होनी चाहिए. ऐसा करने पर, अनचाहे नतीजे मिल सकते हैं. यह फ़ंक्शन, लेयर की हर सुविधा पर काम करता है. इसलिए, ऑप्टिमाइज़ेशन ज़रूरी है. रेंडरिंग में लगने वाले समय पर असर न पड़े, इसके लिए जब किसी लेयर का इस्तेमाल न हो रहा हो, तब style को null पर सेट करें.

पॉइंट डेटा की स्टाइलिंग का उदाहरण

इस उदाहरण में, पॉइंट ज्यामिति पर आधारित डेटा सुविधाओं को स्टाइल करने का तरीका दिखाया गया है.

डेटासेट के बारे में जानकारी

इस उदाहरण में इस्तेमाल किया गया डेटासेट, न्यूयॉर्क सिटी के सेंट्रल पार्क में साल 2018 में गिलहरियों पर किए गए सर्वे का नतीजा है. CSV डेटा फ़ाइल के इस उद्धरण में, हम देखते हैं कि कॉलम x और y का इस्तेमाल जगह की जानकारी के लिए किया जाता है. इसमें LatLng कॉलम शामिल है, लेकिन इस उदाहरण में इसका इस्तेमाल नहीं किया गया है, क्योंकि जगह की जानकारी को दो कॉलम से दिखाना ज़रूरी है. गिलहरी की जनगणना के डेटासेट में, गिलहरियों के फ़रों के रंग और उनके व्यवहार से जुड़े अलग-अलग डेटा पॉइंट शामिल हैं. पूरा डेटा देखने के लिए, हॉरिज़ॉन्टल तौर पर स्क्रोल करें.

X Y UniqueSquirrelID हैक्टेयर Shift तारीख Hectare SquirrelNumber उम्र PrimaryFurColor HighlightFurColor CombinationofPrimaryandHighlightColor Colornotes जगह AboveGroundSighter Measurement SpecificLocation दौड़ना जानवर का पीछा जारी है क्लाइंबिंग खाना चारा ढूंढना अन्य गतिविधियां 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 स्लेटी स्लेटी+ Above Ground 10 गलत सही गलत गलत गलत गलत गलत गलत गलत गलत गलत गलत गलत POINT (-73.97428114848522 40.775533619083)
-73.9596413903948 40.7903128889029 32E-PM-1017-14 32E PM 10172018 14 वयस्क स्लेटी स्लेटी+ किसी भी डिवाइस को मुख्य डिवाइस के तौर पर नहीं चुना गया है. हाइलाइट के तौर पर चुने गए आइटम को ग्रे रंग में दिखाया गया है. कार्यकारी अडजस्टमेंट किए गए. गलत गलत गलत सही सही गलत गलत गलत गलत गलत गलत गलत सही POINT (-73.9596413903948 40.7903128889029)
-73.9702676472613 40.7762126854894 13E-AM-1017-05 13E AM 10172018 5 वयस्क स्लेटी दालचीनी स्लेटी+दालचीनी Above Ground पेड़ के ठूंठ पर गलत गलत गलत गलत सही गलत गलत गलत गलत गलत गलत गलत गलत POINT (-73.9702676472613 40.7762126854894)
-73.9683613516225 40.7725908847499 11H-AM-1010-03 11 घंटे AM 10102018 3 वयस्क दालचीनी सफ़ेद सिनेमन+सफ़ेद गलत गलत गलत गलत सही गलत गलत गलत गलत सही गलत सही गलत POINT (-73.9683613516225 40.7725908847499)
-73.9541201789795 40.7931811701082 36H-AM-1010-02 36 घंटे AM 10102018 2 वयस्क स्लेटी स्लेटी+ जस्ट आउटसाइड हैक्टेयर ग्राउंड प्लेन FALSE गलत गलत गलत गलत सही गलत गलत गलत गलत गलत गलत गलत गलत POINT (-73.9541201789795 40.7931811701082)

पॉइंट डेटा को स्टाइल करने की सुविधाएं

इस उदाहरण में दिए गए कोड में, हर पॉइंट के फ़िल कलर और स्ट्रोक कलर को स्टाइल करने का आसान तरीका बताया गया है. यह तरीका, CombinationofPrimaryandHighlightColor एट्रिब्यूट पर आधारित है. इस एट्रिब्यूट में, हर गिलहरी के लिए मुख्य और सेकंडरी फ़ुर कलर को एक साथ दिखाया जाता है.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
index.js

कोड का पूरा उदाहरण

पूरे उदाहरण का सोर्स कोड देखें

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}

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

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

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

    // 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.
async function makeLegend(innerMap) {
    let 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'],
    };

    let legend = document.getElementById('legend');
    legend!.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend!.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let 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');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend!.appendChild(wrapper);
    }
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        // Add the data legend.
        makeLegend(innerMap);
    });
    // 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.
async function makeLegend(innerMap) {
    let 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'],
    };
    let legend = document.getElementById('legend');
    legend.id = 'legend';
    let title = document.createElement('div');
    title.innerText = 'Fur Colors';
    title.classList.add('title');
    legend.appendChild(title);
    let color;
    for (color in colors) {
        let wrapper = document.createElement('div');
        wrapper.id = 'container';
        let 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');
        let txt = document.createElement('div');
        txt.classList.add('legend');
        txt.innerText = color;
        wrapper.appendChild(box);
        wrapper.appendChild(txt);
        legend.appendChild(wrapper);
    }
}
initMap();
index.js

सीएसएस

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

style.css

एचटीएमएल

<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>
        <!-- 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
            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>
index.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
          ]
        ]
      ]
    ]
  }
},

पॉलीगॉन डेटा फ़ीचर की स्टाइल बदलना

इस उदाहरण में दिया गया कोड, "Undeveloped" या "Parkway" की typecategory से जुड़ी डेटा सुविधाओं पर खास रंग लागू करता है. साथ ही, अन्य सभी सुविधाओं को हरे रंग में दिखाता है.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.ts

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
index.js

कोड का पूरा उदाहरण

पूरे उदाहरण का सोर्स कोड देखें

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}

async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

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

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'blue',
                fillOpacity: 0.3,
            };
            break;
        case 'Parkway': // Color historical house sites red.
            return /* FeatureStyleOptions */ {
                strokeColor: 'red',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'red',
                fillOpacity: 0.5,
            };
            break;
        default: // Color other type categories green.
            return /* FeatureStyleOptions */ {
                strokeColor: 'green',
                strokeWeight: 2,
                strokeOpacity: 1,
                fillColor: 'green',
                fillOpacity: 0.3,
            };
            break;
    }
}
async function initMap() {
    // 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;
}
initMap();
index.js

सीएसएस

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

style.css

एचटीएमएल

<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>
    <!-- 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="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>
index.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 };
index.ts

JavaScript

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

पूरे उदाहरण का सोर्स कोड देखें

TypeScript

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

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

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // 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 };
}
initMap();
index.js

सीएसएस

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

style.css

एचटीएमएल

<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>
        <!-- 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="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>
index.html

सैंपल आज़माएं