After introducing the goal, we should do the following:
Reuse the usual sample for the chapter that include the
osm_default
andmap
variables.Between the two variables, declare
ol.interaction.DragBox
, as follows:var dragBoxInteraction = new ol.interaction.DragBox({ condition: ol.events.condition.shiftKeyOnly, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 2 }) }) });
Like for
DragRotateAndZoom
, deactivateDragZoom
, and add the new interaction in theinteractions
parameter withinol.Map
, as follows:interactions: ol.interaction.defaults({ shiftDragZoom: false }).extend([dragBoxInteraction]),
Then, open your browser and try to draw a rectangle by holding down the Shift key while dragging with the mouse.
Now, add the following code between the
dragBoxInteraction
andmap
declarations:dragBoxInteraction.on('boxend', function(e) { var format = new ol.format...