Search code examples
javascriptreactjsmapsfrontendopenlayers

Measure element while drawing using javascript

I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.

How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).

So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.

Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?

Thanks for help in advance.

Solution

  • The ol-ext/Overlay/Tooltips can do it for you.
    See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html
    measure tooltip