Add a dataset to a map

AI-generated Key Takeaways

• 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.

Select platform: Android iOS JavaScript

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.

Prerequisites

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

Associate a dataset ID with a map style

Experimental: This feature can only be set for light map styles. When you link a light map style that has this feature enabled to a map ID, the enabled layers are also available for the dark map style.

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.

Caution: Rendering multiple datasets on a map can affect performance depending on the size and number of datasets.

Use simple style rules

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.

TypeScript

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

Note: Read the guide on using TypeScript and Google Maps.

JavaScript

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

Use declarative style rules

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:

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

Note: Read the guide on using TypeScript and 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

Apply style to the dataset feature layer

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.

TypeScript

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

Note: Read the guide on using TypeScript and Google Maps.

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

Remove styling from a layer

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.

Add attribution text

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:

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

Note: Read the guide on using TypeScript and 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

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

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

Note: Read the guide on using TypeScript and 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