nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Release the onClick Event when widget is closed/collapsed

PedroSalazar01

Can someone guide me on how to release the onClick event? we have this setup in webapp builder but have not found the way to do it in Experience builder, see code

see snippet code web app builder

onClose: function(){
var mapFrame = this;
var map = this.map;
var my_content = document.getElementById("MyGoogleWidget");
var container = document.getElementById("btn_holder");

map.graphics.clear();
mapClick.remove();

mapFrame.LatTextBox.value = "";
mapFrame.LongTextBox.value = "";
container.innerHTML = "";
my_content.classList.add("hidden");
}

Experience Builder

import { React, type AllWidgetProps, type Color } from 'jimu-core'

import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'

import type Point from 'esri/geometry/Point'

import Graphic from 'esri/Graphic'

const { useState } = React

const linkButton = {

display: 'block',

color: '#f2f2f2',

backgroundColor: '#3C73BD',

fontWeight: 'bold',

padding: '12px 15px',

fontFamily: 'Sans-Serif',

borderRadius: '50px',

textAlign: 'center',

textDecoration: 'none'

}

// interface State {

// jimuMapView: JimuMapView

// }

const Widget = (props: AllWidgetProps<any>) => {

const [latitude, setLatitude] = useState<string>('')

const [longitude, setLongitude] = useState<string>('')

const url = 'https://www.google.com/maps/search/?api=1&query='

const mainURL = url + latitude + ' ' + longitude

const [visible, setVisible] = React.useState(false)

// const [graphic, setGraphic] = useState(null);

const activeViewChangeHandler = (jmv: JimuMapView) => {

// if (this.state.jimuMapView) {

// if (this.state.currentWidget) {

// this.state.currentWidget.destroy()

// }

if (jmv) {

// When the pointer moves, take the pointer location and create a Point

// Geometry out of it (`view.toMap(...)`), then update the state.

const simpleMarkerSymbol = {

type: 'simple-marker',

color: [226, 119, 40], // Orange

outline: {

color: [255, 255, 255], // White

width: 1

}

jmv.view.on('click', evt => {

const point: Point = jmv.view.toMap({

x: evt.x,

y: evt.y

})

setLatitude(point.latitude.toFixed(8))

setLongitude(point.longitude.toFixed(8))

setVisible(true)

const graphic = new Graphic({

geometry: point,

symbol: simpleMarkerSymbol

})

// setGraphic(graphic);

jmv.view.graphics.removeAll()

jmv.view.graphics.add(graphic)

})

}

return (

{

props.useMapWidgetIds &&

props.useMapWidgetIds.length === 1 && (

<JimuMapViewComponent

useMapWidgetId={props.useMapWidgetIds?.[0]}

onActiveViewChange={activeViewChangeHandler}

)

}

<p><h9>Click on Map to get the coordinates </h9></p>

<div>

<p style={{ textAlign: 'center' }}><strong>Lat/Lon: {latitude} {longitude}</strong> </p>

{/* <p style={myStyle}><button onClick={ () => openLinkInNewTab(mainURL)}>View in Google Maps!</button></p> */}

<a style={linkButton} href={mainURL} target='_blank'>View in Google Maps</a>

</div>

)

}

export default Widget

Trouver plus de publications taguées avec

Accepted answers

All comments

kenbuja

The view's on method returns a handler that has a remove method. In this example, the click handler is removed after the fifth click.

let counter = 1;
const event = view.on("click", evt => {
  console.log("click " + counter);
  if (counter > 4) event.remove();
  counter++;
});

PedroSalazar01

Ken:

How do you reinitialize the event once its been removed without refreshing the map?

right now i have to refresh the map, I would want it reinitialized when the widget its open again.

Thanks in advance

Pedro

JeffreyThompson2

If I understand your question, you have a widget in a Widget Controller and you want to turn a click event on and off when the widget is activated. I have done this before in a class based component, but not a functional one, so my code may be slightly off, but I would handle this through a useEffect function triggered by the WidgetState. (I believe this can be found in props.state.)

const eventListener = useRef(null)
useEffect(()=> {
   if (props.state === 'OPENED') {
      eventListener.current = view.on('click', evt => {
        yourFunction()
      } 
   } else if (props.state === 'CLOSED') {
     eventListener.current.remove()
   }
},[props.state])

PedroSalazar01

Any ideas why this is not working? when I debug , the program does not get the activeViewChangeHandler.
it does go to the alerts

does any thing stands out?
thanks in advance

const Widget = (props: AllWidgetProps) => {
const { useState, useEffect } = React
const eventListener = useRef(null)
const [latitude, setLatitude] = useState('')
const [longitude, setLongitude] = useState('')
const url = 'https://www.google.com/maps/search/?api=1&query='
const mainURL = url + latitude + ' ' + longitude
const [visible, setVisible] = React.useState(false)

useEffect(() => {
if (props.state === 'OPENED') {
alert('open')
activeViewChangeHandler = (jmv: JimuMapView) => {
if (jmv) {
const simpleMarkerSymbol = {
type: 'simple-marker',
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
}
eventListener.current = jmv.view.on('click', evt => {
const point: Point = jmv.view.toMap({
x: evt.x,
y: evt.y
})
setLatitude(point.latitude.toFixed(8))
setLongitude(point.longitude.toFixed(8))
setVisible(true)
const graphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
})
// setGraphic(graphic);
jmv.view.graphics.removeAll()
jmv.view.graphics.add(graphic)
})
}
}
} else if (props.state === 'CLOSED') {
//eventListener.current.remove()
alert('closed')
}
//}, [props.state])
}, [props.state])
// const openLinkInNewTab = (url) => {
// const newTab = window.open(url, '_blank', 'noopener,noreferrer')
// if (newTab) newTab.opener = null
// }

return (

{
props.useMapWidgetIds &&
props.useMapWidgetIds.length === 1 && (

useMapWidgetId={props.useMapWidgetIds?.[0]}
onActiveViewChange={activeViewChangeHandler}

/>
)
}

JeffreyThompson2

This is my base code for a widget that will need to interact with a map. It assumes that there is only one map in the Experience. It looks like you are missing a call to JimuMapViewComponent. I can also see some syntax problems in your return statement.

import { React } from 'jimu-core'
import { MapViewManager, JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'
import reactiveUtils from 'esri/core/reactiveUtils'

const { useEffect, useState } = React

const Widget = (props) => {
    const viewManager = MapViewManager.getInstance()
    const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0])
	const [jimuMapView, setJimuMapView] = useState<JimuMapView>(mapView)
	const [mapReady, setMapReady] = useState(false)

	useEffect(() => {
		if (jimuMapView) {
			reactiveUtils
				.whenOnce(() => jimuMapView.view.ready)
				.then(() => {
					setMapReady(true)
				}
				)
		}

	}, [jimuMapView])

	const activeViewChangeHandler = (jmv: JimuMapView) => {
		if (jmv) {
			setJimuMapView(jmv)
		}
	}

    return (
		<div className='jimu-widget'
			{
				...
				props.useMapWidgetIds &&
				props.useMapWidgetIds.length === 1 && (
					<JimuMapViewComponent
						useMapWidgetId={props.useMapWidgetIds?.[0]}
						onActiveViewChange={activeViewChangeHandler}
					/>
				)
			}
		>
			{mapReady ? 'map ready' : 'map not ready'}
		</div>
    )
}

export default Widget

PedroSalazar01

useEffect(() => {
    if (jimuMapView) {
      reactiveUtils
        .whenOnce(() => jimuMapView.view.ready)
        .then(() => {
          setMapReady(true)
          alert('map ready')
          if (props.state === 'OPENED') {
            if (!eventListener) {
              alert('done')
              eventListener = eventListener2.current
              eventListener.current = jmv2.view.on('click', evt => {})
            }
            const test: string = eventListener.current.Status
            alert(test)

            alert('open')
          } else if (props.state === 'CLOSED') {
            alert('closed')
            eventListener.current.remove()
            alert(eventListener)
            jmv2.view.graphics.removeAll()
          }
        }
        )
    }
  }, [jimuMapView, props.state])
  const activeViewChangeHandler = (jmv: JimuMapView) => {
    jmv2 = jmv
    if (jmv) {
      // When the pointer moves, take the pointer location and create a Point
      // Geometry out of it (`view.toMap(...)`), then update the state.

      const simpleMarkerSymbol = {
        type: 'simple-marker',
        color: [226, 119, 40], // Orange
        outline: {
          color: [255, 255, 255], // White
          width: 1
        }
      }
      //jmv.view.on('pointer-move', evt => {
      eventListener.current = jmv.view.on('click', evt => {
        alert('Point')
        eventListener2 = eventListener
        const point: Point = jmv.view.toMap({
          x: evt.x,
          y: evt.y
        })
        setLatitude(point.latitude.toFixed(8))
        setLongitude(point.longitude.toFixed(8))
        setVisible(true)
        const graphic = new Graphic({
          geometry: point,
          symbol: simpleMarkerSymbol
        })
        // setGraphic(graphic);
        jmv.view.graphics.removeAll()
        jmv.view.graphics.add(graphic)
        //alert("Hello")
        //jmv.view.add(graphic);
        //const graphicsLayer = new GraphicsLayer();
        // jmv.view.Graphics.add(graphicsLayer)
        //  graphicsLayer.add(graphic)
      })
      // Set up a click event handler and retrieve the screen point
    }

PedroSalazar01

jeffery:

Tried all kind of ways to re-add the listner

EvnetListner

But once i remove it when closing the widget

eventListener.current.remove()

i cannot re add it

any help will be greatly appreciated

Thanks

JeffreyThompson2

I suggest stepping back from Experience Builder and studying up on React before proceeding further. https://react.dev/learn React operates very differently from plain JavaScript and has a very steep learning curve. And Experience Builder adds another layer of complexity on top of that. I can tell you that there are issues with how you are using the useRef hook that are causing at least some of your problems. https://react.dev/reference/react/useRef Here is some pseudo-code for how to make this widget.

//import statements
//widget declaration
//useState declarations
//const eventListener = useRef(null)
//Declare a createEventListener function that returns the eventListener.
//useEffect function that has props.state in its depenency array.
//Inside useEffect, an if/else if statement based on props.state.
//If OPENED and if !eventListener.current, eventListener.current = createEventListener()
//Else if CLOSED, eventListener.current.remove() and eventListener.current = null
//return function
//export statement

PedroSalazar01

Thanks for the advise,
I will do just that
have a great day

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.