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

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.

Related

How to enabling Tool tips or my react library?

My Project: A React JS library (Not Typescript) created with create-react-library.
The library works as expected.
My Question: How do I get the tooltips/hints in the editor where my packages is used?
Currently: If I import one of my components e.g
<Notice color='red' text='Warning'/>
When I hover over over Notice the tooltip shows
(alias) function Notice(_ref: any): any
import Notice
What I am looking for is a tooltip to show info along the lines of Notice (color, text)...
A few ideas I had was some kinda JS docs? or possibly I need typescript and it isn't possible with JS (but this doesn't seem right)?
While I'm usually an expert googler, I don't know enough about the issue and all I can seem to arrive at are 'JS tooltip turorials'. Any direction at all is appreciated. :)

HTML5 Webpack Dynamic Drag & Drop

Requirement
We are having a webrtc call solution where multiple people on a webinar call. we have used a third party WebRTC provider (Agora) with HTML webpack Build code they have shared.
We want to drag , drop and switch the users who are joining the channel . Its a complete HTML5 WebPack code.
CODE
Git Code : https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack
Front End : https://webdemo.agora.io/agora-web-showcase/examples/Agora-Web-Tutorial-1to1-Web/
Problem
We used JQUERY Draggable and Droppable in the code which we have. But whenever a NEW user is added to the WEBRTC call a new DIV is generated and that is not DRAGABLE or DROPPABLE.
HELP REQUIRED
I would appreciate any good drag and drop library which can be used in dynamic users for HTML5 WEBPACK
It seems like you shared Agora code rather than your own code which contains the drag/drop logic. Can you share your code with your drag/drop implementation? It would make it easier to provide a relevant answer as to what might be going wrong.
Regarding drag and drop libraries, I really don't think a library is likely to help you until you know what's going wrong with your current implementation, but here are some options:
Draggable - Originally written by Shopify but now with other maintainers
InteractJS - Looks interesting but have not tried this one myself
(Not a library) Native HTML drag and drop API - What I've used when implementing similar features in the past, though with Daily rather than Agora (not that this should make a difference for the drag/drop features)

AFrame - Is it possible to replace the marker with a custom image without the black border?

I know we can generate a custom image using this link.
But the point is, I want a custom image that does not have any borders. With the link provided you can generate a custom image or .patt file with a black border around that image. It is applied to every image that is uploaded. The thing is, I want to use that image the way I want without the border as is shown. So my question is, is this possible in AFrame?
If not, please suggest me any other library or any other process that I can use to achieve this, if this is possible at all.
Update: Please look at #kalwalt's answer below. It is possible now.
currently it is not possible to use markers without border using jsartoolkit. There has been work to enable this. You can have a look here: https://github.com/artoolkitx/jsartoolkit5/tree/nft
However, that only performs on desktop not mobile.
Another way could be using OpenCV.js template matching: https://docs.opencv.org/3.4/d8/dd1/tutorial_js_template_matching.html
cheers
The NFT feature that Thor_Bux mentioned is merged on the master branch of artoolkitx/jsartooolkit5 and also in the new AR.js repository.
You can find the Ar.js documentation at:
https://ar-js-org.github.io/AR.js-Docs/
Image Tracking (NFT):
https://ar-js-org.github.io/AR.js-Docs/image-tracking/
Note that Ar.js is under a new github organization and any collaboration is very welcome.

Show relation b/w nodes in D3 tree graph

I am using d3 js library and eveything is working fine . But I need some enhancement and I don't know If d3 library already support the same or not.
Actually I want to show inter-relation b/w two nodes using de , you will get better idea from the image I have added.
I am using this library right now to show graph .The enhancement which I am looking for is possible using same library or I have to use any other library.
I found one library which suits my needs , it is a multiple parent library.
http://bl.ocks.org/robschmuecker/6afc2ecb05b191359862
I hope it helps someone else too

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.

Categories

Resources