GridViz with React

[cap-anna]

Hi, is there a possibility to use GridViz with React directly? Or is the current workaround to integrate it with leaflet?

Thanks and best regards :)

[jgaffuri]

Hi, GridViz lib is standard javascript, deployed as a UMD module: It could be used with React without any problem ! Let us know however if you have detect any limitation. julien

[cap-anna]

Hi, Thanks for your answer. Well I encountered that by simply installing it via npm and then trying a very basic app as described in the docs, it wouldn't fetch any data or render anything.

That's why I was wondering and I couldn't find any React Docs.

[jgaffuri]

Oh. I can have a look: Could you share the code ?

[cap-anna]

I think the error was basically that the example from docs (https://eurostat.github.io/gridviz/examples/basic_CSV.html), didn't work. Looks to me as if the basemap is not loading somehow? Sorry I'm pretty confident it did render before, wanted to use this as an initial step for exploring. Now that I am using a different basemap it seems fine.

[jgaffuri]

Great, thank you for the follow-up ! If you have any demo to share, please do !

[cap-anna]

So I'm basically using SSR with Next.js, which builds on React.

I implemented one component that handles the map rendering. The initialize map function is outside that component and does all the stuff like adding, baseMap, tiledGridLayers, defining center and so on, so nothing React specific.

const EurostatMap = () => {
  const gridVizContainerRef = useRef(null)

  useEffect(() => {
    if (gridVizContainerRef.current) {
      intializeMap(gridVizContainerRef.current)
    }
  }, [gridVizContainerRef])
  return (
    <div>
      <div id='grid-viz-container' ref={gridVizContainerRef} style={{ width: '500px', height: '500px' }}></div>
    </div>
  )
}

export default EurostatMap

On page level (that's where SSR basically happens), it is important to load the component dynamic, meaning to enforce it client side:

const NewMap = useMemo(
    () =>
      dynamic(() => import('@/components/eurostatMap/EurostatMap'), {
        loading: () => <div>map loading ...</div>,
        ssr: false
      }),
    []
  )

and then use the "NewMap" component as JSX Tag inside the return statement of your page.