Hi all!
I need some help. There is my post about hover pop up in Experience Builder. But I need some additional advice.(https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/experience-builder-developer-edit....
There is code for hover popup (see atachment).
But I want solve these issue:
1. Custom feature layer. Now hover pop up work for all graphic on the map. And I want create hover pop up only for some layer (point or polygon or line). I try to create method what choose data source from my Map widget. I try to declare feature layer, but can't. I only realized opportunity to choose map, layer and even filed in setting.tsx. But hover pop up work only for Map widget.
2. Now hover pop up work with timer. So every time (when timer is end) pop up is updated and twinkles. We think about checking if feature layer still equantly the same. But the problem is the same: I haven't feature layer's variable.
3. Now hover pop up isn't close when mouse move out from layer/object.
The 2 and 3 issue isn't important. I have image how to solve it, but I'll be very glad for any advice for it.
The real problem for me is the first issue.
There is my widget.tsx:
/** @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,
allFields: [],
allLayer: [],
lyr: null
};
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>
);
}
}
