Select to view content in your preferred language

swipe witget on off control

188
6
Jump to solution
05-16-2024 04:24 AM
emreaktas1
New Contributor II

emreaktas1_0-1715858514317.png

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

sample code 

emreaktas1_1-1715858645489.png

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

 

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas

View solution in original post

6 Replies
JeffreyThompson2
MVP Regular Contributor

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.

 

GIS Developer
City of Arlington, Texas
0 Kudos
emreaktas1
New Contributor II

emreaktas1_0-1715862394608.png

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

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos
emreaktas1
New Contributor II

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

emreaktas1_0-1715865903707.png

 

 

emreaktas1_1-1715865951641.png

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
emreaktas1
New Contributor II

Yes, this is the destroy() method. it worked😍

0 Kudos