OpenLayers 3 Custom Freehand Sketch Tool

Here's how you create freehand drawing tool in OpenLayers 3:

I'm going to skip the part where you create HTML file with div element that will hold your OpenLayers map and go straight to javascript code.

So, let's say that we have a vector layer and a default map:

 
var vectorLayer = new ol.layer.Vector();
var map = new ol.Map({
    target : 'mapDiv', 
    layers : [vectorLayer],
});

Before we create our custom interaction we will need two arrays. One will hold all the features we have drawn and the other one will be used to store coordinates of our cursor as we draw:

    var sketchFeatures = [];
    var sketchCoordinates = [];
    

Now let's create new interaction and add it to the map:

var sketch = new ol.interaction.Pointer({
    handleDownEvent: mouseDown,
    handleDragEvent: mouseDrag,
    handleUpEvent: mouseUp
});

map.addInteraction(sketch);
    

The mouseDown, mouseDrag and mouseUp that we passed inside constructor are our custom functions. By default handleDownEvent just returns true, and that means that the mouse button is pressed down. If we want to do something more on our mouse click we can add that code inside our function before returning true. So let's do that:

var mouseDown = function (e) {
    sketchCoordinates = [];
    var sketchFeature = new ol.Feature(new ol.geom.LineString([]));
    vectorLayer.getSource().addFeature(sketchFeature);
    sketchFeatures.push(sketchFeature);
    sketchFeature.getGeometry().setCoordinates(sketchCoordinates);
    return true;
};

Let's figure out what's going on in here line by line.

So first we set our sketchCoordinates array to an empty array thus removing any coordinates that may have been left from the previous stroke.

Next, we create a local variable sketchFeature, and because features need to have geometry we assign it a new geometry of type LineString (that means that openLayers will draw continuous line between provided coordinates).

Now in order to have this feature displayed we need to add it to our vectorLayer. But we can't add it to a layer, we have to add it to the "source" object of the vectorLayer, because that is the object that holds all features and have all methods for adding them and removing them.

Next we push our sketchFeature into sketchFeatures array just so we can keep track of what is drawn by sketching tool in case we have some other features inside vectorLayer.

And now that everything is set for drawing we return true and as long as it stays true if we move our cursor that will trigger handleDragEvent, which will call our next function  mouseDrag that actually draw our line.

var mouseDrag = function (e) {
    sketchCoordinates.push(e.coordinate);
    sketchFeatures[sketchFeatures.length-1]
    .getGeometry().setCoordinates(sketchCoordinates);
};
   

Now, very simple stuff happens here - we take coordinates from our cursor (from event e) and we push them in our sketchCoordinates array. We make sure that it's the last member of the sketchFeatures (the feature that we are currently drawing) that gets these coordinates, and not some other feature that we drew previously.

Finally, if we release our mouse button we trigger the last, handleUpEvent that by default just returns false. This is the function that ends drawing of our current line, and we won't add much to it, just a console.log message to notify us.

var mouseUp = function (e) {
    console.log("finished drawing");
    return false;
};

Remember how we added sketch interaction to the map? Well, if we leave it at that we won't be able to pan our map and if we do our other stuff the sketch will still be drawing stuff on our map. We need to turn it off. And to do so we just have to remove it from the map with this method:

map.removeInteraction(sketch);

or by keeping it attached to a map but deactivating it :

sketch.setActive(false);

Make sure to have this function call on some button or anchor click event listener. If you prefer to do a toggle button you can check if the interaction is active and then switch it off and vice versa. This is how you do it:

if(sketch.getActive() == true){
    sketch.setActive(false);
}else{
    sketch.setActive(true);
};
  

Simple, right?

Ok, so that's all I got for you for now. Next time we'll create custom toolbar and we're going to include button for our custom sketching tool as well as create button for clearing our vectorLayer from all freehand drawings.