Skip to content

Commit

Permalink
feat: Updates DDS event handling examples to demo mouseover. (#1591)
Browse files Browse the repository at this point in the history 
* feat: Updates DDS event handling examples to demo mouseover.

Change-Id: I7882ccbdc034bc853966a9d857afcae6b6a2bf87

* Update index.ts

* Update index.ts

* Update index.ts

* Update boundaries-click index.ts

* Update index.ts for dds-datasets-polygon-click

* Update index.ts for boundaries-click

removes commented line

* Update index.ts 

renames region tag back to old name

* Update index.ts

renames event handler tag to old name
  • Loading branch information
@willum070
willum070 authored Sep 18, 2023
1 parent d3a1401 commit d5dd181
Show file tree
Hide file tree
Showing 2 changed files with 205 additions and 131 deletions.
178 changes: 109 additions & 69 deletions samples/boundaries-click/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,86 +7,126 @@
// [START maps_boundaries_click_event]
let map: google.maps.Map;
let featureLayer;
let infoWindow: google.maps.InfoWindow;
async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: 39.23, lng: -105.73 }, // Park County, CO
zoom: 8,
// In the cloud console, configure this Map ID with a style that enables the
// "Administrative Area Level 2" Data Driven Styling type.
mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
});
//[START maps_boundaries_click_event_add_layer]
// Add the feature layer.
//@ts-ignore
featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
// Add the event listener for the feature layer.
featureLayer.addListener('click', handlePlaceClick);
//[END maps_boundaries_click_event_add_layer]
infoWindow = new InfoWindow({});
// Apply style on load, to enable clicking.
applyStyleToSelected();
}
let infoWindow;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];

// [START maps_boundaries_click_event_handler]
// Handle the click event.
async function handlePlaceClick(event) {
let feature = event.features[0];
if (!feature.placeId) return;
// Apply the style to the feature layer.
applyStyleToSelected(feature.placeId);
// Add the info window.
const place = await feature.fetchPlace();
let content = '<span style="font-size:small">Display name: ' + place.displayName +
'<br/> Place ID: ' + feature.placeId +
'<br/> Feature type: ' + feature.featureType +
'</span>';
updateInfoWindow(content, event.latLng);
function handleClick(/* MouseEvent */ e) {
lastClickedFeatureIds = e.features.map(f => f.placeId);
lastInteractedFeatureIds = [];
featureLayer.style = applyStyle;
createInfoWindow(e);
}

function handleMouseMove(/* MouseEvent */ e) {
lastInteractedFeatureIds = e.features.map(f => f.placeId);
featureLayer.style = applyStyle;
}
// [END maps_boundaries_click_event_handler]

async function initMap() {
// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

map = new Map(document.getElementById('map') as HTMLElement, {
center: {lat: 39.23, lng: -105.73},
zoom: 8,
// In the cloud console, configure your Map ID with a style that enables the
// 'Administrative Area Level 2' Data Driven Styling type.
mapId: 'a3efe1c035bad51b', // Substitute your own map ID.
mapTypeControl: false,
});

//[START maps_boundaries_click_event_add_layer]
// Add the feature layer.
//@ts-ignore
featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');

// Add the event listeners for the feature layer.
featureLayer.addListener('click', handleClick);
featureLayer.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 = [];
featureLayer.style = applyStyle;
}
});
//[END maps_boundaries_click_event_add_layer]

// Create the infowindow.
infoWindow = new InfoWindow({});
// Apply style on load, to enable clicking.
featureLayer.style = applyStyle;
}

// Helper function for the infowindow.
async function createInfoWindow(event) {
let feature = event.features[0];
if (!feature.placeId) return;

// Update the infowindow.
const place = await feature.fetchPlace();
let content =
'<span style="font-size:small">Display name: ' + place.displayName +
'<br/> Place ID: ' + feature.placeId +
'<br/> Feature type: ' + feature.featureType + '</span>';

updateInfoWindow(content, event.latLng);
}

// [START maps_boundaries_click_event_style]
// Define styles.
// Stroke and fill with minimum opacity value.
//@ts-ignore
const styleDefault: google.maps.FeatureStyleOptions = {
strokeColor: '#810FCB',
strokeOpacity: 1.0,
strokeWeight: 2.0,
fillColor: 'white',
fillOpacity: 0.1 // Polygons must be visible to receive click events.
const styleDefault = {
strokeColor: '#810FCB',
strokeOpacity: 1.0,
strokeWeight: 2.0,
fillColor: 'white',
fillOpacity: 0.1, // Polygons must be visible to receive events.
};

// Style for the clicked Administrative Area Level 2 polygon.
//@ts-ignore
const styleClicked: google.maps.FeatureStyleOptions = {
...styleDefault,
fillColor: '#810FCB',
fillOpacity: 0.5
// Style for the clicked polygon.
const styleClicked = {
...styleDefault,
fillColor: '#810FCB',
fillOpacity: 0.5,
};
// [END maps_boundaries_click_event_style]
// Apply styles to the map.
function applyStyleToSelected(placeid?) {
// Apply styles to the feature layer.
featureLayer.style = (options) => {
// Style fill and stroke for a polygon.
if (placeid && options.feature.placeId == placeid) {
return styleClicked;
}
// Style only the stroke for the entire feature type.
return styleDefault;
};
// Style for polygon on mouse move.
const styleMouseMove = {
...styleDefault,
strokeWeight: 4.0,
};

// Apply styles using a feature style function.
function applyStyle(/* FeatureStyleFunctionOptions */ params) {
const placeId = params.feature.placeId;
//@ts-ignore
if (lastClickedFeatureIds.includes(placeId)) {
return styleClicked;
}
//@ts-ignore
if (lastInteractedFeatureIds.includes(placeId)) {
return styleMouseMove;
}
return styleDefault;
}
// [END maps_boundaries_click_event_style]

// Helper function to create an info window.
function updateInfoWindow(content, center) {
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map,
shouldFocus: false,
});
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map,
shouldFocus: false,
});
}

initMap();
// [END maps_boundaries_click_event]
// [END maps_boundaries_click_event]
export { };
158 changes: 96 additions & 62 deletions samples/dds-datasets-polygon-click/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,90 +3,124 @@
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

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

// [START maps_dds_datasets_polygon_click_eventhandler]
function handleClick( /* MouseEvent */ e) {
// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
if (e.features) {
lastClickedFeatureIds =
// Note, 'globalid' is an attribute in this Dataset.
e.features.map(f => f.datasetAttributes['globalid']);
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 = setStyle;
datasetLayer.style = applyStyle;
}
// [END maps_dds_datasets_polygon_click_eventhandler]

// [START maps_dds_datasets_polygon_click_stylefunction]
function setStyle(/* FeatureStyleFunctionOptions */ params) {
const datasetFeature = params.feature;
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);
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);

// 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,
};
// 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;
}
return /* FeatureStyleOptions */ {
strokeColor: 'green',
strokeWeight: 2,
strokeOpacity: 1,
fillColor: 'green',
fillOpacity: 0.3,
};
});
// [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);
}
// [END maps_dds_datasets_polygon_click_stylefunction]

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,
});
// [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,
};

// Dataset ID for NYC park data.
const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';
//@ts-ignore
datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = setStyle;
// [START maps_dds_datasets_polygon_click_addlistener]
datasetLayer.addListener('click', handleClick);
// [END maps_dds_datasets_polygon_click_addlistener]
const styleMouseMove = {
...styleDefault,
strokeWeight: 4.0
};

const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
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;
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 { };
export { };

0 comments on commit d5dd181

Please sign in to comment.