topic Re: Rotate pop-up image based on rotation angle attribute in ArcGIS Online Questions

Rotate pop-up image based on rotation angle attribute

Trisarahtops — Thu, 31 Oct 2024 15:26:53 GMT

I am trying to get an image in a popup to rotate based on a rotation angle attribute. I accomplished this in ArcGIS Pro:

The symbol at the top is a transparent .png. I used HTML with embedded style to rotate based on the symbol rotation field:

Expression 1 above is a simple arcade expression that selects an image URL based on the symbol type that is clicked. "transform: rotate({SymbolRotation}deg);" correctly rotates the image.

However, I cannot get this to work in ArcGIS Online. The image displays, but is not rotated:

When I copy/pasted the same HTML code that I used in ArcPro, it changed it to this:

The rotation style is still in there, but it doesn't work.

Help?

Re: Rotate pop-up image based on rotation angle attribute

ChristopherCounsell — Fri, 01 Nov 2024 05:12:36 GMT

I don't believe rotate is supported in ArcGIS Online.

https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

Re: Rotate pop-up image based on rotation angle attribute

Trisarahtops — Fri, 01 Nov 2024 13:51:32 GMT

Thanks, that is what I was guessing. However, "rotate" is CSS code within the style attribute. The page you linked says that the style attribute is supported within an image tag, but it does not say which version of CSS is supported within the style attribute. I am having trouble finding that information.

Re: Rotate pop-up image based on rotation angle attribute

ChristopherCounsell — Fri, 01 Nov 2024 18:33:17 GMT

It's limited to an older version of html and I don't believe CSS is supported nor could find anything to suggest it is.

Here's an idea asking for html 5 and CSS

https://community.esri.com/t5/arcgis-online-ideas/arcgis-online-popups-support-html5-syntax-like-css/idi-p/973828

If I recall, some web apps have limited support for CSS design on a theme level, but otherwise you don't see it much through the ArcGIS online UI.

Re: Rotate pop-up image based on rotation angle attribute

Trisarahtops — Fri, 01 Nov 2024 21:01:00 GMT

Thanks for sharing that idea link. The confusing thing is that some of my CSS styling seems to be working, but the image rotation isn't. Here's an example of some CSS styling that works. The popup is on the left and the HTML/CSS is on the right.

I assume that you are correct, the rotation style simply isn't supported. I just wish that information was listed somewhere.

Re: Rotate pop-up image based on rotation angle attribute

ChristopherCounsell — Fri, 01 Nov 2024 22:48:32 GMT

It's more the case of what is supported is in the documentation, which is
html tags, in the context of text editors and pop-ups. Div and style
attributes are there.

Other parts of the platform that support CSS clearly state it is supported
E.g.

https://doc.arcgis.com/en/hub/sites/customizing-sites-with-html-and-css.htm

I don't think you need a documentation page to state that CSS is not
supported in popups. What you should use are the supported html tags. Often
where things work, but aren't officially documented or supported, you can
run into issues. e.g. it might stop working or not work in all clients.

Re: Rotate pop-up image based on rotation angle attribute

JonathanDawe_BAS — Thu, 10 Apr 2025 22:44:38 GMT

For anyone interested in a workaround to achieve this then I came up with a novel workflow. Some image hosting providers such as cloudinary allow you to specify an angle to rotate the image through the url that you provide. I used this to rotate the image based on the features attribute information.

`<img src="https://res.cloudinary.com/dwnvivbjn/image/upload/a_${Round($feature.heading_d)}/v1726068745/compass_ql0nwz.png" width="45" height="45" alt="Icon">`