my idea is to add different buttons for drawing interaction in OL3 such as :

<button id="Point" onclick="addInteractions(Point)">button1</button> <button id="Polygon" onclick="drawPolygon(Polygon)">button2</button <button id="LineString" onclick="drawLine(LineString)">button2</button> var drawstyle = new ol.style.Style({ fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.2)'}), stroke: new ol.style.Stroke({color: '#ffcc33', width: 2}), image: new ol.style.Circle({radius: 7, fill: new ol.style.Fill({ color: '#ffcc33'}) })
}); var source = new ol.source.Vector(); var vector = new ol.layer.Vector({source: source, style: drawstyle)}; function addInteractions(str) { var draw = new ol.interaction.Draw({ source: source, type: str }); map.addInteraction(draw); }

on the official site of OL, all examples used the html select tag, but I don't want to use it. can someone help me please !


Point is not defined when you call onclick="addInteractions(Point)".

Instead of onclick="addInteractions(Point)" you should use onclick='addInteractions("Point")'. This second call passes the string Point as expected by the function addInteractions.

You should also call the same function addInteractions on the other two buttons, right? It should be:

<button id="Point" onclick='addInteractions("Point")'>button1</button>
<button id="Polygon" onclick='addInteractions("Polygon")'>button2</button>
<button id="LineString" onclick='addInteractions("LineString")'>button2</button>

To get a better answer, you should copy and paste the errors you got on the browser's console.

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.