1

I am trying to replace the openlayers draw features form by button. I have created three buttons for point, line and polygon features draw. When clicking the first button (value = point) it works fine but clicking second button it doesn't change the drawing value properties (like value = line). Below is my code:

    <input id="type" type="button" value="Point">
    <input id="type" type="button" value="Linestring">
    <input id="type" type="button" value="Polygon">

    ...

    var typeSelect = document.getElementById('type');

    document.getElementById('type').onclick = function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: typeSelect.value
      });
      map.addInteraction(draw);
    }


    /**
     * Handle change event.
     */
    typeSelect.onchange = function() {
      map.removeInteraction(draw);
      addInteraction();
    };

    addInteraction();
1

Problem with your approach is that all the input buttons have the same id, and when you are referencing element by document.getElementById('type'), you get HTML element only for the first one.

@Ashok Vanam ESRIAu answer is in the right direction, but to bring context of button to function, it has to be passed as parameter. Also removing of possible previous interaction has to be included.

So working code should look something like this (tested):

<input type="button" value="Point" onclick="addInteraction(this)">
<input type="button" value="LineString" onclick="addInteraction(this)">
<input type="button" value="Polygon" onclick="addInteraction(this)">

...

var draw = null; 
function addInteraction(button) {
  var value = button.value;
  if (draw != null) {
    map.removeInteraction(draw);
  }
  draw = new ol.interaction.Draw({
    source: source,
    type: value
  });
  map.addInteraction(draw);
}
0

Function declaration and assignment is on same line. split them up like this

 function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: typeSelect.value
      });
      map.addInteraction(draw);
    }

document.getElementById('type').onclick = addInteraction()
0

The code is not properly tied up with HTML controls. Please check the code:

<  id="typePoint" type="button" value="Point" onclick ="addInteraction()" >
    < input id="typeLine" type="button" value="Linestring" onclick ="addInteraction()" >
    < input id="typePolygon" type="button" value="Polygon" onclick ="addInteraction()"  >

    ...

   // var typeSelect = document.getElementById('type');

    function addInteraction() {
      var draw = new ol.interaction.Draw({
        source: source,
        type: this.value
      });
      map.addInteraction(draw);
    }

Please note this code haven't tested for drawing functions but give a try...it should work otherwise please reach me here will help you further.

  • Hi Ashok, Thanks for replay. I have tried but it doesn't work. – Kamalh27 Sep 7 at 12:18

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.