I've developed an application to support drawing something like lines or points and adding some tags on the map using OpenLayers 3.
Many existing functions in OL3 enable me to draw and modify something.
But, when I select something I drew, I felt the need of a snapping function to make me select them more easily.
Unfortunately, current OL3 supports the snapping only for the drawing and modifying, like below:
var draw = ol.interaction.Draw({features: some_features});
var snap = ol.interaction.Snap({featrues: some_features});
map.addInteraction(draw);
map.addInteraction(snap);
Actually, I found that the snapping works by replacing ol.interaction.Draw to ol.interaction.Select, because I can select something I draw if I clicked points apart of them. But, the mouse pointer did not snap to them.
So, How can I implement select interaction with snapping function in OL3?
Added some codes to explain details.
See the link: https://jsfiddle.net/keltpower0/sej6z2q4/1/
After you draw some lines, you should click the very point where lines are placed if you select those lines.
I want to more easily select those lines with snapping function, like, if I move the mouse pointer near lines, the pointer "automatically" snap to the lines
Select with snapping sounds a bit weird to me. What about using the hitTolerance option of the select interaction ?
Related
I would like to draw a rectangle with the mouse and after that be able to edit it is a quadrilateral (polygon) by dragging the corners (to be clear about editing, I found a similar behavior on Konva.js: https://codesandbox.io/s/oxwx9q9ko6 and Fabric.js - click the "Toggle editing polygon" button: http://fabricjs.com/custom-controls-polygon)
I didn't find a ready-made solution and decided implement it myself.
And I have 2 options how to do it:
I can use Rect for drawing, after convert Rect to Line by points and continue to work with shape like as Line, as in the example: https://codesandbox.io/s/oxwx9q9ko6
I can use Line for draw and edit corners like in the example above: https://codesandbox.io/s/oxwx9q9ko6
But in this case, I have to implement the drawing of the rectangle myself, like as Rect
Could you help me with these 2 options and share your opinion and experience?
Maybe I can implement it in simpler way (with Transformer, for example) and I don't know about it.
P.S. I have a React web application and plan to use the react-konva package
Thank you!
Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?
You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.
With the keydragzoom library, you can mouse drag over a map to make rectangle selection, see this example: http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/2.0.9/examples/events.html
What I want is to use this as a selection tool, i.e. to select particular rectangle, and keep the rectangle (the selection) displayed. But the rectangle always dissapears after ending the mouse drag. Is there any way how to achieve this with this library?
I tried to set noZoom option to true, but it didn't help. I know I can draw my own rectangle, but it would require to handle situations when selecting a new rectangle, etc. So I would like to do it within this library.
I'm looking for a javascript charting library which would allow me to build an area chart with an ability to hover the portion between the two adjoining points on the graph curve. Basically like this:
Also as seen on this sample it would be really nice to smooth out the lines between points (use bezier curves instead regular straight lines).
Any help deeply appreciated.
Like #Duniyandn suggested, you can create two series and create rules about what to do with them on mouse interaction.
If you wanted a static section of red you could do it like this. e.g. http://jsfiddle.net/qXbsu/
But if you we're trying to have the highlighted section move with the mouse you could do something like this: http://jsfiddle.net/VuePw/2/#run though the matching of the smooth curves wouldn't be possible.
I use the tooltip formatter function to accomplish both of these because it's an easy proxy for a mousemove callback, not because it's the best way to do it.
When drawing an editable Polygon on a map using Google's V3 API, is there some event I could register for that tells me when one of the polygon's points (only made visible by the editable flag) is clicked? I want to be able to enable a user to draw a polygon, using right clicks, and "complete" the polygon by clicking on the first point plotted. I begin by creating a Polygon of one point, and add each successive point with each right-click. I use the mousemove event to create two "completion" lines, two fainter lines (two Polylines) from the last point plotted to the current mouse position on the map, and from the current mouse position on the map to the first ("anchor") point. When I click on that first point, I'd like to be able to "finish" the Polygon, by taking away these completion lines, inferring the intent of the user now to either edit the points already drawn with the handles the editable Polygon provides, or save the Polygon's coordinates to my application.
Is there a way to do this? (As I've written this, I've thought of one solution: create a small circle, invisible, around the first ("anchor") point, and detect when that invisible circle is clicked. But I wanted to see if there was something built-in in the API that I could use.)
Are you trying to roll your own polygon editor? I would suggest using the drawing library instead:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
Also see events section:
http://code.google.com/apis/maps/documentation/javascript/reference.html#DrawingManager