I'm using Openlayers3 for drawing and storing lines, and then doing some processes on the inputs. Now I want to get the coordinates of the starting and ending points of the line while the line is being drawn. In other words, as the user clicks to start the line the coordinates of the starting point being collected and do some process. When the last point is inserted the same thing happens. I have read so many answers here mostly referring to OL2 and I also read the OL3 documents, but seems something is not right. Here is part of my code:

draw.on('drawstart', function(e1) {    
var mouseCoordinatesStart=map.getEventCoordinate(e1);
infoBox.innerHTML = 'you just started to draw at: <br/>' + mouseCoordinatesStart;});

draw.on('drawend', function(e2) {//I have tried the same process as the drawstart but the results are the same. here I just want to show I tried different methods.
var mousePixel= map.getEventPixel(e2);
var mouseCoordinatesEnd=map.getCoordinateFromPixel(mousePixel);
infoBox.innerHTML = 'drawing endded at: <br/>'+ mouseCoordinatesEnd;});

it seems that the function for handling the drawstart works for the first time but then the drawend event does not change the coordinates. However, if I zoom out or in then the coordinates change but then I guess it's not the coordinates of the endpoint of the line. Could someone help me with this issue?

2 Answers 2


why dont you get the feature drawn and then get the coordinates out of it. It should be much faster.

draw.on('drawend', function(e2) {
var feature = e2.feature;
var geometry = feature.getGeometry();

//depending on the type of geometry drawn you may get first and last 
//coordinate. From your description I guess you draw a linestring 
//you may clarify that using geometry.getType()
//so for ol.geom.LineString do as follows. According to the 
//documentation this should work for any type of geometries
var startCoord = geometry.getFirstCoordinate();
var endCoord = geometry.getLastCoordinate();
//If you are not sure what the type is, or if you face any problems 
//with getFirstCoordinate, getLastCoordinate
//you may go for a more general technique

var coordinates = geometry.getCoordinates();
//and then parse the coordinates object to get first and last
var startCoord = coordinates[0];
var endCoord = coordinates[coordinates.length-1];
  • Thanks! That's a good idea and I am now testing to see if it can give me what I need. but I want my code to be very interactive. For instance, I want to inform the user that the inserted firstPoint of the line could be snapped to another point close to it and the user should be able to accept or decline. Therefore I need ti catch the event as sson as it is triggered.
    – msc87
    Oct 30, 2015 at 10:04
  • 1
    For the example you derscribe you may asign the 'drawstart' event as well, grap the first point , do your checks and inform your user. You can asign both events. This should not be a problem.
    – pavlos
    Oct 30, 2015 at 10:20
  • With a bit of change it is working for me. If you change your code to two events, one for start and one for the end, and use getFirst and getLastCoordiante respectively then I can accept your answer.
    – msc87
    Oct 30, 2015 at 10:37

I asked a similar question recently and Jonatas Walker was kind enough to help me with a solution by means of a geometry function. He created a fiddle which I've adapted slightly but this might help

  • 1
    In @msc87 case the way I provide is much simpler and would do the job as good as the one you provide. Though, the fiddle you provide is very intersting and gave me an idea for a current question I have made (no answers yet). Could you please give me the link of your answer? So I can reference it. Thanks
    – pavlos
    Oct 30, 2015 at 11:04
  • Sure Pavlos, my question is here link
    – dvmac01
    Oct 30, 2015 at 11:50
  • thanks for that @dvmac01. Here is my question and my own answer gis.stackexchange.com/questions/168284/…
    – pavlos
    Oct 30, 2015 at 12:20
  • If I understood the geometryFunction correctly, it is mainly used when the geometry is changed. If I need coordinates of every vertex I think it should be the solution, otherwise drawstart and drawend event can handle my case for now.
    – msc87
    Nov 2, 2015 at 10:07

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.