I'm pretty new to From Openlayers and I have a problem. I can draw a rectangle using DragBox on my OpenLayers 3 map. How can I get its coordinates? I tried getGeometry() but it returns 'null'. I think I just added the 'drawing dragbox feature' to my map and I am not creating an actual rectangle. I am going to use the area inside these coordinates later. Here is my code:

        boxControl =new ol.interaction.DragBox
            condition: ol.events.condition.altKeyOnly,
            style: new ol.style.Style
                stroke: new ol.style.Stroke({color: [0, 0, 255, 1]})

OpenLayers 3 is pretty new and most of the resources on the web are for 2.x and I couldn't find any help.

2 Answers 2


I think I found the answer. There is a Question here

So I wrote:

boxControl.on('boxend', function () 
      var a= boxControl.getGeometry().getCoordinates();

and it's returned:

3524005.462580891,4941742.299355211, 3524005.462580891,4609088.352258123, 4069460.0964239086,4609088.352258123, 4069460.0964239086,4941742.299355211, 3524005.462580891,4941742.299355211

there are 5 points with x-y coordinates also 1st and 5th ones are same, so they make a polygon, in my case a rectangle! Thanks again.

  • ol.interaction.DragBox's getGeometry method always returns a rectangular polygon. But the rectangle won't be an extent (i.e. a rectangle that is parallel to the x and y axis) when the map view is rotated.
    – erilem
    Nov 9, 2014 at 8:42


<form role="form" id="form1" action="submit">
    <div class="form-group col-lg-6">
        <label for="bbox3">Upper Left</label>
            <input type="text" style="font-size: x-small;"
                class="form-control" name="bbox[3]" id="bbox3" placeholder="latitude"/>
            <input type="text" style="font-size: x-small;"
                class="form-control" name="bbox[0]" id="bbox0" placeholder="longitude"/>
    <div class="form-group col-lg-6 ">
        <label for="bbox1">Lower Right</label>
            <input type="text" style="font-size: x-small;"
                class="form-control" name="bbox[1]" id="bbox1" placeholder="latitude"/>
            <input type="text" style="font-size: x-small;"
                class="form-control" name="bbox[2]" id="bbox2" placeholder="longitude"/>



//Dragbox - select
draw = new ol.interaction.DragBox({
    condition: ol.events.condition.altKeyonly,
    style: new ol.style.Style({
        stroke: new ol.style.stroke({
            color: [0, 0, 255, 1]

//Dragbox - get coordinates to fields
    draw.on('boxend', function() {
        var string = draw.getGeometry().getcoordinates();

function itest(myString) {
    var thebox = myString.toString().split(",");
    var long1 = thebox[0];
    var lat1 = thebox[1];
    var long2 = thebox[4];
    var lat2 = thebox[5];
    document.getElementById("bbox0").value = long1;
    document.getElementById("bbox3").value = lat1;
    document.getElementById("bbox2").value = long2;
    document.getElementById("bbox1").value = lat2;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.