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

प्लैटफ़ॉर्म चुनें: 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(/* 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

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

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

डेटासेट की फ़ीचर लेयर पर स्टाइल लागू करना

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

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

TypeScript

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

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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

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

featureLayer.style = null;

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

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

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

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

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}
index.ts

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

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

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

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

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

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.js