attempt to publish html image map

[catherinet1]

No description provided.

[catherinet1]

hi @rufuspollock i attempted to publish the HTML image map -- have tried out various things but it's not building.

In summary:

• The HTML code that I pasted at the bottom of HTML image map for 2R ecosystem map #311 works when I run it through an online HTML compiler (although have to change the image source from filepath to URL for that)
• In this commit (which is not building), I created a test page called mapnew.jsx. I copied the code from map.jsx and pasted in the image map HTML
• However, it doesn't build. The error message says:
  
• I guess the jsx page doesn't read HTML or something like that?

I also tried:

• adding closing tags to the area elements
• saving as HTML file instead of jsx file,
• saving the HTML in an HTML file in components folder and import into jsx file (but according to Gemini it seemed as though I would have to install some package called html-loader which seemed out of my depth)

Please could you help point me in the right direction?

[rufuspollock]

You need <area ... /> I think. That is what it is saying about not closing.

Jsx is very strict about html here.

[catherinet1]

ok, now when I close both area tags and image tags, the image shows up on the test page, however it doesn't work to click on the points.

This is the error message:

The code I was testing here was:

const Page = () => {
  return (
    <section>
      <figure id="graphic" className="">
      <img id="2r-map" src="/assets/img/ecosystem/second-renaissance-ecosystem-map.webp" usemap="#2r-map"/>
        <map id="2r-map" name="2r-map">
          <area target="_blank" alt="" title="" href="https://lecticalive.org/" coords="1382,641,1562,690" shape="rect"/>
          <area target="_blank" alt="" title="" href="https://innerdevelopmentgoals.org/" coords="1688,875,1815,928" shape="rect"/>
          <area target="_blank" alt="" title="" href="https://en.wikipedia.org/wiki/Robert_Kegan" coords="1261,845,1475,894" shape="rect"/>
        </map>
        <caption className="text-xs sm:text-sm text-center mx-auto max-w-3xl block mt-5">An impressionistic map of the second renaissance "paradigmatic changemakers" ecosystem. It shows some of the different communities, movements and spaces (primarily in the Global North) that aspire to and/or act to foster paradigmatic change with a second renaissance perspective <a className="underline" href="https://secondrenaissance.substack.com/p/map-of-second-renaissance-changemaking">Read more &raquo;</a></caption>
          </figure>
    </section>
  );
};

export function getStaticProps() {
  return {
    props: {
      meta: {
        layout: 'unstyled'
      }
    }
  }
}

export default Page;