Make data features respond to mousemove and click events, and use them to change the appearance of a feature based on user interaction.
Enable dataset layer events
Take the following steps to enable events on a dataset layer:
Register a dataset layer for event notifications by calling the
addListener()function on the dataset layer for each event you want to register. In this example the map also gets a listener.TypeScript
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;}});
JavaScript
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;}});
Add event handler code to style the selected feature based on the type of interaction.
TypeScript
// Note, 'globalid' is an attribute in this Dataset.functionhandleClick(/* MouseEvent */e){if(e.features){lastClickedFeatureIds=e.features.map((f)=>f.datasetAttributes['globalid']);}//@ts-ignoredatasetLayer.style=applyStyle;}functionhandleMouseMove(/* MouseEvent */e){if(e.features){lastInteractedFeatureIds=e.features.map((f)=>f.datasetAttributes['globalid']);}//@ts-ignoredatasetLayer.style=applyStyle;}
JavaScript
// Note, 'globalid' is an attribute in this Dataset.functionhandleClick(/* MouseEvent */e){if(e.features){lastClickedFeatureIds=e.features.map((f)=>f.datasetAttributes["globalid"],);}//@ts-ignoredatasetLayer.style=applyStyle;}functionhandleMouseMove(/* MouseEvent */e){if(e.features){lastInteractedFeatureIds=e.features.map((f)=>f.datasetAttributes["globalid"],);}//@ts-ignoredatasetLayer.style=applyStyle;}
Use a feature style function to apply styles. The feature style function shown here conditionally applies style based on the type of interaction. Three styles are defined here: one to make the border bold on
mousemove, one to change the background onclick, and a default style.TypeScript
conststyleDefault={strokeColor:'green',strokeWeight:2.0,strokeOpacity:1.0,fillColor:'green',fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:'blue',fillColor:'blue',fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleMouseMove;}returnstyleDefault;}
JavaScript
conststyleDefault={strokeColor:"green",strokeWeight:2.0,strokeOpacity:1.0,fillColor:"green",fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:"blue",fillColor:"blue",fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0,};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"],)){returnstyleMouseMove;}returnstyleDefault;}
Complete example code
TypeScript
letmap:google.maps.Map;letlastInteractedFeatureIds=[];letlastClickedFeatureIds=[];letdatasetLayer;// Note, 'globalid' is an attribute in this Dataset.functionhandleClick(/* MouseEvent */e){if(e.features){lastClickedFeatureIds=e.features.map((f)=>f.datasetAttributes['globalid']);}//@ts-ignoredatasetLayer.style=applyStyle;}functionhandleMouseMove(/* MouseEvent */e){if(e.features){lastInteractedFeatureIds=e.features.map((f)=>f.datasetAttributes['globalid']);}//@ts-ignoredatasetLayer.style=applyStyle;}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary('maps')asgoogle.maps.MapsLibrary;constposition={lat:40.780101,lng:-73.967780};map=newMap(document.getElementById('map')asHTMLElement,{zoom:13,center:position,mapId:'b98e588c46685dd7',mapTypeControl:false,});// Dataset ID for NYC park data.constdatasetId='6fe13aa9-b900-45e7-b636-3236672c3f4f';//@ts-ignoredatasetLayer=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;}});constattributionDiv=document.createElement('div');constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}conststyleDefault={strokeColor:'green',strokeWeight:2.0,strokeOpacity:1.0,fillColor:'green',fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:'blue',fillColor:'blue',fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleMouseMove;}returnstyleDefault;}functioncreateAttribution(map){constattributionLabel=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';returnattributionLabel;}initMap();
JavaScript
letmap;letlastInteractedFeatureIds=[];letlastClickedFeatureIds=[];letdatasetLayer;// Note, 'globalid' is an attribute in this Dataset.functionhandleClick(/* MouseEvent */e){if(e.features){lastClickedFeatureIds=e.features.map((f)=>f.datasetAttributes["globalid"],);}//@ts-ignoredatasetLayer.style=applyStyle;}functionhandleMouseMove(/* MouseEvent */e){if(e.features){lastInteractedFeatureIds=e.features.map((f)=>f.datasetAttributes["globalid"],);}//@ts-ignoredatasetLayer.style=applyStyle;}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");constposition={lat:40.780101,lng:-73.96778};map=newMap(document.getElementById("map"),{zoom:13,center:position,mapId:"b98e588c46685dd7",mapTypeControl:false,});// Dataset ID for NYC park data.constdatasetId="6fe13aa9-b900-45e7-b636-3236672c3f4f";//@ts-ignoredatasetLayer=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;}});constattributionDiv=document.createElement("div");constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}conststyleDefault={strokeColor:"green",strokeWeight:2.0,strokeOpacity:1.0,fillColor:"green",fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:"blue",fillColor:"blue",fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0,};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"],)){returnstyleMouseMove;}returnstyleDefault;}functioncreateAttribution(map){constattributionLabel=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";returnattributionLabel;}initMap();
