I'm trying to draw on a map using this OpenLayer tutorial.

initDrawEvent() {
  var draw;
  var source = new VectorSource({ wrapX: false });

  var vector = new VectorLayer({
    source: source

  draw = new Draw({
    source: source,
    type: "Polygon"

Unfortunatly the drawing point displayed on the map is not under my mouse cursor but moves with it from a distance. The more I move my mouse to the top left of the map, the more my cursor and the drawing point gets closer. And on the contrary, the more I move my mouse to the bottom right, the more the cursor and the drawing point drifts appart.

I guess that its all about projections.

  • are you mixing projections in your OL project? – Vale Apr 23 '18 at 13:05
  • @Vale Well... I don't think so ! When the map inits and the initDrawEvent() method is called there is no change in projection. So I suppose that the map is using the default projection. – Doctor Apr 23 '18 at 14:14

I found out what the problem was.

I'm using Vuetify to deal with the UI. It has a v-content tag that allows div placement inside the grid.

Now when the app loads, OpenLayer gets the current map size and then vuetify changes the size again to make the map fit with all the other elements in the page. So when I want to draw on the map the drawing point is off because openLayers has the wrong map size.

The solution that I found is to tell OpenLayers to check the size again later :

this.$nextTick(function() {this.map.updateSize()}.bind(this));

Now it works !

  • Don't forget to accept your answer! – Jon Apr 30 '18 at 16:46
  • @Jon Indeed, thx – Doctor May 2 '18 at 7:45

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.