I have a draw interaction where I draw on an existing linestring feature in an Angular application. I start the draw interaction with tracing active to this linestring. When i pan after starting the draw interaction, the tracing breaks...

You can reproduce this issue on the OpenLayers example of tracing: Tracing example from openlayers

  1. Start the tracing/draw interaction
  2. Pan during the interaction
  3. Notice that tracing is broken now

Relevant code from the openlayers example:

// this is where the drawn features go
const drawVector = new VectorLayer({
  source: new VectorSource(),
  style: {
    'stroke-color': 'rgba(100, 255, 0, 1)',
    'stroke-width': 2,
    'fill-color': 'rgba(100, 255, 0, 0.3)',

const value = 'LineString';
const drawInteraction = new Draw({
  type: value,
  source: drawVector.getSource(),
  trace: true,
  traceSource: baseVector.getSource(),

I do notice the traceState_ = {active: false} when I inspect the Draw object after panning...

Is this by design and is it possible to have tracing active after panning by somehow updating this draw interaction after panning and re-enabling tracing?

ol version 9.1.0

  • There is probably a conflict of conditions between the interactions. Try setting one up to work with a key pressed.
    – Mike
    Commented Apr 30 at 12:03
  • Thank you for answering. Do you mean a conflict between the snap-interaction and the draw-interaction? And I should try a setup where the snap-interaction only works with a key pressed down? (Trying to understand your workaround)
    – Joachim
    Commented Apr 30 at 12:11
  • No, between Draw and DragPan, where both have a default of noModifierKeys. For example adding condition: shiftKeyOnly, to the Draw interaction means that does not respond to pointer down unless the shift key is down while the DragPan only repsonds when shift is not down.
    – Mike
    Commented Apr 30 at 14:20
  • You are correct, great suggestion! When I add the condition to the draw-interaction, panning does not break tracing! Now this does not solve the issue however: do you have any suggestion on how to fix the issue? In order to be able to pan around while drawing without any condition?
    – Joachim
    Commented Apr 30 at 14:34
  • I also added the condition to panning and noticed the following: when I do not pan around (because I do not hold shift) and simply click, drag and release, the tracing is also broken... So the panning in itself could not be the cause of the issue.
    – Joachim
    Commented Apr 30 at 14:36

1 Answer 1


I would say this is a flaw in OpenLayers, since both trace and map pane are native to OpenLayers and so should work together, not fight.

There is hackish workaround for this. Current status of tracing is stored in drawInteraction.traceState_ and is reset when map is panned. Workaround is to store this state at the start of the map pan and restore it when pan ends.

Code for doing that can look like this (tested):

var traceStateClone = null;

map.on('movestart', function() {
  if (drawInteraction.traceState_.active)
    traceStateClone = structuredClone(drawInteraction.traceState_);
  else {
    traceStateClone = null;
map.on('moveend', function() {
  if (traceStateClone && !drawInteraction.traceState_.active) {
    drawInteraction.traceState_ = traceStateClone;
  • Thank you for answering. This workaround fixed the issue! Typescript code will not compile however because traceState_ is a private property of a draw interaction: casting the draw interaction to 'any' fixes this issue for typescript. Many thanks!
    – Joachim
    Commented May 2 at 9:39

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.