diff --git a/samples/dds-datasets-polygon-colors/README.md b/samples/dds-datasets-polygon-colors/README.md new file mode 100644 index 00000000..33c99108 --- /dev/null +++ b/samples/dds-datasets-polygon-colors/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/samples/dds-datasets-polygon-colors/index.html b/samples/dds-datasets-polygon-colors/index.html new file mode 100644 index 00000000..2eec92dd --- /dev/null +++ b/samples/dds-datasets-polygon-colors/index.html @@ -0,0 +1,24 @@ + + + + + + Style a polygon data feature with more detail + + + + + + + + +
Data source: NYC Open Data
+ + + + diff --git a/samples/dds-datasets-polygon-colors/index.ts b/samples/dds-datasets-polygon-colors/index.ts new file mode 100644 index 00000000..e2122dae --- /dev/null +++ b/samples/dds-datasets-polygon-colors/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/samples/dds-datasets-polygon-colors/package.json b/samples/dds-datasets-polygon-colors/package.json new file mode 100644 index 00000000..9256f4a5 --- /dev/null +++ b/samples/dds-datasets-polygon-colors/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/samples/dds-datasets-polygon-colors/style.css b/samples/dds-datasets-polygon-colors/style.css new file mode 100644 index 00000000..a4736cb9 --- /dev/null +++ b/samples/dds-datasets-polygon-colors/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/samples/dds-datasets-polygon-colors/tsconfig.json b/samples/dds-datasets-polygon-colors/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/dds-datasets-polygon-colors/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" + } +}