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

Experience Builder Image Widget Click-Through Toggle

NFlourish

This should be SUPER easy as an update to the Experience Builder Image widget.

The use case is that you have an image you want to overlay on top of another widget, AND you do not want the image widget that is over the other widget to block using the widget underneath it.

In this example I have used the Tattered Map Sandwich approach ...

(https://www.esri.com/arcgis-blog/products/arcgis-pro/mapping/tattered-map-sandwich)

... to produce a dynamic map that looks kind like an old treasure or pirate map.

https://experience.arcgis.com/experience/9d849c1e005a4ac4b844d02d8fe0fa37

The problem is that the top layer image of the map sandwich blocks interaction with any layer below it, despite it being mostly transparent. So it appears you can use the map, but the mostly transparent overlay is in the way.

This can be fixed with a single CSS attribute "pointer-events" which can be set to "none" for any given element in an HTML document. If the Image widget, at least, had a way to toggle this CSS attribute on for specific elements we could have creative and artistic use of overlays that do not block content lower in the Z-order stack.

Other ideas might be to produce a military themed image-map-image sandwich to give the effect of looking at an old radar screen. Or to give effects of looking at a map through a window.

It could also be used to emphasize branding of an Experience with an overlay image that does not entirely cover the widgets below, but still might provide a large logo in one corner that you do not want to block clicking on widgets below.

Screenshot 2025-08-21 at 10.09.22 AM.png

Finde mehr Beiträge mit dem Tag

Status: Öffnen

Kommentare

jfischer91

Love this idea and am trying to do something similar! In my case, I just want a border around my map, but I'm running into the same issue. Would love to hear if you found any workable alternative, other than the map you linked to.

NFlourish

Hi!

I understand that the images could be geo-referenced. That would not have the same effect.

While in the example of the Tattered Map Sandwich I gave, a version of the themed output could be achieved with a georeferenced image, it does not address wanting to add overlay effects in experience builder. If we used a georeferenced image, the map tatters in my example would move with the map... and so if you used world scale map, you would need a very large image to look good at zoomed in scales.

My proposed update to the image widget is really for a different purpose.

Consider this version that does not use Experience Builder... such that I can set the overlay image to allow click-through.

https://floersch.net/pirate/

johnsonn35_MDHHS

Have you considered adding the images in Map Viewer rather than as an image widget in Experience Builder?

I think another difference doing it this way is that the creases etc. will scale with the map (as if they're georeferenced), rather than staying at the same area of the screen.

Nehmen Sie an der Unterhaltung teil

Melden Sie sich an, um zu posten, Inhalte zu folgen und mehr. Neu hier? Kostenlos registrieren.