Select to view content in your preferred language

Using Swipe Component in Experience Builder

39
0
3 hours ago
JeffreyThompson2
MVP Frequent Contributor

I am working on upgrading to Experience Builder 1.19 and I have found several issues with the Nearmap Widget. The Widget was working perfectly in Experience Builder 1.18. This is not an official Widget, but it was developed by ESRI Australia. I have raised an issue on the GitHub page.

Question 1: The Widget generates a console.warn "Unhandled case: web-tile" generated by jimu-core whenever it loads a layer. This does not appear to impact functionality and the layers load as expected. Are WebTitleLayers no longer supported by Experience Builder?

The Nearmap Widget uses a Swipe Widget from the Javascript API to allow comparison of aerial imagery. Major problems arise when activating the comparison feature.

Unmodified, using the Swipe Widget, activating the comparison mode turns the whole map area white.

JeffreyThompson2_1-1764883457754.png

With some modifications, based on this post by @Sage_Wall, I was able to get the Nearmap Widget to use the Swipe Component. I used the view property of the Swipe Component to target the MapView and the Swipe Component rendered correctly, but the Component rendered over the Map Canvas and prevented all interactivity with the map, including panning and zooming. 

JeffreyThompson2_2-1764883926788.png

Question 2: Is there a way to render a Swipe Component at runtime that does not prevent map interactivity?

The Nearmap Widget also contains a line of code originally designed to add the Swipe Widget to the MapView.ui. I removed this line of code and found that both layers rendered as expected and map interactivity was restored, but the UI and interactivity of the Swipe Component was missing. (See half houses in image below.)

JeffreyThompson2_3-1764884387044.png

I also attempted to target the MapView using the referenceElement property of the Swipe Component. According to the Component documentation, using the view property is an anti-pattern, so I thought this property might give better results. However, I don't know if I was able to successfully target the Map Component this way as I could not find the #shadow-root node in the DOM.

Question 3: Has the Map Widget been converted to use Components?

Question 4: How should the Map Component be targeted?

 

GIS Developer
City of Arlington, Texas
0 Kudos
0 Replies