diff --git a/dist/index.html b/dist/index.html
index 1c008901..53e074f7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -60,6 +60,7 @@ Maps JSAPI Samples
control-simple
dds-datasets-point
dds-datasets-polygon
+ dds-datasets-polygon-colors
dds-datasets-polyline
dds-region-viewer
deckgl-heatmap
diff --git a/dist/samples/dds-datasets-polygon-colors/app/.eslintsrc.json b/dist/samples/dds-datasets-polygon-colors/app/.eslintsrc.json
new file mode 100644
index 00000000..4c44dab0
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/.eslintsrc.json
@@ -0,0 +1,13 @@
+{
+ "extends": [
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "rules": {
+ "@typescript-eslint/ban-ts-comment": 0,
+ "@typescript-eslint/no-this-alias": 1,
+ "@typescript-eslint/no-empty-function": 1,
+ "@typescript-eslint/explicit-module-boundary-types": 1,
+ "@typescript-eslint/no-unused-vars": 1
+ }
+}
diff --git a/dist/samples/dds-datasets-polygon-colors/app/README.md b/dist/samples/dds-datasets-polygon-colors/app/README.md
new file mode 100644
index 00000000..33c99108
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/README.md
@@ -0,0 +1,41 @@
+# Google Maps JavaScript Sample
+
+## dds-datasets-polygon-colors
+
+This example shows an approach to styling polygon geometry based data features.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/dds-datasets-polygon-colors`
+`npm start`
+
+### Build an individual example
+
+`cd samples/dds-datasets-polygon-colors`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=dds-datasets-polygon-colors/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/dds-datasets-polygon-colors`
+`npx eslint index.ts`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/dist/samples/dds-datasets-polygon-colors/app/index.html b/dist/samples/dds-datasets-polygon-colors/app/index.html
new file mode 100644
index 00000000..2eec92dd
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Style a polygon data feature with more detail
+
+
+
+
+
+
+
+
+ Data source: NYC Open Data
+
+
+
+
diff --git a/dist/samples/dds-datasets-polygon-colors/app/index.ts b/dist/samples/dds-datasets-polygon-colors/app/index.ts
new file mode 100644
index 00000000..e2122dae
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/index.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_dds_datasets_polygon_colors]
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
+// [START maps_dds_datasets_polygon_colors_style_function]
+function setStyle(/* FeatureStyleFunctionOptions */ params) {
+ const datasetFeature = params.feature;
+ // 'typecategory' is an attribute in this Dataset.
+ const typeCategory = datasetFeature.datasetAttributes['typecategory'];
+
+ switch (typeCategory) {
+ case 'Undeveloped': // Color undeveloped areas blue.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'blue',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'blue',
+ fillOpacity: 0.3,
+ };
+ break;
+ case 'Parkway': // Color historical house sites red.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'red',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'red',
+ fillOpacity: 0.5,
+ };
+ break;
+ default: // Color other type categories green.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'green',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 0.3,
+ };
+ break;
+ }
+}
+// [END maps_dds_datasets_polygon_colors_style_function]
+
+async function initMap() {
+ // Request needed libraries.
+ await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+
+ // Get the inner map.
+ innerMap = mapElement.innerMap;
+
+ // Dataset ID for NYC park data.
+ const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
+ const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
+ datasetLayer.style = setStyle;
+}
+
+initMap();
+// [END maps_dds_datasets_polygon_colors]
diff --git a/dist/samples/dds-datasets-polygon-colors/app/package.json b/dist/samples/dds-datasets-polygon-colors/app/package.json
new file mode 100644
index 00000000..9256f4a5
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@js-api-samples/dds-datasets-polygon-colors",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh dds-datasets-polygon-colors && bash ../app.sh dds-datasets-polygon-colors && bash ../docs.sh dds-datasets-polygon-colors && npm run build:vite --workspace=. && bash ../dist.sh dds-datasets-polygon-colors",
+ "test": "tsc && npm run build:vite --workspace=.",
+ "start": "tsc && vite build --base './' && vite",
+ "build:vite": "vite build --base './'",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+
+ }
+}
diff --git a/dist/samples/dds-datasets-polygon-colors/app/style.css b/dist/samples/dds-datasets-polygon-colors/app/style.css
new file mode 100644
index 00000000..a4736cb9
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/style.css
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_dds_datasets_polygon_colors] */
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#attribution {
+ background-color: rgba(255, 255, 255, 0.7);
+ font-family: "Roboto", "Arial", "sans-serif";
+ font-size: 10px;
+ padding: 2px;
+ margin: 2px;
+}
+
+/* [END maps_dds_datasets_polygon_colors] */
\ No newline at end of file
diff --git a/dist/samples/dds-datasets-polygon-colors/app/tsconfig.json b/dist/samples/dds-datasets-polygon-colors/app/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/app/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "esnext",
+ "strict": true,
+ "noImplicitAny": false,
+ "lib": [
+ "es2015",
+ "esnext",
+ "es6",
+ "dom",
+ "dom.iterable"
+ ],
+ "moduleResolution": "Node",
+ "jsx": "preserve"
+ }
+}
diff --git a/dist/samples/dds-datasets-polygon-colors/dist/assets/index-BqXZ8XbW.js b/dist/samples/dds-datasets-polygon-colors/dist/assets/index-BqXZ8XbW.js
new file mode 100644
index 00000000..b0392ee6
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/dist/assets/index-BqXZ8XbW.js
@@ -0,0 +1 @@
+(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&i(s)}).observe(document,{childList:!0,subtree:!0});function a(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function i(e){if(e.ep)return;e.ep=!0;const t=a(e);fetch(e.href,t)}})();const c=document.querySelector("gmp-map");let n;function l(o){switch(o.feature.datasetAttributes.typecategory){case"Undeveloped":return{strokeColor:"blue",strokeWeight:2,strokeOpacity:1,fillColor:"blue",fillOpacity:.3};case"Parkway":return{strokeColor:"red",strokeWeight:2,strokeOpacity:1,fillColor:"red",fillOpacity:.5};default:return{strokeColor:"green",strokeWeight:2,strokeOpacity:1,fillColor:"green",fillOpacity:.3}}}async function d(){await google.maps.importLibrary("maps"),n=c.innerMap;const r=n.getDatasetFeatureLayer("a75dd002-ad20-4fe6-af60-27cd2ed636b4");r.style=l}d();
diff --git a/dist/samples/dds-datasets-polygon-colors/dist/assets/index-DBFNArx3.css b/dist/samples/dds-datasets-polygon-colors/dist/assets/index-DBFNArx3.css
new file mode 100644
index 00000000..e05e3eef
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/dist/assets/index-DBFNArx3.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0;padding:0}#attribution{background-color:#ffffffb3;font-family:Roboto,Arial,"sans-serif";font-size:10px;padding:2px;margin:2px}
diff --git a/dist/samples/dds-datasets-polygon-colors/dist/index.html b/dist/samples/dds-datasets-polygon-colors/dist/index.html
new file mode 100644
index 00000000..afcdcfac
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/dist/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Style a polygon data feature with more detail
+
+
+
+
+
+
+
+
+ Data source: NYC Open Data
+
+
+
+
diff --git a/dist/samples/dds-datasets-polygon-colors/docs/index.html b/dist/samples/dds-datasets-polygon-colors/docs/index.html
new file mode 100644
index 00000000..2eec92dd
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/docs/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Style a polygon data feature with more detail
+
+
+
+
+
+
+
+
+ Data source: NYC Open Data
+
+
+
+
diff --git a/dist/samples/dds-datasets-polygon-colors/docs/index.js b/dist/samples/dds-datasets-polygon-colors/docs/index.js
new file mode 100644
index 00000000..e1c255a9
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/docs/index.js
@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// [START maps_dds_datasets_polygon_colors]
+const mapElement = document.querySelector('gmp-map');
+let innerMap;
+// [START maps_dds_datasets_polygon_colors_style_function]
+function setStyle(/* FeatureStyleFunctionOptions */ params) {
+ const datasetFeature = params.feature;
+ // 'typecategory' is an attribute in this Dataset.
+ const typeCategory = datasetFeature.datasetAttributes['typecategory'];
+ switch (typeCategory) {
+ case 'Undeveloped': // Color undeveloped areas blue.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'blue',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'blue',
+ fillOpacity: 0.3,
+ };
+ break;
+ case 'Parkway': // Color historical house sites red.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'red',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'red',
+ fillOpacity: 0.5,
+ };
+ break;
+ default: // Color other type categories green.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'green',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 0.3,
+ };
+ break;
+ }
+}
+// [END maps_dds_datasets_polygon_colors_style_function]
+async function initMap() {
+ // Request needed libraries.
+ await google.maps.importLibrary("maps");
+ // Get the inner map.
+ innerMap = mapElement.innerMap;
+ // Dataset ID for NYC park data.
+ const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
+ const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
+ datasetLayer.style = setStyle;
+}
+initMap();
+// [END maps_dds_datasets_polygon_colors]
diff --git a/dist/samples/dds-datasets-polygon-colors/docs/index.ts b/dist/samples/dds-datasets-polygon-colors/docs/index.ts
new file mode 100644
index 00000000..e2122dae
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/docs/index.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_dds_datasets_polygon_colors]
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
+// [START maps_dds_datasets_polygon_colors_style_function]
+function setStyle(/* FeatureStyleFunctionOptions */ params) {
+ const datasetFeature = params.feature;
+ // 'typecategory' is an attribute in this Dataset.
+ const typeCategory = datasetFeature.datasetAttributes['typecategory'];
+
+ switch (typeCategory) {
+ case 'Undeveloped': // Color undeveloped areas blue.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'blue',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'blue',
+ fillOpacity: 0.3,
+ };
+ break;
+ case 'Parkway': // Color historical house sites red.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'red',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'red',
+ fillOpacity: 0.5,
+ };
+ break;
+ default: // Color other type categories green.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'green',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 0.3,
+ };
+ break;
+ }
+}
+// [END maps_dds_datasets_polygon_colors_style_function]
+
+async function initMap() {
+ // Request needed libraries.
+ await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+
+ // Get the inner map.
+ innerMap = mapElement.innerMap;
+
+ // Dataset ID for NYC park data.
+ const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
+ const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
+ datasetLayer.style = setStyle;
+}
+
+initMap();
+// [END maps_dds_datasets_polygon_colors]
diff --git a/dist/samples/dds-datasets-polygon-colors/docs/style.css b/dist/samples/dds-datasets-polygon-colors/docs/style.css
new file mode 100644
index 00000000..a4736cb9
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/docs/style.css
@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_dds_datasets_polygon_colors] */
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#attribution {
+ background-color: rgba(255, 255, 255, 0.7);
+ font-family: "Roboto", "Arial", "sans-serif";
+ font-size: 10px;
+ padding: 2px;
+ margin: 2px;
+}
+
+/* [END maps_dds_datasets_polygon_colors] */
\ No newline at end of file
diff --git a/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.css b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.css
new file mode 100644
index 00000000..f91d1095
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.css
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#attribution {
+ background-color: rgba(255, 255, 255, 0.7);
+ font-family: "Roboto", "Arial", "sans-serif";
+ font-size: 10px;
+ padding: 2px;
+ margin: 2px;
+}
+
diff --git a/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.details b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.details
new file mode 100644
index 00000000..6a144573
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: dds-datasets-polygon-colors
+authors:
+ - Geo Developer IX Documentation Team
+tags:
+ - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.html b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.html
new file mode 100644
index 00000000..2d824ae9
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Style a polygon data feature with more detail
+
+
+
+
+
+
+
+
+ Data source: NYC Open Data
+
+
+
+
diff --git a/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.js b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.js
new file mode 100644
index 00000000..0debed88
--- /dev/null
+++ b/dist/samples/dds-datasets-polygon-colors/jsfiddle/demo.js
@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const mapElement = document.querySelector('gmp-map');
+let innerMap;
+
+function setStyle(/* FeatureStyleFunctionOptions */ params) {
+ const datasetFeature = params.feature;
+ // 'typecategory' is an attribute in this Dataset.
+ const typeCategory = datasetFeature.datasetAttributes['typecategory'];
+ switch (typeCategory) {
+ case 'Undeveloped': // Color undeveloped areas blue.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'blue',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'blue',
+ fillOpacity: 0.3,
+ };
+ break;
+ case 'Parkway': // Color historical house sites red.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'red',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'red',
+ fillOpacity: 0.5,
+ };
+ break;
+ default: // Color other type categories green.
+ return /* FeatureStyleOptions */ {
+ strokeColor: 'green',
+ strokeWeight: 2,
+ strokeOpacity: 1,
+ fillColor: 'green',
+ fillOpacity: 0.3,
+ };
+ break;
+ }
+}
+
+async function initMap() {
+ // Request needed libraries.
+ await google.maps.importLibrary("maps");
+ // Get the inner map.
+ innerMap = mapElement.innerMap;
+ // Dataset ID for NYC park data.
+ const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
+ const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
+ datasetLayer.style = setStyle;
+}
+initMap();
+
diff --git a/index.html b/index.html
index 1c008901..53e074f7 100644
--- a/index.html
+++ b/index.html
@@ -60,6 +60,7 @@ Maps JSAPI Samples
control-simple
dds-datasets-point
dds-datasets-polygon
+ dds-datasets-polygon-colors
dds-datasets-polyline
dds-region-viewer
deckgl-heatmap
diff --git a/package-lock.json b/package-lock.json
index 5c76b159..34210ea7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1365,6 +1365,10 @@
"resolved": "samples/dds-datasets-polygon",
"link": true
},
+ "node_modules/@js-api-samples/dds-datasets-polygon-colors": {
+ "resolved": "samples/dds-datasets-polygon-colors",
+ "link": true
+ },
"node_modules/@js-api-samples/dds-datasets-polyline": {
"resolved": "samples/dds-datasets-polyline",
"link": true
@@ -5611,6 +5615,10 @@
"name": "@js-api-samples/dds-datasets-polygon",
"version": "1.0.0"
},
+ "samples/dds-datasets-polygon-colors": {
+ "name": "@js-api-samples/dds-datasets-polygon-colors",
+ "version": "1.0.0"
+ },
"samples/dds-datasets-polyline": {
"name": "@js-api-samples/dds-datasets-polyline",
"version": "1.0.0"