Hi!
I try to create hover pop up in custom widget (related post: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-popup-experience-builder-de...). In my opinion, one possible way of implementation is layerId tracking. For example, hitTest() look for layerId on map, if there is graphic element popup is open. When mouse move out from layer popup is close. If there isn't any layer pop up isn't call.
I use these components in code but I can't do anything in right way. It doesn't work. I can't found layerId option and add it to equally method.
Thanks a lot for any advice!
/** @jsx jsx */
import { React, AllWidgetProps, jsx, IMDataSourceInfo, DataSource, DataSourceManager, DataSourceStatus, FeatureLayerQueryParams, DataSourceComponent } from 'jimu-core'
import { JimuMapViewComponent, JimuMapView, FeatureLayerDataSource } from "jimu-arcgis";
import { result } from 'lodash-es';
import View from 'esri/views/View';
import {DataSourceSelector, AllDataSourceTypes, FieldSelector} from 'jimu-ui/advanced/data-source-selector';
import { viewChangeBufferCompare } from 'dist/widgets/arcgis/bookmark/src/setting/utils';
export const myFeatureLayer={} as const
export default class Widget extends React.PureComponent<AllWidgetProps<any>, any>{
state = {
jimuMapView: null,
timer: null,
allLayer: [],
lyr: null
};
getDataSourceByLayer: (layerId: string | number, layerOfSubLayerId?: string) => DataSource
onDataSourceCreated = (ds: DataSource) => {
const datasrc=this.props.useDataSources[0]
const myDatasrc=DataSourceManager.getInstance().getDataSource(dataSrc.dataSourceId) as FeatureLayerDataSource
const myFeatureLayer = myDataSrc.layer
this.setState({ allLayer: myFeatureLayer.layerId, lyr: myFeatureLayer })
}
doHitTest = (evt: PointerEvent) => {
if(this.state.jimuMapView){
// Run hitTest on the map view using the pointer event
this.state.jimuMapView.view.hitTest(evt).then((response) => {
if(response.results.length){
const graphic = response.results.filter(function (result) {
return result.graphic.layer === myFeatureLayer;
})[0].graphic
this.state.jimuMapView.view.popup.open({
location: graphic.geometry.centroid,
features: [graphic]
});
} else {
this.state.jimuMapView.view.popup.close();
}
})
}
}
activeViewChangeHandler = (jmv: JimuMapView) => {
if (jmv) {
this.setState({
jimuMapView: jmv
});
// register the pointer-move event handler on the map view
jmv.view.on("pointer-move", (evt) => {
// if there is already a timer, cancel it
if(this.state.timer){
clearTimeout(this.state.timer)
}
// set new timer that will call doHitTest after the interval
// pass the pointer-move event as the parameter to doHitTest
this.setState({
timer: setTimeout(this.doHitTest, 0, evt)
})
});
}
};
render() {
return (
<div className="widget-hoverPopup jimu-widget">
{this.props.hasOwnProperty("useMapWidgetIds") &&
this.props.useMapWidgetIds &&
this.props.useMapWidgetIds[0] && (
<JimuMapViewComponent
useMapWidgetId={this.props.useMapWidgetIds?.[0]}
onActiveViewChange={this.activeViewChangeHandler}
/>
)
}
</div>
);
}
}
