Is it possible to drag/draw a bbox in Openlayers 3 and have the coordinates from this function auto fill-in a form field(s) on the same page?


Got it! I can't copy-n-paste from my code, so I retyped it. Forgive any typos.


<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]

        /* add the DragBox interaction to the map */

draw.on('boxend', function (evt) {
        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;
| improve this answer | |

You can listen to the boxend event that is emitted when the user finished creating a drag box. Something like

dragbox.on('boxend', function(evt) {
  form.coordinates.value = dragbox.getGeometry().getExtent().join(',');
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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