मैप में डेटासेट जोड़ना

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

FeatureStyleFunction, में, डेटासेट में चुनिंदा सुविधाओं को स्टाइल करने के लिए लॉजिक तय किया जाता है. यह इस लॉजिक के आधार पर FeatureStyleOptions दिखाता है. अगर स्टाइलिंग लॉजिक की ज़रूरत नहीं है, तो स्टाइल को सीधे सेट करने के लिए FeatureStyleOptions का इस्तेमाल किया जा सकता है. इस पेज पर, मैप में डेटासेट जोड़ने और स्टाइल लागू करने का तरीका बताया गया है.

ज़रूरी शर्तें

आगे बढ़ने से पहले, आपके पास मैप आईडी, मैप स्टाइल, और डेटासेट आईडी होना चाहिए.

• मैप आईडी और मैप स्टाइल बनाना
• डेटासेट बनाना और अपलोड करना

मैप स्टाइल के साथ डेटासेट आईडी जोड़ना

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

अपने डेटासेट को इस्तेमाल की जा रही मैप स्टाइल से जोड़ने के लिए, यह तरीका अपनाएं:

1. Google Cloud console में, डेटासेट पेज पर जाएं.
2. डेटासेट के नाम पर क्लिक करें. इसके बाद, डेटासेट की जानकारी वाला पेज दिखेगा.
3. झलक देखें टैब पर क्लिक करें.
4. स्क्रोल करके मैप स्टाइल जोड़ें पर जाएं और क्लिक करें.
   
5. जोड़ने के लिए, मैप स्टाइल के चेकबॉक्स पर क्लिक करें. इसके बाद, सेव करें पर क्लिक करें.

चेतावनी: मैप पर कई डेटासेट रेंडर करने से, परफ़ॉर्मेंस पर असर पड़ सकता है. यह असर, डेटासेट के साइज़ और संख्या के हिसाब से अलग-अलग हो सकता है.

स्टाइल के आसान नियमों का इस्तेमाल करना

सुविधाओं को स्टाइल करने का सबसे आसान तरीका है कि रंग, ओपैसिटी, और लाइन की मोटाई जैसे स्टाइल एट्रिब्यूट तय करने के लिए, FeatureStyleOptions पास करें. फ़ीचर स्टाइल के विकल्पों को सीधे डेटासेट की मैप लेयर पर लागू करें या उन्हें FeatureStyleFunction के साथ इस्तेमाल करें.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में जानने के लिए, गाइड पढ़ें.

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

डिक्लेरेटिव स्टाइल वाले नियमों का इस्तेमाल करना

FeatureStyleFunction का इस्तेमाल करके, स्टाइल के नियम सेट करें और उन्हें अपने पूरे डेटासेट पर लागू करें. डेटासेट एट्रिब्यूट की वैल्यू के आधार पर, किसी सुविधा पर FeatureStyleOptions लागू करें. आपके पास अपने फ़ीचर स्टाइल फ़ंक्शन से null को वापस करने का विकल्प भी है. उदाहरण के लिए, अगर आपको सुविधाओं के सबसेट को छिपाकर रखना है. इस उदाहरण में, स्टाइल फ़ंक्शन दिखाया गया है. यह फ़ंक्शन, डेटा एट्रिब्यूट के आधार पर पॉइंट के सेट को कलर करता है:

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में जानने के लिए, गाइड पढ़ें.

JavaScript

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;
    }
}
index.js

डेटासेट की मैप लेयर पर स्टाइल लागू करना

सुविधा के स्टाइल फ़ंक्शन में स्टाइल लागू करने के लिए:

1. डेटासेट आईडी पास करके, map.getDatasetFeatureLayer() को कॉल करें और डेटासेट की मैप लेयर पाएं.
2. डेटासेट लेयर पर, सुविधा की स्टाइल के विकल्प (जैसे, styleOptions) या फ़ंक्शन (जैसे, setStyle) सेट करके स्टाइल लागू करें.

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में जानने के लिए, गाइड पढ़ें.

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

किसी लेयर से स्टाइल हटाना

किसी लेयर से स्टाइल हटाने के लिए, style को null पर सेट करें:

featureLayer.style = null;

आपके पास फ़ीचर स्टाइल फ़ंक्शन से null को रिटर्न करने का विकल्प भी है. उदाहरण के लिए, अगर आपको सुविधाओं के सबसेट को छिपाकर रखना है.

एट्रिब्यूशन टेक्स्ट जोड़ना

Google Maps पर अपलोड किए गए डेटासेट दिखाते समय, आपके मैप पर ज़रूरी एट्रिब्यूशन दिखने चाहिए. एट्रिब्यूशन टेक्स्ट से Google का लोगो छिपना नहीं चाहिए या उसमें कोई रुकावट नहीं आनी चाहिए.

एट्रिब्यूशन टेक्स्ट जोड़ने का एक तरीका, कस्टम कंट्रोल का इस्तेमाल करना है. इससे मैप पर स्टैंडर्ड जगहों पर, अपनी पसंद के मुताबिक एचटीएमएल डाला जा सकता है. यहां दिए गए कोड स्निपेट, इस सैंपल में एट्रिब्यूशन के लिए इस्तेमाल किए गए एचटीएमएल और सीएसएस को दिखाते हैं:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

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