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; } } }

swipe witget on off control

emreaktas1

hello,
I open the swipe widget with the button function.
How can I turn it back off?

sample code

I want to turn the swipe widget on and off with a button.

Encuentra más publicaciones etiquetadas con

Accepted answers

JeffreyThompson2

I looks like we need to use the destroy() method.

let swipe = null
const swipeButton = document.getElementById('swipeButton')
swipeButton.addEventListener('click', toggleSwipe)
function toggleSwipe(){
   if (swipe) {
      swipe.destroy()
      swipe = null
   } else {
      swipe = new Swipe({
         leadingLayers: [layer],
         trailingLayers: [layerParse1],
         position: 50,
         view: view
      })
      view.ui.add(swipe)
   }
}

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html#destroy

All comments

GregoryBologna

I have swipeWidget global and call removeSwipeWidget anytime before adding swipe widget.

    const removeSwipeWidget = () => {
      try {
        if (swipeWidget) {
          view.ui.remove(swipeWidget);
          // destroy if object
          if (swipeWidget?.constructed) swipeWidget.destroy();
          swipeWidget = null;
        }
      } catch (error) {
        console.log(error);
      }
    }

emreaktas1

On the second click the swipe widget was not removed completely.
It just works invisibly

JeffreyThompson2

The way you have defined swipe is scope bound, so you are unable to call it again later. Try something like this.

let swipe = null
const swipeButton = document.getElementById('swipeButton')
swipeButton.addEventListener('click', toggleSwipe)
function toggleSwipe(){
   if (swipe) {
      view.ui.remove(swipe)
      swipe = null
   } else {
      swipe = new Swipe({
         leadingLayers: [layer],
         trailingLayers: [layerParse1],
         position: 50,
         view: view
      })
      view.ui.add(swipe)
   }
}

This should make a button that adds the swipe on the first click and removes it on a second click.

emreaktas1

My codes did not work as I wanted.
How can I edit here?

JeffreyThompson2

This should destroy the swipe widget.

view.ui.remove(swipe)

This should hide the swipe widget without destroying it.

swipe.visible = false

I'd use the second one if I want to toggle the swipe back on with the same configuration, as it should be a bit faster than having to re-create the swipe from scratch.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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