JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width: 400px; height: 300px;"></div>

<span id="foo"></span>

JavaScript

var map, vectorLayer, wmsLayer, measureControl;

window.onload = function() {
    
map = new OpenLayers.Map('map',
                         {
controls: [new OpenLayers.Control.Zoom()]
});

wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?",
    {layers: 'basic'},
    {'attribution': 'Provided by OSGeo'}
);

map.addLayers([wmsLayer]);
map.zoomToMaxExtent();

measureControl = new OpenLayers.Control.Measure(
    OpenLayers.Handler.Path,
    {
        immediate: true,
        persist: true
    }
);  

       map.events.register("mousemove", this, function(e){
           //console.log(e.xy);
                                                         
          var tittie= map.getLonLatFromPixel(
        new OpenLayers.Pixel(
            e.xy.x,
            e.xy.y
        ));
                                                          console.log(tittie);
                                                         }, {
       //    extension: true
       });
//	        map.events.register("touchmove", this, this.cancel, {extension: true});
//	        map.events.register("touchend", this, this.onClick, {extension: true});
    
measureControl.getCustomLength = function(evt, onlySum) {
    var idx = evt.geometry.components.length;

    if (idx < 2)
        return '';  

    var geom = new OpenLayers.Geometry.LineString([
        evt.geometry.components[idx - 2],
        evt.geometry.components[idx - 1]
    ]);
    
    var lastLengthArr = this.getBestLength(geom);
    
    var str = '';

    if (idx > 2 || onlySum)
        str += 'Total: ' + (evt.units === 'km' ? evt.measure.toFixed(3) : evt.measure.toFixed(1)) + ' ' + evt.units + '&nbsp;&nbsp;&nbsp;';

    if (!onlySum)
        str += 'Last segment: ' + (lastLengthArr[1] === 'km' ?  lastLengthArr[0].toFixed(3) : lastLengthArr[0].toFixed(1)) + ' ' + lastLengthArr[1];

    return str;
}

map.addControl(measureControl); 

// Update content in .foo div   
measureControl.events.on({
 ...