I have an app that generates images and those images optionally contain image maps using the <map>
tag (see HTML map tag)
The rendered HTML would be similar to:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Obviously I can use the <Image>
component to render the image and that works great but I can’t find a way to include the <map>
.
I’ve tried a <div>
with dangerouslySetInnerHTML
but I get the error " Error rendering app - encountered unknown component div".
Do I need to switch to CustomUI? Or is that not supported there either?
Thanks in advance,
Terry.
Hi @gingertez. We don’t plan on supporting the <map>
element. Could you instead use an <svg>
element to achieve the same effect? Alternatively you could use the Frame component to render a custom UI app with this functionality inside it.
1 Like
Hi Logan,
That’s a really interesting suggestion. I’ll investigate whether that will work for me. I’m already 75% complete in converting my app to CustomUI already
but would prefer to use UIKit if possible.
Presumably it renders as an iframe
?
Cheers,
Terry.
Hi @gingertez yes that correct. Using the Frame
component will render any custom UI content within a seperate Iframe
I trialled the use of Frame
and it does work for my specific use case for an image with a corresponding <map>
element. Thank you!
However, I’m going to continue with Custom UI because I need to implement some styling options not included in UI Kit (even with the xcss
options available in UI Kit 2).
Thanks again - it’s good to know that the option exists for future simpler apps I develop that can successfully use UI Kit.