Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/dds-datasets/add-dataset-to-map.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/dds-datasets/add-dataset-to-map.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/dds-datasets/add-dataset-to-map.md.txt "View this page for the JavaScript platform docs.")
The [`FeatureStyleFunction`](https://developers.google.com/maps/documentation/javascript/reference/data-driven-styling.md.txt#FeatureLayer.style),
is where you define logic to selectively style features in a dataset. It
returns [`FeatureStyleOptions`](https://developers.google.com/maps/documentation/javascript/reference/data-driven-styling.md.txt#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](https://developers.google.com/maps/documentation/javascript/dds-datasets/start.md.txt#create_a_map_id)
- [Create and upload a dataset](https://developers.google.com/maps/documentation/javascript/dds-datasets/create-dataset.md.txt)
## Associate a dataset ID with a map style
> [!WARNING]
> **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](https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over), 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](https://console.cloud.google.com/google/maps-apis/datasets).
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]
> **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
```typescript
const styleOptions = {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
```
### JavaScript
```javascript
const styleOptions = {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
```
## 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
```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;
}
}
```
### JavaScript
```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;
}
}
```
## 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
```typescript
// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
```
### JavaScript
```javascript
// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
```
## Remove styling from a layer
To remove styling from a layer, set the `style` to `null`:
```javascript
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](https://developers.google.com/maps/documentation/javascript/controls.md.txt#CustomControls)
to place arbitrary HTML at standard positions on the map. The following code
snippets show the HTML and CSS used for attributions in this sample:
```html
Data source: NYC Open Data
```
```css
#attribution {
background-color: rgba(255, 255, 255, 0.7);
font-family: 'Roboto', 'Arial', sans-serif;
font-size: 10px;
padding: 2px;
margin: 2px;
}
```