I'm looking for a way to draw a rectangle in a single drag movement, so the user click and hold the mouse pressed then move the mouse and the rectangle is painting as he go and the drawing is finished when he stop pressing the mouse.
Currently it's done using mouse click -> drag -> mouse click again to finish, not that intuitive.
I'm using the latest OpenLayers 3.
Thanks!
The functionality asked for is already present in latest openlayers version (v3.19). Use ol.interaction.Draw.createBox() to create a rectangle with 2 clicks one for start and another for end. See the below example for more details
http://openlayers.org/en/latest/examples/draw-shapes.html?q=draw
You can create your style for the rectangle by creating style object and declaring it in ol.interaction.Draw().
Instead of using the built-in interaction use an instance of https://github.com/openlayers/ol3/blob/master/src/ol/interaction/dragzoom.js but pass in an option/condition to not use the shift key. Here are the conditions https://github.com/openlayers/ol3/blob/master/src/ol/events/condition.js
Have you looked into the DragBox interaction? This will give the user an outline of the box as they are drawing it with click, drag, and release being the interaction.
Related
I'm trying to create a button that works exactly like when I click on rectangle Tool on Tools bar. Meaning I don't want it to create a rectangle by just pressing the button, I'm not gonna use Objectcreate() function. Instead, I want it to wait for the user to push the mouse button on chart and drag it to create a rectangle. Just like when you choose the rectangle tool and the cursor-shape changes.
I've looked the WndObj.mqh, Wnd.mqh and Rect.mqh and couldn't figure it out how does this work.
I appreciate if anyone can tell me how to do it
enter image description here
enter image description here
I have a map where a user can choose some object/feature on the map and draw a line to another object/feature. When the user selects the feature i would like do add a draw interaction and already set the first point to the selected feature without the user having to click again on the map.
Here is a fiddle: Sample
The commented code below should be executed programmatically without user interaction, after pressing the draw button
geometryFunction: function (c, g) {
if (goog.isDef(g)) {
g.setCoordinates(c);
} else {
// DO THIS AUTOMATICALLY ON PRESSING DRAW
// TO INITIALIZE AND START THE DRAWING PROCESS
c[0][0] = 1174072.754460305;
c[0][1] = 332653.94709708635;
g = new ol.geom.LineString(c);
}
...
}
The current behaviour is that you click on the Draw button and can click on the map to start drawing (but i overwrite the first node with my desired starting location -- in this example near central africa)
Is it possible to click on Draw and the first node is already programmatically set, without having to click on map first?
It is not currently possible to do manually append points to the OpenLayers 3 ol.interaction.Draw, but it would make sense to be able to support it (in my mind). It would be "as-if" the user had clicked.
You should ask the OL3-dev mailing this about adding such a feature to see what they think about it. If they agree and you're willing to work on this, you could provide a pull request. See: https://groups.google.com/forum/#!forum/ol3-dev
If you don't mind using a private method in OL you can do this to achieve what you want.
var event = $.Event('click'); //create a click event in your draw method using JQuery
event.coordinate = [1174072.754460305,332653.94709708635];// set your starting coordinate
draw_interaction.startDrawing_(event);// tell your interaction to start drawing
I implemented a map using apple's native f/w and I have implemented the functionality to add some polygons over the map. Now, I want to have a "close" button at the edge of the each polygon and when I click on that button, i need to delete the polygon (one polygon at a time). I have tried creating a button over the polygon edge, but I was unable to make an action on clicking the button. I have tried with annotations as well. In this case, I am unable create a close button over all the polygons; I could able to have the close button (annotation) only on the last polygon which was created but when I click on the button, the polygon which was created first only was getting deleted.
Kindly suggest me a solution to have a close button on each polygon, and to delete a polygon(one by one) on clicking the button.
In my application I have used the OnMouseDown and OnMouseUp to create a windows desktop style selection box. OnMouseDown I create a semi transparent blue window and get rid of it in the OnMouseUp.
The result is a nice transparent box to indicate the selection area in a grid control.
The problem is that on a touch screen the mouse down and up events do not get called when you press and drag like you would with a mouse. The up/down events are called if you simply press in one spot but not if you touch and drag.
My current thinking is to use WM_TOUCH messages and capture the touch and drag myself but I am hoping there is a better way or something I have missed. Any suggestions?
(This is a VCL app under XE5)
I've implemented drag and drop OK with jQueryUI draggable and droppable.
For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.
I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?
The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...
Thanks
See my answer on this other question. If you change it so instead of
$("#headerDiv")
.mousedown(function(event) {
x = event.pageX;
y = event.pageY;
$(this).parent().addClass('movable');
})
.mouseup(function() {
$(this).parent().removeClass('movable');
});
bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.
I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.