I want to draw a line with the vertices:

  • initial center;
  • current center (on each pointer drag).

I have a blue point at the initial center and a red cross at the new center of the map on each drag.

Here is my code:

var getCenter = function() {
    return map.getView().getCenter();

var center = [-70000, 5500000];

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({}),
    style: new ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({
                color: [0, 0, 255, 1]
            radius: 4
        stroke: new ol.style.Stroke({
            color: [0, 0, 0, 1],
            width: 2

var p = new ol.Feature(new ol.geom.Point(center));

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
    view: new ol.View({
        center: center,
        zoom: 5

var origin = getCenter();
var target = getCenter();
var coord = [origin, target];
var line = new ol.geom.LineString(coord);
var feature = new ol.Feature(line);

map.on('pointerdrag', function () {
    target = getCenter();
    coord = [origin, target];

I have created an example CodePen to illustrate what I want to achieve.

As you can see, when performing a drag, the red cross goes away from the blue point. The black line between those two only gets drawn after finishing the drag.

I want the line to be drawn during the drag.

How could I achieve this?

1 Answer 1


The problem is in your vector layer. You have to use updateWhileInteracting:

var vector = new ol.layer.Vector({
    updateWhileInteracting: true,

As written in the API this might cause performance impact for large amounts of vector data.

  • Thank you so much. I totally missed this option. I is solved! :) I intend to use it with only one feature, so there won't be any performance problems.
    – joaorodr84
    Commented Sep 8, 2016 at 10:12
  • updated API url for Vector stating the performance impact: Commented May 31 at 7:28

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.