Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/dds-datasets/add-dataset-to-map below:

Add a dataset to a map | Maps JavaScript API

Stay organized with collections Save and categorize content based on your preferences.

The FeatureStyleFunction, is where you define logic to selectively style features in a dataset. It returns FeatureStyleOptions based on this logic. If styling logic is not required, you can use FeatureStyleOptions to set styles directly. This page shows you how to add a dataset to a map, and apply styling.

Before proceeding, you should have a map ID and map style, and a dataset ID.

• Create a map ID and map style
• Create and upload a dataset

Take the following steps to associate your dataset with the map style you're using:

1. In the Google Cloud console, go to the Datasets page.
2. Click the name of the dataset. The Dataset details page appears.
3. Click the Preview tab.
4. Scroll to ADD MAP STYLE and click.
   
5. Click the checkbox(es) for the Map Style(s) to associate and then click SAVE.

The simplest way to style features is to pass a FeatureStyleOptions to define style attributes such as color, opacity, and line weight. Apply feature style options directly to a dataset feature layer, or use them in conjunction with a FeatureStyleFunction.

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

const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};

Use the FeatureStyleFunction to set style rules declaratively, and apply them across your entire dataset. Apply FeatureStyleOptions to a feature based on dataset attribute values. You can also return null from your feature style function, for example if you want a subset of features to remain invisible. This example shows a style function that colors a set of points based on data attributes:

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

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

To apply the styles in the feature style function:

1. Get the dataset feature layer by calling map.getDatasetFeatureLayer(), passing the dataset ID.
2. Apply the style by setting the feature style options (e.g. styleOptions) or function (e.g. setStyle) on the dataset layer.

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

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;

To remove styling from a layer, set the style to null:

featureLayer.style = null;

You can also return null from your feature style function, for example if you want a subset of features to remain invisible.

Your map must display any required attribution(s) when displaying uploaded datasets on Google Maps. Attribution text must not obscure or interfere with the Google logo.

One way to add attribution text is by using custom controls to place arbitrary HTML at standard positions on the map. The following code example shows a function that programmatically creates one such custom control:

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

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

Once the control is defined, you can add it to the map at initialization time, as shown here:

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

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["This documentation explains how to add and style datasets on a Google Map using the Data-driven Styling (DDS) feature."],["You can style features by applying simple style rules directly or using a `FeatureStyleFunction` for declarative styling based on dataset attributes."],["To display your dataset, associate its ID with your map style in the Google Cloud console and add it as a feature layer to your map."],["When displaying uploaded datasets, ensure proper attribution is included on the map using custom controls or other suitable methods."],["Styling can be removed from a layer by setting its `style` property to `null`, which can also be achieved within a `FeatureStyleFunction` for selective feature visibility."]]],["This document details styling datasets on Google Maps. Key actions include: associating a dataset ID with a map style in the Google Cloud console, and using `FeatureStyleOptions` to define simple styles like color and opacity. For advanced styling, the `FeatureStyleFunction` allows declarative rules based on dataset attributes. Applying styles involves getting the dataset feature layer via `map.getDatasetFeatureLayer()` and setting its style property. Additionally, it is explained how to add required attribution text using custom controls and how to remove styling by setting `style` to `null`.\n"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4