diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts index e95b427d..443a3e11 100644 --- a/packages/visualizations/src/components/MapPoi/Map.ts +++ b/packages/visualizations/src/components/MapPoi/Map.ts @@ -133,18 +133,13 @@ export default class MapPOI { * Currently, is only used to handle popup display. * @param {MapLayerMouseEvent} event */ - private onClick({ point }: MapLayerMouseEvent) { + private onMapClick({ point }: MapLayerMouseEvent) { this.queue((map) => { - /** - * Get features closed to the click area. - * We ask for features that are not in base style layers - */ - const features = map.queryRenderedFeatures(point, { layers: this.layerIds }); - this.onFeaturesClick(map, features); + this.handlePopupAfterMapClick(map, point); }); } - private bindedOnClick = this.onClick.bind(this); + private bindedOnMapClick = this.onMapClick.bind(this); /** Update popup display between tooltip, sidebar and modal modes */ private updatePopupDisplay() { @@ -239,9 +234,15 @@ export default class MapPOI { * - The button icon button in the popup is clicked * * @param map The map instance - * @param features Features near where the map has been clicked + * @param point The pixel coordinates of the cursor click, relative to the map */ - private onFeaturesClick(map: maplibregl.Map, features: MapGeoJSONFeature[]) { + private handlePopupAfterMapClick(map: maplibregl.Map, point: MapMouseEvent['point']) { + /* + * Get features closed to the click area. + * We ask for features that are not in base style layers + */ + const features = map.queryRenderedFeatures(point, { layers: this.layerIds }); + // Removing feature state for the obsolete active feature. updateFeatureState(map, this.activeFeature, POPUP_FEATURE_STATE_KEY, false); const hasFeatures = !!features.length; @@ -375,6 +376,12 @@ export default class MapPOI { this.queue((map) => map.jumpTo(options)); } + /** + * Store the new popup configuration for each layer. + * When this configuration is updated, we need to update the popup content and display + * to reflect the new configuration. + * @param config Popups configuration + */ setpopupConfigurationByLayers(config: PopupConfigurationByLayers) { this.popupConfigurationByLayers = config; this.updatePopupContent(); @@ -425,7 +432,7 @@ export default class MapPOI { map.touchZoomRotate[interaction](); const eventFunction = interaction === 'enable' ? 'on' : 'off'; - map[eventFunction]('click', this.bindedOnClick); + map[eventFunction]('click', this.bindedOnMapClick); map[eventFunction]('mousemove', this.bindedOnMouseMove); const hasControl = map.hasControl(this.navigationControl);