adding maps to a hugo website

[gdkrmr]

We are building our group website with Hugo [1] and want to add a map with our own data that is in the Zarr format [2]. The issue is that nobody of us knows much about webdesign and much less about React. I have tried some tutorials but haven't gotten it to work.

I also don't really want to add a new tool chain to our Hugo build process. Is there a way to pull the Javascript from @carbonplan/maps and @carbonplan/colormaps in a script tag or doing something similar?

So far I have added the following, but of course it lacks @carbonplan/maps and @carbonplan/colormaps:

      <div id="map_container" ></div>

      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

      <script>
     const bucket = ‘https://storage.googleapis.com/carbonplan-share/’

     const colormap = useColormap('warm')

     "use strict";

     /*#__PURE__*/
     export const map = React.createElement(Map, null, /*#__PURE__*/React.createElement(Line, {
      color: 'white',
      source: bucket + 'maps-demo/land',
      variable: 'land'
    }), /*#__PURE__*/React.createElement(Raster, {
      colormap: colormap,
      clim: [-20, 30],
      source: bucket + 'maps-demo/2d/tavg',
      variable: '​​tavg'
    }));


       const domMapContainer= document.querySelector('#map_container');
       ReactDOM.render(map, domMapContainer);
      </script>

[1] https://rsc4earth.de
[2] https://earthsystemdatalab.net