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?


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. May 31 '15 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
    May 31 '15 at 11:37
  • 1
    what's goog? It error for me
    – Dariush
    Jul 23 '15 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
    Jul 23 '15 at 6:19
  • 1
    Why it error for ol.js file?
    – Dariush
    Jul 23 '15 at 6:27

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.