Skip to content

Commit e16c5ca

Browse files
willum070willum070
authored
feat: Migrates the dds-datasets-point sample. (#1073)
* feat: Migrates the dds-datasets-point sample. * Add data legend after innerMap is idle * Update index.ts * Comment out datasetLayer.style assignment Commented out the line that sets the dataset layer style. * Update initMap function and clean up comments Commented stuff out for testing. * Update index.ts Take everything out in an vain attempt to figure out why tests fail on a 400 error. * Refactor dataset ID and remove legend function Removed EVERYTHING to see if we can figure out WTF is causing test to fail. * Comment out map-id attribute in index.html Comment out the map-id attribute in the gmp-map element. * Remove commented-out map-id from index.html Removed commented-out map-id attribute from gmp-map. * Implement dataset feature styling and legend creation Change to set map ID programmatically since apparently the map ID is causing the test to fail (flaky). * Update map configuration in index.html Change to DEMO_MAP_ID to see if we can repro the 400 error on the test. * Remove mapId option from innerMap Removed setting map options for innerMap. * Update map ID in index.html * Change map ID in index.html * Update map ID in index.html Replace new map ID with the one from the previous version, for testing. * Update dataset ID for squirrel dataset testing with the old one (goes with the map ID that's in use for testing) * Update map ID in index.html Restoring to the map ID we want to use. * Update dataset ID for squirrel dataset Restoring to the dataset ID we want to use.
1 parent 0513059 commit e16c5ca

6 files changed

Lines changed: 299 additions & 0 deletions

File tree

‎samples/dds-datasets-point/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Google Maps JavaScript Sample
2+
3+
## dds-datasets-point
4+
5+
This example shows an approach to styling point geometry based data features.
6+
7+
## Setup
8+
9+
### Before starting run:
10+
11+
`npm i`
12+
13+
### Run an example on a local web server
14+
15+
`cd samples/dds-datasets-point`
16+
`npm start`
17+
18+
### Build an individual example
19+
20+
`cd samples/dds-datasets-point`
21+
`npm run build`
22+
23+
From 'samples':
24+
25+
`npm run build --workspace=dds-datasets-point/`
26+
27+
### Build all of the examples.
28+
29+
From 'samples':
30+
31+
`npm run build-all`
32+
33+
### Run lint to check for problems
34+
35+
`cd samples/dds-datasets-point`
36+
`npx eslint index.ts`
37+
38+
## Feedback
39+
40+
For feedback related to this sample, please open a new issue on
41+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

‎samples/dds-datasets-point/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2026 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_dds_datasets_point] -->
8+
<html>
9+
<head>
10+
<title>Style a point data feature</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
<!-- prettier-ignore -->
15+
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
16+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map
20+
map-id="5cd2c9ca1cf05670"
21+
center="40.780101, -73.967780"
22+
zoom="17"
23+
map-type-control="false"
24+
street-view-control="false"
25+
fullscreen-control="false">
26+
<div id="legend" slot="control-inline-start-block-start"></div>
27+
<div id="attributionLabel" slot="control-inline-start-block-end">
28+
Data source: NYC Open Data
29+
</div>
30+
</gmp-map>
31+
</body>
32+
</html>
33+
<!-- [END maps_dds_datasets_point] -->

‎samples/dds-datasets-point/index.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/**
2+
* @license
3+
* Copyright 2026 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
// [START maps_dds_datasets_point]
8+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
9+
let innerMap;
10+
// [START maps_dds_datasets_point_style_function]
11+
function setStyle(/* FeatureStyleFunctionOptions */ params) {
12+
// [START maps_dds_datasets_point_style_get_features]
13+
// Get the dataset feature, so we can work with all of its attributes.
14+
const datasetFeature = params.feature;
15+
// Get all of the needed dataset attributes.
16+
const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
17+
// [END maps_dds_datasets_point_style_get_features]
18+
19+
// Apply styles. Fill is primary fur color, stroke is secondary fur color.
20+
switch (furColors) {
21+
case 'Black+':
22+
return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
23+
break;
24+
case 'Cinnamon+':
25+
return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
26+
break;
27+
case 'Cinnamon+Gray':
28+
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
29+
break;
30+
case 'Cinnamon+White':
31+
return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
32+
break;
33+
case 'Gray+':
34+
return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
35+
break;
36+
case 'Gray+Cinnamon':
37+
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
38+
break;
39+
case 'Gray+Cinnamon, White':
40+
return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
41+
break;
42+
case 'Gray+White':
43+
return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
44+
break;
45+
default: // Color not defined.
46+
return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
47+
break;
48+
}
49+
}
50+
// [END maps_dds_datasets_point_style_function]
51+
52+
async function initMap() {
53+
// Request needed libraries.
54+
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
55+
56+
// Get the inner map.
57+
innerMap = mapElement.innerMap;
58+
59+
await google.maps.event.addListenerOnce(innerMap, 'idle', () => {
60+
// Add the data legend.
61+
makeLegend(innerMap);
62+
});
63+
64+
// Dataset ID for squirrel dataset.
65+
const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e';
66+
const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
67+
datasetLayer.style = setStyle;
68+
}
69+
70+
// Creates a legend for the map.
71+
async function makeLegend(innerMap) {
72+
let colors = {
73+
'black': ['black'],
74+
'cinnamon': ['#8b0000'],
75+
'cinnamon + gray': ['#8b0000','gray'],
76+
'cinnamon + white': ['#8b0000', 'white'],
77+
'gray': ['gray'],
78+
'gray + cinnamon': ['gray', '#8b0000'],
79+
'gray + cinnamon + white': ['silver', '#8b0000'],
80+
'gray + white': ['gray', 'white'],
81+
'no color data': ['yellow'],
82+
};
83+
84+
let legend = document.getElementById('legend');
85+
legend!.id = 'legend';
86+
let title = document.createElement('div');
87+
title.innerText = 'Fur Colors';
88+
title.classList.add('title');
89+
legend!.appendChild(title);
90+
let color;
91+
for (color in colors) {
92+
let wrapper = document.createElement('div');
93+
wrapper.id = 'container';
94+
let box = document.createElement('div');
95+
box.style.backgroundColor = colors[color][0];
96+
if (colors[color][1]) {
97+
box.style.borderColor = colors[color][1];
98+
} else {
99+
box.style.borderColor = colors[color][0];
100+
}
101+
box.classList.add('box');
102+
let txt = document.createElement('div');
103+
txt.classList.add('legend');
104+
txt.innerText = color;
105+
wrapper.appendChild(box);
106+
wrapper.appendChild(txt);
107+
legend!.appendChild(wrapper);
108+
}
109+
}
110+
111+
initMap();
112+
// [END maps_dds_datasets_point]

‎samples/dds-datasets-point/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@js-api-samples/dds-datasets-point",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh dds-datasets-point && bash ../app.sh dds-datasets-point && bash ../docs.sh dds-datasets-point && npm run build:vite --workspace=. && bash ../dist.sh dds-datasets-point",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}

‎samples/dds-datasets-point/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* @license
3+
* Copyright 2026 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_dds_datasets_point] */
7+
/*
8+
* Optional: Makes the sample page fill the window.
9+
*/
10+
html,
11+
body {
12+
height: 100%;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
#attributionLabel {
18+
background-color: rgba(255, 255, 255, 0.8);
19+
font-family: 'Roboto' ,'Arial', 'sans-serif';
20+
font-size: 10px;
21+
padding: 2px;
22+
margin: 2px;
23+
}
24+
25+
#legend,
26+
#dataset,
27+
#counter {
28+
background-color: #e5e5e5;
29+
width: 15em;
30+
margin-top: 2em;
31+
margin-left: 1em;
32+
border-radius: 8px;
33+
font-family: Roboto;
34+
overflow: hidden;
35+
}
36+
37+
#dataset select {
38+
border-radius: 0;
39+
padding: 0.1em;
40+
border: 1px solid black;
41+
width: auto;
42+
margin: 0.5em 1em;
43+
}
44+
45+
.title {
46+
padding: 0.5em 1em;
47+
font-weight: bold;
48+
font-size: 1.5em;
49+
margin-bottom: 0.5em;
50+
background-color: rgb(66, 133, 244);
51+
color: white;
52+
width: 100%;
53+
}
54+
55+
.button {
56+
font-size: 1.2em;
57+
margin: 1em;
58+
background-color: rgb(66, 133, 244);
59+
color: white;
60+
padding: 0.5em;
61+
border-radius: 8px;
62+
}
63+
64+
#legend #container {
65+
margin: 0.5em 1em;
66+
display: flex;
67+
}
68+
69+
#legend div .box {
70+
display: flex;
71+
width: 2em;
72+
height: 2em;
73+
border-radius: 50%;
74+
border: 3px solid;
75+
}
76+
77+
#legend div .legend {
78+
display: flex;
79+
padding: 0.5em;
80+
}
81+
82+
/* [END maps_dds_datasets_point] */

‎samples/dds-datasets-point/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

0 commit comments

Comments
 (0)