/
index.ts
126 lines (110 loc) · 3.61 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_dds_datasets_polygon_click]
let map: google.maps.Map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
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']);
}
//@ts-ignore
datasetLayer.style = applyStyle;
}
function handleMouseMove(/* MouseEvent */ e) {
if (e.features) {
lastInteractedFeatureIds =
e.features.map((f) => f.datasetAttributes['globalid']);
}
//@ts-ignore
datasetLayer.style = applyStyle;
}
// [END maps_dds_datasets_polygon_click_eventhandler]
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
const position = {lat: 40.780101, lng: -73.967780};
map = new Map(document.getElementById('map') as HTMLElement, {
zoom: 13,
center: position,
mapId: 'b98e588c46685dd7',
mapTypeControl: false,
});
// Dataset ID for NYC park data.
const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';
//@ts-ignore
// [START maps_dds_datasets_polygon_click_addlistener]
datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = applyStyle;
datasetLayer.addListener('click', handleClick);
datasetLayer.addListener('mousemove', handleMouseMove);
// Map event listener.
map.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]
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}
// [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.
//@ts-ignore
if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
return styleClicked;
}
//@ts-ignore
if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
return styleMouseMove;
}
return styleDefault;
}
// [END maps_dds_datasets_polygon_click_stylefunction]
function createAttribution(map) {
const attributionLabel = document.createElement('div');
// Define CSS styles.
attributionLabel.style.backgroundColor = '#fff';
attributionLabel.style.opacity = '0.7';
attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
attributionLabel.style.fontSize = '10px';
attributionLabel.style.padding = '2px';
attributionLabel.style.margin = '2px';
attributionLabel.textContent = 'Data source: NYC Open Data';
return attributionLabel;
}
initMap();
// [END maps_dds_datasets_polygon_click]
export { };