CODEWITHSUNDEEP
openlayers-3
amitdar
amitdar

Reputation: 927

OL3 - Draw rectangle using single drag movement

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!

Upvotes: 0

Views: 1825

Answers (3)

BMamba2942
BMamba2942

Reputation: 31

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.

Upvotes: 0

Sumanth Shastry
Sumanth Shastry

Reputation: 1159

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().

Upvotes: 1

Corey Alix
Corey Alix

Reputation: 2750

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

Upvotes: 0

Related Questions