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.

Trouver plus de publications taguées avec

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

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.

emreaktas1

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

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

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

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

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.