Make a data feature respond to click events by adding a click listener. The following example shows changing the appearance of a feature when it receives a click event.
Add an event listener
To add a listener, call addListener
off the dataset layer, as shown in the
following example:
TypeScript
datasetLayer.addListener('click', handleClick);
JavaScript
datasetLayer.addListener("click", handleClick);
Add a click event handler
In the click event handler for a dataset feature, you can access the attributes
of the dataset. The following example function assigns the globalid
of the
feature that was clicked, to a variable named lastClickedFeatureIds
.
TypeScript
function handleClick( /* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = // Note, 'globalid' is an attribute in this Dataset. e.features.map(f => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = setStyle; }
JavaScript
function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = // Note, 'globalid' is an attribute in this Dataset. e.features.map((f) => f.datasetAttributes["globalid"]); } //@ts-ignore datasetLayer.style = setStyle; }
Create the style function
In the style function, you can change the style attributes for the feature that was clicked. The following example style function changes the stroke color of the clicked feature to blue, and styles all other features green
TypeScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.5, }; } return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; }
JavaScript
function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.5, }; } return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; }
Complete example code
TypeScript
let map; let lastClickedFeatureIds = []; let datasetLayer; function handleClick( /* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = // Note, 'globalid' is an attribute in this Dataset. e.features.map(f => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = setStyle; } function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return /* FeatureStyleOptions */ { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 1, fillColor: 'blue', fillOpacity: 0.5, }; } return /* FeatureStyleOptions */ { strokeColor: 'green', strokeWeight: 2, strokeOpacity: 1, fillColor: 'green', fillOpacity: 0.3, }; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; const position = new LatLng(40.796675, -73.946275); const 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 datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; datasetLayer.addListener('click', handleClick); const attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } 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();
JavaScript
let map; let lastClickedFeatureIds = []; let datasetLayer; function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = // Note, 'globalid' is an attribute in this Dataset. e.features.map((f) => f.datasetAttributes["globalid"]); } //@ts-ignore datasetLayer.style = setStyle; } function setStyle(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return /* FeatureStyleOptions */ { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 1, fillColor: "blue", fillOpacity: 0.5, }; } return /* FeatureStyleOptions */ { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1, fillColor: "green", fillOpacity: 0.3, }; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { LatLng } = await google.maps.importLibrary("core"); const position = new LatLng(40.796675, -73.946275); const map = new Map(document.getElementById("map"), { zoom: 13, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f"; //@ts-ignore datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = setStyle; datasetLayer.addListener("click", handleClick); const attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } 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();