For drawing Polygon in OpenLayers 2 we could use as follow:

function drawEnd(){

function putPoint(){

function sketchModified(){

function cancel(){

var callBackParams = {
    "done": drawEnd,
    "point": putPoint,
    "modify": sketchModified,
    "cancel": cancel

var drawCrtl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {callbacks: callBackParams});

When we put point to drawing the polygon, the system call putPoint function. When mouse move over the map, it call sketchModified function. I want to use these two Event in OpenLayers 3. I define my layer as follow:

var source = new ol.source.Vector({wrapX: false});

var vector = new ol.layer.Vector({
  source: source
draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon'

drawStart = function(){
    console.log("Salam Bar Mahdi");
drawEnd = function(){
    console.log("Ya Mahdi");

draw.on('drawstart', drawStart);
draw.on('drawend', drawEnd);
var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([select, modify, draw]),
    target: 'map',
    layers: [
      new ol.layer.Tile({
        title: "Global Imagery",
        source: new ol.source.TileWMS({
          url: 'http://localhost:8080/geoserver/world/wms?service=WMS',
          params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'}
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 4

But in Openlayers 3 I saw only drawEnd and DrawStart Event.

How Can I do?

1 Answer 1


OpenLayers v3.5.0 does not easily support the feature you're looking for, but there is a feature currently in development that you can use.

On ol.interaction.Draw, you can specify an ol.interaction.DrawGeometryFunctionType function to handle updates to the current geometry.

An example I've written up is shown below:

var geometryFunction = function (c, g) {
  if (goog.isDef(g)) {
  } else {
    g = new ol.geom.Polygon(c);

  if (c[0].length > ct) {
    console.log('mouse click coord : ' + c[0][c[0].length - 1]);
    ct = c[0].length;
  } else {
    console.log('mouse move coord : ' + c[0][c[0].length - 1]);

  return g;

This is pretty much what the default geometryFunction function does, without the new point identification and console logging.

A fully functional example is here: http://jsfiddle.net/1a948faa/2/

Note the following caveats:

  • You will have to implement a separate function, or case for different geometry types.
  • The code is currently still in development and is thus not stable. In addition it is subject to change at any time.
  • 1
    Thanks for your response. Your Example only implement putPoint function, but I need sketchModified too. Commented May 31, 2015 at 11:19
  • If you run the example, you will see that geometryFunction is triggered on both mouseclick and mousemove events. Given the experimental state of the API, if you need any further functionality than that you will have to work it out for yourself.
    – nagytech
    Commented May 31, 2015 at 11:37
  • 1
    what's goog? It error for me
    – Dariush
    Commented Jul 23, 2015 at 6:04
  • 1
    sorry sir. I'm using ol-3.6.0. But I use ol.js file , you use ol-debug.js file .
    – Dariush
    Commented Jul 23, 2015 at 6:19
  • 1
    Why it error for ol.js file?
    – Dariush
    Commented Jul 23, 2015 at 6:27

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.