{"id":637462,"date":"2019-10-18T10:00:03","date_gmt":"2019-10-18T17:00:03","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=637462"},"modified":"2020-02-19T08:30:17","modified_gmt":"2020-02-19T16:30:17","slug":"swipe-widget","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget","title":{"rendered":"A New Widget That’ll Have You Swiping Right"},"author":10062,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[473662,27491,468882,258412],"industry":[],"product":[36831],"class_list":["post-637462","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-4-13","tag-jsapi4","tag-whats-new-october-2019","tag-widget","product-js-api-arcgis"],"acf":{"short_description":"Swipe to view relationships between layers with the new Swipe widget, a useful tool for comparing layers.","flexible_content":[{"acf_fc_layout":"content","content":"

Swipe to view relationships between layers with the new Swipe widget<\/a>, available in version 4.13 of the ArcGIS API for JavaScript<\/a>. The Swipe widget is a useful tool for comparing layers or seeing what is underneath a layer.<\/p>\n

The Swipe widget can be initialized in just a few quick steps so that you can start comparing layers in your web apps. You have a few options when adding a Swipe widget to your MapView. These include which direction<\/a> you would like it to move (horizontal or vertical), the position<\/a> you would like it to start in the view, and of course what layers<\/a> you would like to compare. You can also change the visual aspects of the Swipe widget’s display through the visibleElements<\/a> property.<\/p>\n

Now, let’s look at three scenarios for how to use the Swipe widget.<\/p>\n

Swipe to reveal an underlying layer<\/h2>\n

Let’s see how you can use the Swipe widget to see what’s underneath a layer by examining deforestation in North America. We’ll add the Tree Cover Loss ImageryLayer to the trailingLayers<\/code> property and leave the leadingLayers<\/code> property unset. This will allow us to see the underlying satellite basemap below the tree loss.<\/p>\n

var<\/span> swipe = new<\/span> Swipe({\r\n  view: view,\r\n  trailingLayers: [treeLoss],\r\n  direction: \"horizontal\"<\/span>, \/\/ swipe widget will move left and right<\/span>\r\n  position: 30 \/\/ position set to a third of the view (30%)<\/span>\r\n});\r\nview.ui.add(swipe);\r\n<\/code><\/pre>\n
The resulting application will look like this, where we can swipe to see satellite imagery underneath the areas affected by tree loss.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":637692,"id":637692,"title":"Swipe-TreeLoss.png","filename":"Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","filesize":477636,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\/screen-shot-2019-10-15-at-11-30-33-am","alt":"Using the swipe widget to show what is underneath a layer","author":"10062","description":"On the left of the swipe widget, the satellite imagery basemap is shown. The right side of the Swipe widget shows an ImageryLayer that displays tree cover loss.","caption":"Swipe Widget - Tree Loss App (click to view live)","name":"screen-shot-2019-10-15-at-11-30-33-am","status":"inherit","uploaded_to":637462,"date":"2019-10-15 18:31:07","modified":"2019-10-15 18:36:03","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":640,"height":349,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","medium-width":464,"medium-height":253,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","medium_large-width":640,"medium_large-height":349,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","large-width":640,"large-height":349,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","1536x1536-width":640,"1536x1536-height":349,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","2048x2048-width":640,"2048x2048-height":349,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-826x451.png","card_image-width":826,"card_image-height":451,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-11.30.33-AM-e1571164360610.png","wide_image-width":640,"wide_image-height":349}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/blog\/swipe-treeloss.html"},{"acf_fc_layout":"content","content":"
Swipe to compare layers<\/h2>\n
The most common use case for the Swipe widget is to compare two (or more) layers. This can be useful to view before and after imagery from a natural disaster, see urban development over time, or view similarities and differences between datasets in the same area. To create a comparison between layers, we add layers to both the leadingLayers<\/code> and the trailingLayers<\/code> properties. When the direction<\/code> property is set to “horizontal”, the leadingLayers<\/code> will appear on the left of the Swipe divider, and the trailingLayers<\/code> will be on the right. A beautiful, seamless comparison awaits.<\/p>\n
var<\/span> swipe = new<\/span> Swipe({\r\n  view: view,\r\n  leadingLayers: [infrared],\r\n  trailingLayers: [nearInfrared],\r\n  direction: \"horizontal\"<\/span> \/\/ swipe widget will move left and right<\/span>\r\n});\r\nview.ui.add(swipe);\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":638032,"id":638032,"title":"swipe-volcanic","filename":"Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","filesize":424819,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\/screen-shot-2019-10-15-at-12-34-56-pm","alt":"Swipe Widget - comparing two layers","author":"10062","description":"The left side of the Swipe widget displays infrared imagery of the Kilauea while the right side shows near infrared imagery.","caption":"Swipe Widget - Compare two layers (swipe to view live)","name":"screen-shot-2019-10-15-at-12-34-56-pm","status":"inherit","uploaded_to":637462,"date":"2019-10-15 20:18:34","modified":"2019-10-15 20:26:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":640,"height":381,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","medium-width":438,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","medium_large-width":640,"medium_large-height":381,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","large-width":640,"large-height":381,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","1536x1536-width":640,"1536x1536-height":381,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","2048x2048-width":640,"2048x2048-height":381,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","card_image-width":640,"card_image-height":381,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","wide_image-width":640,"wide_image-height":381}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-swipe\/live\/index.html"},{"acf_fc_layout":"content","content":"
Swiping programmatically<\/h2>\n
Instead of dragging or using the arrow keys to move the Swipe widget back and forth, you have the option to control the swipe widget programmatically using the position<\/code> property. To show how this can be done, we created an application that programmatically swipes through layers of a Webmap whenever the user scrolls.<\/p>\n
Multiple Swipe widgets are used in this application. For each layer of the Webmap, a swipe widget is created and the layer is added to the Swipe widget’s trailingLayers<\/code> property.<\/p>\n
\r\n\/\/ create a swipe widget for each layer<\/span>\r\nswipes = layers.map(function<\/span>(layer) {\r\n   return<\/span> new<\/span> Swipe({\r\n      view: view,\r\n      disabled: true<\/span>,\r\n      position: 100<\/span>, \/\/ start at bottom of the view<\/span>\r\n      direction: \"vertical\"<\/span>, \/\/ will move up\/down<\/span>\r\n      trailingLayers: [layer],\r\n      visibleElements: {\r\n         handle: false<\/span>, \/\/ swipe widget handle won't be shown<\/span>\r\n         divider: true<\/span>\r\n      }\r\n   });\r\n});\r\n\r\n<\/code><\/pre>\n
When the user scrolls through the app and the position of the Swipe widget reaches either the top or bottom of the view, the leadingLayers<\/code> and trailingLayers<\/code> update.<\/p>\n
\r\nif<\/span> (position < 0<\/span> && swipe.trailingLayers.length) {\r\n   swipe.leadingLayers.addMany(swipe.trailingLayers);\r\n   swipe.trailingLayers.removeAll();\r\n} else<\/span> if<\/span> (position >= 0<\/span> && swipe.leadingLayers.length) {\r\n   swipe.trailingLayers.addMany(swipe.leadingLayers);\r\n   swipe.leadingLayers.removeAll();\r\n}\r\n\r\n<\/code><\/pre>\n
Click the following GIF to see this application in action.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":638232,"id":638232,"title":"widgets-swipe-scroll","filename":"widgets-swipe-scroll.gif","filesize":1113240,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\/widgets-swipe-scroll","alt":"Programmatic swipe based on scroll","author":"10062","description":"A sample application that swipes though layers when the user scrolls","caption":"Swipe Widget - Programmatic Swipe (click to view live)","name":"widgets-swipe-scroll","status":"inherit","uploaded_to":637462,"date":"2019-10-15 22:04:31","modified":"2019-10-15 22:53:50","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":662,"height":402,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","medium-width":430,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","medium_large-width":662,"medium_large-height":402,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","large-width":662,"large-height":402,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","1536x1536-width":662,"1536x1536-height":402,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","2048x2048-width":662,"2048x2048-height":402,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","card_image-width":662,"card_image-height":402,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/widgets-swipe-scroll.gif","wide_image-width":662,"wide_image-height":402}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-swipe-scroll\/live\/index.html"},{"acf_fc_layout":"content","content":"
Start Swiping!<\/h2>\n
Hopefully this helped you better understand how to use the Swipe widget. Now, it’s time for you to start swiping! We cannot wait to see the awesome applications that you will create.<\/p>\n
The Swipe widget is the new and improved version of LayerSwipe in 3.x.<\/em><\/p>\n"}],"authors":[{"ID":10062,"user_firstname":"Anne","user_lastname":"Fitz","nickname":"Anne Fitz","user_nicename":"afitz","display_name":"Anne Fitz","user_email":"afitz@esri.com","user_url":"","user_registered":"2019-10-15 00:07:57","user_description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets.  Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","user_avatar":""}],"related_articles":[{"ID":614592,"post_author":"7451","post_date":"2019-10-10 10:31:14","post_date_gmt":"2019-10-10 17:31:14","post_content":"","post_title":"What's New in ArcGIS API for JavaScript (October 2019)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-october-2019","to_ping":"","pinged":"","post_modified":"2019-10-10 10:31:14","post_modified_gmt":"2019-10-10 17:31:14","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=614592","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":615322,"post_author":"7451","post_date":"2019-10-10 13:08:41","post_date_gmt":"2019-10-10 20:08:41","post_content":"","post_title":"Measure Once with the new Measurement Widget","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"measure-once-with-the-new-measurement-widget","to_ping":"","pinged":"","post_modified":"2019-10-10 13:08:41","post_modified_gmt":"2019-10-10 20:08:41","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=615322","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":569372,"post_author":"6561","post_date":"2019-08-07 08:00:07","post_date_gmt":"2019-08-07 15:00:07","post_content":"","post_title":"Interactive widgets for data exploration","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"interactive-widgets-for-data-exploration","to_ping":"","pinged":"","post_modified":"2023-11-02 15:06:30","post_modified_gmt":"2023-11-02 22:06:30","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=569372","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/swipe_card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/4dot13_wide_new.jpg"},"yoast_head":"\nA New Widget That'll Have You Swiping Right: Swipe Widget in ArcGIS JSAPI<\/title>\n<meta name=\"description\" content=\"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A New Widget That'll Have You Swiping Right\" \/>\n<meta property=\"og:description\" content=\"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-19T16:30:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"381\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\"},\"author\":{\"name\":\"Anne Fitz\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa\"},\"headline\":\"A New Widget That’ll Have You Swiping Right\",\"datePublished\":\"2019-10-18T17:00:03+00:00\",\"dateModified\":\"2020-02-19T16:30:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\"},\"wordCount\":9,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"4.13\",\"jsapi4\",\"whats new october 2019\",\"widget\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\",\"name\":\"A New Widget That'll Have You Swiping Right: Swipe Widget in ArcGIS JSAPI\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-10-18T17:00:03+00:00\",\"dateModified\":\"2020-02-19T16:30:17+00:00\",\"description\":\"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A New Widget That’ll Have You Swiping Right\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa\",\"name\":\"Anne Fitz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg\",\"caption\":\"Anne Fitz\"},\"description\":\"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anne-fitz\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A New Widget That'll Have You Swiping Right: Swipe Widget in ArcGIS JSAPI","description":"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget","og_locale":"en_US","og_type":"article","og_title":"A New Widget That'll Have You Swiping Right","og_description":"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-02-19T16:30:17+00:00","og_image":[{"width":640,"height":381,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-15-at-12.34.56-PM-e1571170724515.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget"},"author":{"name":"Anne Fitz","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa"},"headline":"A New Widget That’ll Have You Swiping Right","datePublished":"2019-10-18T17:00:03+00:00","dateModified":"2020-02-19T16:30:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["4.13","jsapi4","whats new october 2019","widget"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget","name":"A New Widget That'll Have You Swiping Right: Swipe Widget in ArcGIS JSAPI","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-10-18T17:00:03+00:00","dateModified":"2020-02-19T16:30:17+00:00","description":"Swipe to view relationships between layers with the Swipe widget, a useful tool for comparing layers or seeing what is underneath a layer.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/swipe-widget#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"A New Widget That’ll Have You Swiping Right"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/bee793ed8139187e84c18559765490fa","name":"Anne Fitz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg","caption":"Anne Fitz"},"description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets. Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","sameAs":["https:\/\/www.linkedin.com\/in\/anne-fitz"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz"}]}},"text_date":"October 18, 2019","author_name":"Anne Fitz","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/afitz","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/4dot13_wide_new.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":473662,"name":"4.13","slug":"4-13","term_group":0,"term_taxonomy_id":473662,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":468882,"name":"whats new october 2019","slug":"whats-new-october-2019","term_group":0,"term_taxonomy_id":468882,"taxonomy":"post_tag","description":"","parent":0,"count":20,"filter":"raw"},{"term_id":258412,"name":"widget","slug":"widget","term_group":0,"term_taxonomy_id":258412,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2686,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/637462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/10062"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=637462"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/637462\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=637462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=637462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=637462"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=637462"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=637462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}