From da343b9e481094182987b79eb806a9c8779ef85f Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 4 Feb 2026 10:21:40 -0800 Subject: [PATCH 1/8] feat: Migrates the dds-datasets-polygon-click sample. --- samples/dds-datasets-polygon-click/README.md | 41 +++++++ samples/dds-datasets-polygon-click/index.html | 30 +++++ samples/dds-datasets-polygon-click/index.ts | 108 ++++++++++++++++++ .../dds-datasets-polygon-click/package.json | 14 +++ samples/dds-datasets-polygon-click/style.css | 24 ++++ .../dds-datasets-polygon-click/tsconfig.json | 17 +++ 6 files changed, 234 insertions(+) create mode 100644 samples/dds-datasets-polygon-click/README.md create mode 100644 samples/dds-datasets-polygon-click/index.html create mode 100644 samples/dds-datasets-polygon-click/index.ts create mode 100644 samples/dds-datasets-polygon-click/package.json create mode 100644 samples/dds-datasets-polygon-click/style.css create mode 100644 samples/dds-datasets-polygon-click/tsconfig.json diff --git a/samples/dds-datasets-polygon-click/README.md b/samples/dds-datasets-polygon-click/README.md new file mode 100644 index 00000000..9712a770 --- /dev/null +++ b/samples/dds-datasets-polygon-click/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## dds-datasets-polygon-click + +This sample shows how to make data features respond to mouse events. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/dds-datasets-polygon-click` +`npm start` + +### Build an individual example + +`cd samples/dds-datasets-polygon-click` +`npm run build` + +From 'samples': + +`npm run build --workspace=dds-datasets-polygon-click/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/dds-datasets-polygon-click` +`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/samples/dds-datasets-polygon-click/index.html b/samples/dds-datasets-polygon-click/index.html new file mode 100644 index 00000000..2afa29fc --- /dev/null +++ b/samples/dds-datasets-polygon-click/index.html @@ -0,0 +1,30 @@ + + + + + + Style a polygon data feature + + + + + + + + +
+ Data source: NYC Open Data +
+ + + + diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts new file mode 100644 index 00000000..6c267c57 --- /dev/null +++ b/samples/dds-datasets-polygon-click/index.ts @@ -0,0 +1,108 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_dds_datasets_polygon_click] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; +let lastInteractedFeatureIds: string[] = []; +let lastClickedFeatureIds: string[] = []; +let datasetLayer; + +// [START maps_dds_datasets_polygon_click_eventhandler] +// Note, 'globalid' is an attribute in this Dataset. +function handleClick(/* MouseEvent */ e) { + if (e.features) { + lastClickedFeatureIds = e.features.map( + (f) => f.datasetAttributes['globalid'] + ); + } + datasetLayer.style = applyStyle; +} + +function handleMouseMove(/* MouseEvent */ e) { + if (e.features) { + lastInteractedFeatureIds = e.features.map( + (f) => f.datasetAttributes['globalid'] + ); + } + datasetLayer.style = applyStyle; +} +// [END maps_dds_datasets_polygon_click_eventhandler] + +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'; + + // [START maps_dds_datasets_polygon_click_addlistener] + datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); + datasetLayer.style = applyStyle; + + datasetLayer.addListener('click', handleClick); + datasetLayer.addListener('mousemove', handleMouseMove); + + // Map event listener. + innerMap.addListener('mousemove', () => { + // If the map gets a mousemove, that means there are no feature layers + // with listeners registered under the mouse, so we clear the last + // interacted feature ids. + if (lastInteractedFeatureIds?.length) { + lastInteractedFeatureIds = []; + datasetLayer.style = applyStyle; + } + }); + // [END maps_dds_datasets_polygon_click_addlistener] +} + +// [START maps_dds_datasets_polygon_click_stylefunction] +const styleDefault = { + strokeColor: 'green', + strokeWeight: 2.0, + strokeOpacity: 1.0, + fillColor: 'green', + fillOpacity: 0.3, +}; + +const styleClicked = { + ...styleDefault, + strokeColor: 'blue', + fillColor: 'blue', + fillOpacity: 0.5, +}; + +const styleMouseMove = { + ...styleDefault, + strokeWeight: 4.0, +}; + +function applyStyle(/* FeatureStyleFunctionOptions */ params) { + const datasetFeature = params.feature; + // Note, 'globalid' is an attribute in this dataset. + if ( + lastClickedFeatureIds.includes( + datasetFeature.datasetAttributes['globalid'] + ) + ) { + return styleClicked; + } + + if ( + lastInteractedFeatureIds.includes( + datasetFeature.datasetAttributes['globalid'] + ) + ) { + return styleMouseMove; + } + return styleDefault; +} +// [END maps_dds_datasets_polygon_click_stylefunction] + +initMap(); +// [END maps_dds_datasets_polygon_click] diff --git a/samples/dds-datasets-polygon-click/package.json b/samples/dds-datasets-polygon-click/package.json new file mode 100644 index 00000000..3b76c62c --- /dev/null +++ b/samples/dds-datasets-polygon-click/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/dds-datasets-polygon-click", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh dds-datasets-polygon-click && bash ../app.sh dds-datasets-polygon-click && bash ../docs.sh dds-datasets-polygon-click && npm run build:vite --workspace=. && bash ../dist.sh dds-datasets-polygon-click", + "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/samples/dds-datasets-polygon-click/style.css b/samples/dds-datasets-polygon-click/style.css new file mode 100644 index 00000000..f9de7495 --- /dev/null +++ b/samples/dds-datasets-polygon-click/style.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_dds_datasets_polygon_click] */ +/* + * 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_click] */ diff --git a/samples/dds-datasets-polygon-click/tsconfig.json b/samples/dds-datasets-polygon-click/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/dds-datasets-polygon-click/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" + } +} From 698c2b9da5804b5ee0d933b53cdf3e29bff5b45a Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 11:08:26 -0800 Subject: [PATCH 2/8] Update index.ts --- samples/dds-datasets-polygon-click/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index 6c267c57..acb1a60d 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -45,8 +45,8 @@ async function initMap() { datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; - datasetLayer.addListener('click', handleClick); - datasetLayer.addListener('mousemove', handleMouseMove); + await datasetLayer.addListener('click', handleClick); + await datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. innerMap.addListener('mousemove', () => { From 8f4f192de732ee209847f99c4ce5b469cd9d6f31 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 11:15:23 -0800 Subject: [PATCH 3/8] Refactor event listener addition for dataset layer --- samples/dds-datasets-polygon-click/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index acb1a60d..83efad12 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -45,8 +45,8 @@ async function initMap() { datasetLayer = innerMap.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; - await datasetLayer.addListener('click', handleClick); - await datasetLayer.addListener('mousemove', handleMouseMove); + datasetLayer.addListener('click', handleClick); + datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. innerMap.addListener('mousemove', () => { @@ -84,6 +84,10 @@ const styleMouseMove = { function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; + if (!datasetFeature.datasetAttributes || !datasetFeature.datasetAttributes['globalid']) { + return styleDefault; + } + // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( From 15f22f89d37d74c254bdab73ad18460f23550624 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 11:21:03 -0800 Subject: [PATCH 4/8] Refactor applyStyle function to simplify checks Remove unnecessary check for datasetAttributes in applyStyle function. --- samples/dds-datasets-polygon-click/index.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index 83efad12..fbf26529 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -84,10 +84,7 @@ const styleMouseMove = { function applyStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; - if (!datasetFeature.datasetAttributes || !datasetFeature.datasetAttributes['globalid']) { - return styleDefault; - } - + // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( From 6cb3c8fca4c339ca1e0bf017c2527e8226f3aa8b Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 12:17:20 -0800 Subject: [PATCH 5/8] Comment out mousemove listener in index.ts Temporarily comment out mousemove event listener for testing. --- samples/dds-datasets-polygon-click/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index fbf26529..45386266 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -49,6 +49,7 @@ async function initMap() { datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. + /** TEMPORARILY COMMENTING OUT FOR TESTING... innerMap.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last @@ -57,7 +58,7 @@ async function initMap() { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } - }); + });*/ // [END maps_dds_datasets_polygon_click_addlistener] } From a0dc84fd38f765415dc0735be726956e6a82a5a5 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 12:19:40 -0800 Subject: [PATCH 6/8] Restore commented stanza Done testing, sorry to say that didn't move the needle. --- samples/dds-datasets-polygon-click/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index 45386266..fbf26529 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -49,7 +49,6 @@ async function initMap() { datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. - /** TEMPORARILY COMMENTING OUT FOR TESTING... innerMap.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last @@ -58,7 +57,7 @@ async function initMap() { lastInteractedFeatureIds = []; datasetLayer.style = applyStyle; } - });*/ + }); // [END maps_dds_datasets_polygon_click_addlistener] } From 42bf2e6851f5a07c671728f3f8c33a9d99e5b7c8 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 12:45:32 -0800 Subject: [PATCH 7/8] Swap 'globalid' for 'typecategory' in feature ID checks temporary change from 'globalid' to 'typecategory' in feature ID checks. This will help us to determine if globalid has a role in the 400 errors in the tests. --- samples/dds-datasets-polygon-click/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index fbf26529..fb634c29 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -88,7 +88,7 @@ function applyStyle(/* FeatureStyleFunctionOptions */ params) { // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( - datasetFeature.datasetAttributes['globalid'] + datasetFeature.datasetAttributes['typecategory'] // Temporarily changed from globalid for testing. CHANGE BACK ) ) { return styleClicked; @@ -96,7 +96,7 @@ function applyStyle(/* FeatureStyleFunctionOptions */ params) { if ( lastInteractedFeatureIds.includes( - datasetFeature.datasetAttributes['globalid'] + datasetFeature.datasetAttributes['typecategory'] // Temporarily changed from globalid for testing. CHANGE BACK ) ) { return styleMouseMove; From 7e228a5cb6bed6d60c5c2a11ae8387e9adba3101 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 6 Feb 2026 12:59:08 -0800 Subject: [PATCH 8/8] Restore usage of 'globalid' in feature checks Reverted changes to use 'globalid' attribute for feature identification. --- samples/dds-datasets-polygon-click/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/dds-datasets-polygon-click/index.ts b/samples/dds-datasets-polygon-click/index.ts index fb634c29..fbf26529 100644 --- a/samples/dds-datasets-polygon-click/index.ts +++ b/samples/dds-datasets-polygon-click/index.ts @@ -88,7 +88,7 @@ function applyStyle(/* FeatureStyleFunctionOptions */ params) { // Note, 'globalid' is an attribute in this dataset. if ( lastClickedFeatureIds.includes( - datasetFeature.datasetAttributes['typecategory'] // Temporarily changed from globalid for testing. CHANGE BACK + datasetFeature.datasetAttributes['globalid'] ) ) { return styleClicked; @@ -96,7 +96,7 @@ function applyStyle(/* FeatureStyleFunctionOptions */ params) { if ( lastInteractedFeatureIds.includes( - datasetFeature.datasetAttributes['typecategory'] // Temporarily changed from globalid for testing. CHANGE BACK + datasetFeature.datasetAttributes['globalid'] ) ) { return styleMouseMove;