Experience Builder (Developer edition)

Nadia_Matsiuk

 

Hi!
I need for some help, please.

Can I create hover popup in Experience builder (Developer edition)?

I know code what can do hover popup. But I don't know in wich place and wich file it's need to add.I read a lot of articles, but still don't know the answer.

Maybe it's can be done in place where map is initialize. But I can't found it's place in code.

Thanks for any help!

 

JamesGough

In your code featureLayer is undefined. If there is some specific feature layer you are trying to reference, you need should add another dataSourceSelector in setting.tsx and then use that datasource to get the feature layer. Also, you aren't doing the hitTest in the timer callback, so it is just going to run whenever you are move the mouse.

 

Here is a rough solution. For the timer callback we call a new function named doHitTest which runs a hitTest on the mapview using the pointer event. A popup is displayed with all of the layer graphics which intercept the map geometry at that point.

 

/** @jsx jsx */
import { React, AllWidgetProps, jsx } from 'jimu-core'
import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";


export default class Widget extends React.PureComponent<AllWidgetProps<any>, any>{

    state = {
      jimuMapView: null,
      timer: null
    };

    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 > 0){
            const graphicResults = []; // array to hold graphic results
            // Loop through the hitTest results
            for(const r of response.results){
              // If r has a GraphicHit
              if(r.graphic){
                // add it to the array of graphics
                graphicResults.push(r.graphic)
              }
            }
            if(graphicResults.length > 0){
                // Open popup with the features from graphicResults
                this.state.jimuMapView.view.popup.open({
                  location: graphicResults[0].geometry.centroid,
                  features: graphicResults
                });
            }
          }
        })
      }
    }

    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, 2000, evt)
          })
        });
      }
    };

    render() {
      return (
        <div className="widget-starter jimu-widget">
          {this.props.hasOwnProperty("useMapWidgetIds") &&
            this.props.useMapWidgetIds &&
            this.props.useMapWidgetIds[0] && (
              <JimuMapViewComponent
                useMapWidgetId={this.props.useMapWidgetIds?.[0]}
                onActiveViewChange={this.activeViewChangeHandler}
              />
            )
          }
        </div>
      );
    }
}