Lost the distance measures when drawing (except for circle)

[DrYSG]

Chrome V58
Windows 10
Leaflet 1.0.3
Leaflet-draw 0.4.9

As shown below, with leaflet 1.0 and leaflet draw 0.2.4 I was getting text distance for lines, and area for rectangles.

Now I only get the area for circles, but the others do not show anything. Is this just me, and why does the below no longer work?

(I.e. I no longer see the 1425.65 km as shown below).

function addDrawLayer() {
    var options = null
    var map = MAP.map
    var drawings = new L.FeatureGroup()
    MAP.drawLayer = drawings
    map.addLayer(drawings)

    options = {
        shapeOptions: {
            showArea: true,
            clickable: true
        },
        metric: true,
        edit: {
            featureGroup: drawings
        }
    }
    var drawControl = new L.Control.Draw(options)
    map.addControl(drawControl)
    map.on('draw:created', function (e) {
        var type = e.layerType
        var layer = e.layer
        if (type === 'marker') {
            layer.bindPopup('A popup!')
        }
        drawings.addLayer(layer)
    });
}

[ddproxy]

Are you still having this issue? @DrYSG

[DrYSG]

Thanks for asking. Yes. I wanted to setup a codepen to show you, but as you can see from the codepen and the comments in Stack Overflow, there are bigger issues with Leaflet and Leaflet.draw:

https://stackoverflow.com/questions/44874563/leaflet-draw-0-4-9-control-not-working-with-leaflet-1-1-0/44895306#44895306

[ddproxy]

You should still be able to use Leaflet 1.0.x in codepen, specifically we should use draw 0.4.10 as well since there were some patches.

[ddproxy]

https://jsfiddle.net/mvp7hgou/7/

Leaflet 1.0.3 and Draw 0.4.10 - issue is still present.

[DrYSG]

@ddproxy , in stack overflow, you commented that

Whilst, your options object is the improper schema. ShapeOptions are part of each draw item may have a shapeOption for that draw tool.

draw: polygon: {shapeOptions: {showArea: true} }

But I don't see that in your fiddle. Is there something more that I don't grok yet?

[ddproxy]

I think I had a different fiddle set up to work on that but I didn't share it because it wasn't working. The documentation for these options need a bit of work and cleanup.

[vegaed]

I am seeing the similar behavior.

Chrome 60
Firefox 54
macOS 10.12.6
Leaflet 1.2.0
Leaflet-draw 0.4.10

• Firefox does properly show the tooltip for a line.
• The area does not show for rectangle or area on either Chrome or Firefox.
• Circle works on both.
• Not seeing the area of polygon on this fiddle but my own code does show on both Chrome and Firefox.

[berti]

For polylines, it looks like this is because L.Draw.Polyline never shows the length in the tooltip if the browser supports touch events, which Chrome for desktop seems to do. I understand why this was done, but I'm not sure about the best solution here.

For rectangles and polygons, it's a matter of setting the right options:

const drawOptions = {
  draw: {
    rectangle: {
      showArea: true
    },
    polygon: {
      showLength: true,
      showArea: true,
      allowIntersection: false  // Otherwise, area would not be shown
    }
  }
};

[olemartinorg]

Thanks, @berti. This isn't the first time I've seen stuff break or behave differently because the browser has touch support (even if the screen doesn't). All modern browsers should have support for touch events now, so maybe someone should rethink how that changes lots of functionality for non-touch users.

In this case, I might agree that showing distances isn't all that useful when drawing with your fingers - but it's still very useful when drawing with a mouse (or a stylus). Maybe it's better to just show the distance even when drawing using touch, rather than disable it outright because there's a remote possibility that the user might use touch?

[hbaltz]

The version 1.0.0 of leaflet.draw seems to correct this problem

[Abderrazak3lhu]

for anyone facing distance tooltip flickering, Try forcing visibility of the tooltip through CSS :
.leaflet-draw-tooltip { visibility: visible !important; }