Handle mouse events

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:

  1. 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;
      }
    });
    

  2. Add event handler code to style the selected feature based on the type of interaction.

    TypeScript

    // 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;
    }

    JavaScript

    // 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;
    }
    

  3. 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 on click, and a default style.

    TypeScript

    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;
    }

    JavaScript

    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;
    }
    

Complete example code

TypeScript

let map: google.maps.Map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// 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;
}

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
  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;
    }
  });
  const attributionDiv = document.createElement('div');
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

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;
}

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 lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// 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;
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const position = { lat: 40.780101, lng: -73.96778 };

  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 = 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;
    }
  });

  const attributionDiv = document.createElement("div");
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

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;
}

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();