Works great on other platforms, But when using Safari on an iPhone device, it is impossible to turn off the PolylineMeasure tool. Do you have any suggestions?

As shown in the picture below, It didn't work correctly in my project. Is it related to the CRS.Simple I use ?

my code:

<template>
        <l-map ref="map"  style="background: #fff;" :crs="crs">
            <l-image-overlay :url="url" :bounds="bounds"></l-image-overlay>
        </l-map>
</template>
<script>
 import {CRS} from 'leaflet';
import 'leaflet.polylinemeasure/Leaflet.PolylineMeasure.css';
import polylineMeasure from 'leaflet.polylinemeasure/Leaflet.PolylineMeasure';
export default {
    data() {
        return {
            zoom: 1,
            bounds: [[0, 0], [0, 0]],
            map: null,
            crs: CRS.Simple,
            width: 0,
            height: 0
        };
    },
    props: {
        url: {
            default: '',
            type: String
        }
    },
    watch: {
        url: function(newVal, oldVal) {
            if (newVal) {
                let img = new Image();
                img.src = newVal;
                let that = this;
                img.onload = () => {
                    that.width = img.width;
                    that.height = img.height;

                    const crss = CRS.Simple;
                    const w = img.width;
                    const h = img.height;
                    let p1 = new window.L.point(0, h);
                    let p2 = new window.L.point(w, 0);
                    let southWest = crss.unproject(p1);
                    let northEast = crss.unproject(p2);
                    const bound = new window.L.LatLngBounds(southWest, northEast);
                    that.bounds = bound;
                };
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.map = this.$refs.map.mapObject;
            this.drawnItems = new window.L.FeatureGroup();
            this.map.addLayer(this.drawnItems);

            this.drawControl = new window.L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: false,
                    polygon: false,
                    circle: false,
                    circlemarker: false,
                    marker: false,
                    zoomControl: true,
                    rectangle: false
                },
                edit: {
                    featureGroup: this.drawnItems,
                    remove: true
                }
            });
            this.map.addControl(this.drawControl);

            window.L.control.polylineMeasure({
                position: 'topright',
                unit: 'metres',
                clearMeasurementsOnStop: false,
                showMeasurementsClearControl: true,
                showUnitControl: false
            }).addTo(this.map);

        });
    }
</script>

• "leaflet": "^1.5.1"
• "leaflet-draw": "^1.0.4"
• "leaflet.polylinemeasure": "^2.0.0"
• "vue": "^2.5.16"

I have a layer with several CircleMarkers. However, I cannot measure the distance between two CircleMarkers since popups on clicking markers. Even setZIndex for different layers still not work.

Click two points to create a path. Press ESC to complete.
Use SHIFT-click to delete either point leaving a single point remaining with distance = 0.
Drag this point to a new location
Use CTRL-click on point to resume building path.
Add a new point and press ESC to complete.
Note that there is a line drawn between the two points but also to the original location of the origin point.

Hi @ppete2 First off, great tool, thanks much for your work!

I just integrated this great tool in a vue-based project ... anyway, just noticed that calcAngle and distanceSegment are not declared thus causing runtime errors. Simple fix in a PR coming up shortly.

I implemented this library inside my project but it doesn't draw lines as arcs but as straight lines.
Here is screenshot: https://i.imgur.com/LNrwGqQ.jpg
I am not sure where to start debugging this?

This good for my map viewer, but I need to control without keyboard, from touchscreen only.
Is it possible to add, for example, a double-touch to add/remove point and stop/continue drawing?

We are developing a software and it will be use with different languages, and the tooltip has a static label for "in" "out" for example.

you left es6 arrow function in your code, that break my build process in my project
in Leaflet.PolylineMeasure.js in line 841

need to change from:
self._arrArrows[e.target.cntLine].forEach(element => { self._arrArrowsCurrentline.push(element); });

to:
self._arrArrows[e.target.cntLine].forEach(function (element) { self._arrArrowsCurrentline.push(element); });

Please move the units of measure (km, m, ml, etc) in the options. Like bindTooltipText, measureControlTitleOn, etc. I need this for translate plugin to other languages.

Unsure if this is possible but I tried drawing my own polylines and dashArray doesn't seem to be doing the trick

click on "Clear measurments" button, (without draw anything), throws an exception.

can see it in the official example page:
https://ppete2.github.io/Leaflet.PolylineMeasure/demo1.html

just click on "Clear measurments" button, (without draw anything)
and you will get the exception in your console:

Uncaught TypeError: Cannot read property 'finalize' of undefined
at e._finishPath (Leaflet.PolylineMeasure.js:760)
at e._clearAllMeasurements (Leaflet.PolylineMeasure.js:417)
at HTMLAnchorElement.r (DomEvent.js:81)

Please add package.json file into your project

Steps:

• open any of three examples
• start drawing measurement path
• press ESC key
• see the error in the console

Leaflet.PolylineMeasure.js:829 Uncaught TypeError: Cannot read property 'ctrlKey' of undefined
    at e._finishOrRestartPath (Leaflet.PolylineMeasure.js:829)
    at e._onKeyDown (Leaflet.PolylineMeasure.js:473)
    at HTMLDocument.r (leaflet.js:5)
_finishOrRestartPath @ Leaflet.PolylineMeasure.js:829
_onKeyDown @ Leaflet.PolylineMeasure.js:473
r @ leaflet.js:5

I would need the ability to display the bearing values in gradian unit, so would love to see a bearingUnit option to PolylineMeasure init method.

Hello,
First just wanted to say that your plugin is awesome! It fills all my needs, especially nautical miles measures.

I am having an issue and at the moment not sure whether its due to an error on my part. Here is how to reproduce it:

1. register a map mouse move listener:

map.on('mousemove', function(e){console.log('mouse move: '+e.latlng.lat+' '+e.latlng.lng)});

This works as expected and the mouse move events are shown in the console.

2. Create a polyline measure. Works awesome.

3. Select the tip of the polyline measure and move it to another location. You will notice that the mouse move events are no longer propagated in the console.

This is an issue for me because I use those events to display the current pointer lat/lng on the map.

Any workarounds to this issue would be greeatly appreciated! If I could stop the user from actually moving the polyline measure, that would be also fine, as long as I don't lose the mouse move events

Edit:
The problem seems to happen at the end of the _dragCircle method:

self._map.on ('mouseup', function () { 
                    self._resetPathVariables();
                    self._map.off ('mousemove');
                    self._map.dragging.enable();
                    self._map.on ('mousemove', self._mouseMove, self);
                    self._map.off ('mouseup');
                });

Thanks!

I've tried to use this in AngularJs.

I've added

"dependencies": {
    "leaflet.polylinemeasure": "^1.0.0"
 }

to the package,json and installed it using npm install.

But if i want to use it it returns an TypeError. L.control.polylineMeasure is not a function

PolylineMeasure doesn't work when it's included on two or more maps on the same HTML page. Example:

http://tile.opengeofiction.net/util/polyline_measure.html

If you click on the measure control in the left map, the right one gets activated. It worked correctly in previous versions, and the current behavior seems to have been introduced in commit 30fa45 (rework state management).

The drawArrow function assumes that arcpoints is 100, placing the arrow at points 48 and 49 in the array:

   _drawArrow: function (arcLine) {
            var P48 = arcLine[48];
            var P49 = arcLine[49];
            ...
        },

This fix worked for me:

        _drawArrow: function (arcLine) {
            var midpoint = Math.round(arcLine.length/2);
            var P48 = arcLine[midpoint-1];
            var P49 = arcLine[midpoint];
            ...
        },

delete

Installed dependencies:

• [email protected]
• [email protected]

By default in config option clearMeasurementsOnStop is set to true. When you're setting one or more point (start drawing) and then you want to toggle the measure control, you'll get the error:

ERROR TypeError: Cannot read property 'originalEvent' of undefined
    at NewClass._finishOrRestartPath (Leaflet.PolylineMeasure.js:829)
    at NewClass._clearAllMeasurements (Leaflet.PolylineMeasure.js:428)
    at NewClass._toggleMeasure (Leaflet.PolylineMeasure.js:414)
    at HTMLAnchorElement.handler (leaflet-src.js:2280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)

In your demo [email protected] is used and if I install it, everything works well.
In #38 you told that this error has already been solved, but the latest available version has this bug.

UPD In demo you're using files from repo, it seems to me that they are newer than [email protected] and didn't published to npm.

UPD2
changing in package.json from
"leaflet.polylinemeasure": "^2.0.0"
to
"leaflet.polylinemeasure": "git+https://github.com/ppete2/Leaflet.PolylineMeasure.git#master"
helped to install latest unpublished to npm version of this package.

@ppete2, can you publish this version as 2.1.0 for example to npm?

I tried it on mobile devices. You cannot reach the icon to stop the function.

https://github.com/ppete2/Leaflet.PolylineMeasure/blob/master/Leaflet.PolylineMeasure.js#L274
https://github.com/ppete2/Leaflet.PolylineMeasure/blob/master/Leaflet.PolylineMeasure.js#L292

Because of this, it is impossible to run in IE (11 in my case) without the polyfill

current options code:

...
unitControlTitle: {             
     text: 'Change Units',
     metres: 'meters',
     kilometres: 'kilometers',
     feet: 'feet',
     landmiles: 'miles'
},
     unitControlLabel: {            
     metres: 'm',
     kilometres: 'km',
     feet: 'ft',
     landmiles: 'mi'
}

That's the current code I'm using and when toggling the units I get the following options:

• m
• mi
• undefined

Looks like the numbers actually update on the measured line label itself but it seems there are only 3 options (km and ft are combined as 'undefined' , I'm guessing.)

The units in the popup and the selected units also seem to be desynced.
I have a line and it's showing the following:

Unit Selected | Measurement Output

mi | 742 mi
undefined | 645 undefined
m | 1194 km

Actions by Esc key and Alt-Click not work for me.
Ctrl-Click are work.

Firefox 62.0.3

Esc:
ReferenceError: resumeFirstpointFlag is not defined[Learn More] Leaflet.PolylineMeasure.js:516:1

Alt-Click:
silently

Hi,
Is it possible to have PolylineMeasure commands in external buttons (not inside map like samples) ?

When you have already drawn polyline, you can delete any points of it. But when you have the last one, you can't delete it and you get the error in console:

Uncaught TypeError: Cannot read property 'setStyle' of undefined
    at e._dragCircle (Leaflet.PolylineMeasure.js:1206)
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)

Reproduced at any currently available demos.

Hello,
it would be nice to have the possibility to delete a point or to add an additional one.

Best regards

You draw the polyline and then hover any point of it not exiting out of drawing mode and you see tooltip with message "Press SHIFT-key and click to delete the point". But if you click it nothing happens and you'll get an error at console:

Uncaught TypeError: Cannot read property 'circleCoords' of undefined
    at e._dragCircle (Leaflet.PolylineMeasure.js:1195)
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)

Reproduced at any currently available demos.

when add measure point, it will under Marker if position is same, so I can't double click the point to end it.

it seems Marker's z-index is much higher than currentCircle, how can I make measure front

Hi, updated measure dont work if leaflet map has canvas as a renderer:
var map = new L.Map('map', { renderer: L.canvas() });

When the line is short the arrow displays above labels.

Could not create intermidiate point with ctrl-click.

hello,I want set some data when opened ?

When I close tool and reopen it, I can't edit previously made measurements.

Leaflet measure doesn't work on Internet Explorer 11
It seems IE doesn't recognize the '=>' js syntax.

Since it's only used one time in PolylineMeasure, it may be corrected by replacing :

With Leaflet 1.3.4 throws a deprecation warning with L.MixinEvents:

Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead

The 'bindTooltip' Pop-up has a static string, so there's no way to change it.

Is there any chance you could publish this on npm? It seems like you have a package.json file but I get a 404 when trying to install leaflet.polylinemeasure.

If i click on the some node polyline by drawing, i have exceptions:
Uncaught TypeError: Cannot read property 'next' of undefined
Uncaught TypeError: Cannot read property 'min' of undefined
Uncaught TypeError: Cannot read property 'lat' of undefined
After that, the work with map goes wrong: https://ppete2.github.io/Leaflet.PolylineMeasure/demo_metric.html

After I loaded the Baidu map with the leaflet, I can't stop using double click..What happened?

This has been resolved is the version of the css.

How can the display bar be stacked horizontally, instead of the default vertical?

Well, ideally without changing the native leaflet set-up:

.leaflet-bar a {
	display: inline-block;
	float: none;
}

Thank You

Hello,

Just starting using your this nice plugin.

I would like to use the measurements infos (points position, bearings & distance) for later use.
Is there any events I can subscribe to, or any internal object I can observe to get these infos ?

Thx

Hi!

There is a syntax error on line 770 when testing in Internet Explorer:

lineCoords.splice ((circleNr-1)*(arcpoints-1), arcpoints, ...newLineSegment1);

I don't think the spread operator (...) is widely supported.

i'm using stenciljs and add your plugin, but then it gave me an errors when i try to use it.
the errors related to variables that was not defined.

Uncaught ReferenceError: tooltipStart is not defined
Uncaught TypeError: self._currentLine.points.last is not a function

it seems that there are missing var before the issued variables that the console tell me about them.

Hey! I'm using the plugin with AngluarJS and it's works just fine except this.
After drawing a path, I'm trying to drag one of the end-path circles. Map freezes and i see the following error in the console.
Uncaught TypeError: self._arrArrows[lineNr][circleNr].removeFrom is not a function

Any ideas what could be wrong?

Thanks in advance.

If you click the measurement button when you select the next reference point when measuring the distance, the button will take the original view, but the measurement mode will not disappear.

Try to start the measurement and make another click on the measurement button for this effect.

Hi,
How to hide the polylineMeasure control?
Thanks