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;

[rufuspollock]

@JonahWilberg any ideas here?

[catherinet1]

My dad looked into it last week and found that the reason it was not working was that the size of the image file did not match the size of the displayed image. He has shared with me the code we can put in to get it working.

[rufuspollock]

@catherinet1 ok let's do that asap ... and then we can announce 😄