Develop Reference

Converting custom Leafet cluster from Vanilla Js code into React Js code

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.
Here is the target.
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.

How can I hover over an image and get the coordinates of the position where my mouse is present

I am following this tutorial on youtube regarding making a flappy bird game..
The guy teaching has used this image in the project.
I want to use different parts of this image separately..
How can I make sure that i hover over some point in the image and i get to know the coordinates of that point(with respect to the image and not with respect to my screen)? Can i make this happen with some code editor like the one the youtube guy is using in his tutorial..Or is there any javascript or python script through which i can make this possible?

I also ran into this problem before and the module I used was called pyautogui. To use it, first run the pip command like this:
python -m pip install pyautogui and then just import it. To get the mouse position use pyautogui.position(). If you want more information, this is the link to the official website for pyautogui which may have some other tools to help you during your project

Attaching an SVG to the DOM with Webpack

Currently my company includes a rather large SVG sprite containing various icons in the index.html of our AngularJS web app. The main SVG is hidden by CSS and we display individual icons from the SVG by selecting them by their IDs:
<svg>
<use xlink:href="#icon-id"></use>
</svg>
We are now trying to reduce the load time of our site by splitting up the SVG and inlining the resulting parts on pages tha need them. Since we are also moving to Webpack to bundle our app, we'd like to specify dependencies for a specific SVG file in an Angular module and then have Webpack insert the content of the SVG -- possibly wrapped in a div -- into the DOM.
Is there any way of achieving this with an existing loader? I found the raw-loader which basically exports the content of our SVG. However, I don't know how to chain it with another loader that would insert into the DOM like say the style-loader does.
Any help is greatly appreciated.
Felix

Another option has come out since this question was asked: https://github.com/kisenka/svg-sprite-loader
It's like style-loader but for SVG:
Creates a single SVG sprite from a set of images.
Raster images support (PNG, JPG and GIF).
Custom sprite implementation support.
React examples are provided, and there is a config option for angular:
angularBaseWorkaround Adds workaround for issue with combination of and History API which is typical for Angular.js.
// some-component.jsx
import Icon from './icon';
import help from './images/icons/Help.svg';
<Icon glyph={help} />

I ended up writing my own webpack loader for this problem. You can install the inline-loader through npm. More info can be found at https://www.npmjs.com/package/inline-loader

Also you can use:
https://github.com/mrsum/webpack-svgstore-plugin for that
npm i webpack-svgstore-plugin --save-dev

How to create graph in an HTML file using the jOrgChart?

Is it possible to draw a graph in an HTML file using the jOrgChart jQuery plugin, as in the example below?
If that's not possible then what are other options are available for drawing such chart, without using Drupal?

Assuming that this question is about the jOrgChart jQuery plugin, and assuming that Drupal is an option to consider, then for sure it's worth considering the jOrgChart sandbox ... at least that's where I'll start from if some day I want to start using jOrgChart in Drupal.
For other Drupal based alternatives for charting, checkout the Comparison of charting modules I created (note to myself: add this jOrgChart plugin and sandbox project to that comparison).
Curious to hear to what extend this attempt is an answer to this charting question ...
PS: Checkout my profile for more details about my charting background, etc.

Very easy to use given a nested unordered list element.
Drag-and-drop functionality allows reordering of the tree and
underlying structure.
Showing/hiding a particular branch of the tree by clicking on the
respective node.
Nodes can contain any amount of HTML except and . Easy to
style.
You can specify that sub-trees should start collapsed, which is
useful for very large trees
for html
https://dl.dropboxusercontent.com/u/4151695/html/jOrgChart/example/example.html

Pre-Drawing Raphael screens, save them to file and load at runtime

I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?

Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.

You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.

The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.