I found the project https://github.com/svrcekmichal/react-sketchpad.
Is there features about draw straight line, rectangle, pencil tool like above project with Apache ECharts?
Related
I am looking for a way to draw bezier curves in my mapbox gl js app.
Just like this very interesting example : https://demos.mapbox.com/bezier-drawing-tool/
Unfortunately i don't find any documentation about this demo and its exactly what i am searching for.
In this demo, when you select the pen tool you can start a bezier curve by dragging the mouse. In edit mode, Bezier handles shows up and allow the user to modify the bezier spline.
The mapbox gl draw https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md
is a very promising API but there is currently no support for bezier curve. i also looked in the available custom modes but found nothing.
As a fallback, i think i could develop a custom mode with mapbox gl draw to support bezier curves by subdividing the line in multiple segment. But before going that way i would like to know if there is already an existing support for drawing bezier curves ?
Thank you
I have developed a map using leaflet and leaflet.Markercluster. My problem is, that when the circle, at full zoom, is too near the original circle, it is not clickable.
In the image, you can see the pop-up that is displayed when you click on a circle. However, when you click on the red circle, no pop-up displays. Firstly, let me emphasise, that the red circle is actually the same as the other circles, I have just coloured red in this image, so I can refer to it. Based on this example, and other examples I have, the problem is when the circle is covered by the original circle (barely visible as an orange shade in the centre).
Is there a way to fix this?
Thanks
This is a known issue of Leaflet.markercluster plugin when you use CircleMarkers and they are spiderfied: see also this post on GIS Stack Exchange https://gis.stackexchange.com/questions/259376/reading-attribute-popup-information-from-cluster-presented-points-in-the-map-gen/259538?noredirect=1
This should normally have been fixed by default since 2018 (PR #846, included since v1.3.0), which version of Leaflet.markercluster are you using?
If you still have an issue, please raise an issue on the plugin repo, and provide a reproduction sample.
In the meantime, you can also use the old trick of increasing spiderfyDistanceMultiplier option to more than 1, so that the spiderfication is bigger, and the innermost Circle Marker extends beyond the Cluster icon.
I want to draw a box using annotations. Though annotation provides
parameters to draw box at every point in the chart.
But using this it will draw a box to every point in the chart see the google docs.
In the given docs, it draws box at both the points. Is it possible to draw the box only at one point.
See JSFiddle, at top of each vertical line box is written, I want to draw this inside a box or rectangle.
See below image to understand my requirement:
I was asked to see if I could using leaflet draw a circle and as I'm drawing it show what the current expanding radius is. Either as a tooltip or write it to a page label. I noticed the circle option has a showRadius option but can you capture this value as your drawing the circle?
Kind of like the measure tool that uses the drawing plugin can show your distance as you move the mouse.
This way the user can see how big their circle is as they are drawing it.
Any ideas, examples, hints?
Leaflet.draw plugin does that.
Check out this demo
However, it shows radius only when you create a circle. Unfortunately, not when you edit it.
I am creating a MapBox project with a geoJson vector layer. I have been using the following example as my guide.
https://www.mapbox.com/blog/neighborhood-mapping-with-dynamic-vector-data-layers/
When I hover over any geoJson feature the stroke is changed to 2 pixels. However the stroke gets clipped by the neighboring features sometimes. I believe this has something to do with how the different features are stacked. So if I hover on a feature which is stacked near the bottom the neighboring features are covering that stroke.
Here is an example...
http://www.vandam.com/chpc/inconsistent_stroke.jpg
Is their a way to set the stroke to be inside of the polygon or a way to bring a feature to the top of the stack when hovering?
Thanks for any help!
By adding the function
layer.bringtoFront();
after setting the hover styling your polygons will come to front.