I am looking to see if there is an implementation example of the Spy Glass widget without ArcGIS Online or Story Maps. I have found the LayerSwipe documentation and can implement that fine, but I have not found a way to do the Spy Glass version in my own implementation.

I am using it in a custom web app that will be hosted on our server and want to avoid using AGOL/ESRI styled items. However, the Spy Glass caught someone's eye so I have to figure out how to implement it in our setup.

I am assuming it has to deal with using the LayerSwipe widget and different CSS styling/event handling (e.g. mouse move), but I am hoping to see an implementation so I don't have to do it all from scratch.

I have downloaded the source code from Github for the StoryMap template, but as I go through it, it seems like there is a lot more there than what I want. I am searching through trying to pick and choose what code/CSS I want, but I am hoping someone else may have done something similar to save me some time. My end result is going to be wrapping the widget in an AngularJS directive, so the simpler it is, the better.

1 Answer 1


why not just set 'scope' as the LayerSwipe widget's "type"?

var swipeWidget = new LayerSwipe({
  type: "scope",  // options are 'vertical' (default), 'scope' and 'horizontal'
  map: map,
  layers: [swipeLayer]
}, "swipeDiv");

(live example here)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.