I’m trying to convert this code http://bl.ocks.org/gisminister/10001728 from Vanilla Js into React Js code. The code is about creating a custom UI for Leaflet clustering using a Pie Chart.
Problem
I have copied and pasted the code from the blog but the cluster didn’t show as seen in the image below.
Code
Playground: https://codesandbox.io/s/learn-react-leaflet-cnk8tm?file=/src/components/CustomCluster/index.jsx
Steps to Reproduce
- Open and run the playground.
- Make sure you open the Custom Cluster page by adding
/4
to the URL for example https://cnk8tm.csb.app/4 in the playground as seen in the image below.
Question
I’m not familiar enough with Vanilla Js but I’m familiar enough with React Js.
So what’s wrong with my converted code (in the playground) and what’s the correct one?
Note
Actually, I have already created a custom Leaflet clustering in React Js using leaflet, react-leaflet, and react-leaflet-markercluster libraries here but still had a problem.