I am trying to combine two JS functions in a WMS; drawing features and getting/showing the coordinates of features, e.g. by clicking the drawn features afterwards.

I can manage to draw features by using this openlayers example; http://openlayers.org/en/latest/examples/draw-features.html

As I understand I should use the function 'drawend' to get coordinates of the drawn features?

How do I combine these two functions in the script? I am new to JS.


try adding this inside the function addInteraction

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

    var lon, lat;

    coords.forEach(function(latlon) {


now inside view you need to change the projection to 'EPSG:4326', so it will give you the lat and lon not coordinates

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4,
   projection: 'EPSG:4326',


heres a working example https://codepen.io/anon/pen/YZggEg?&editors=1010

  • Hi! Exacly where should I embed the code into the script? =) Apr 4 '17 at 13:54
  • I Just updated the answer
    – rrrm93
    Apr 4 '17 at 14:22
  • Thanks a lot! I can´t see the coordinates anywhere in the working example? How do I see them? =) Apr 5 '17 at 10:59
  • I have updated the codepen, it will now display lon and lat on the html
    – rrrm93
    Apr 5 '17 at 12:09
  • This helped me a lot. It Works perfect! Thanks a lot for your help! Apr 11 '17 at 7:10

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.