Does UIKit support <map> tags?

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 :slight_smile: 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.