@arunawalpola/leaflet.polylinemeasure 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/Leaflet.PolylineMeasure.css +17 -16
  2. package/Leaflet.PolylineMeasure.js +491 -511
  3. package/package.json +1 -1
package/Leaflet.PolylineMeasure.js CHANGED
@@ -1,8 +1,7 @@
1
1
  /*********************************************************
2
2
  ** **
3
3
  ** Leaflet Plugin "Leaflet.PolylineMeasure" **
4
- ** File "Leaflet.PolylineMeasure.js" **
5
- ** Date: 2023-11-07 **
4
+ ** Version: 2019-11-15 **
6
5
  ** **
7
6
  *********************************************************/
8
7
 
@@ -24,7 +23,6 @@
24
23
  }(function (L) {
25
24
  var _measureControlId = 'polyline-measure-control';
26
25
  var _unicodeClass = 'polyline-measure-unicode-icon';
27
- var isMacOS = navigator.platform === 'MacIntel';
28
26
 
29
27
  /**
30
28
  * Polyline Measure class
@@ -43,19 +41,13 @@
43
41
  */
44
42
  position: 'topleft',
45
43
  /**
46
- * Default unit the distances are displayed in. Possible values are: 'kilometres', 'landmiles', 'nauticalmiles'
44
+ * Which units the distances are displayed in. Possible values are: 'metres', 'landmiles', 'nauticalmiles'
47
45
  * @type {String}
48
46
  * @default
49
47
  */
50
- unit: 'kilometres',
48
+ unit: 'metres',
51
49
  /**
52
- * Use subunits (metres/feet) in tooltips in case of distances less then 1 kilometre/landmile
53
- * @type {Boolean}
54
- * @default
55
- */
56
- useSubunits: true,
57
- /**
58
- * Clear all measurements when Measure Control is switched off
50
+ * Clear the measurements on stop
59
51
  * @type {Boolean}
60
52
  * @default
61
53
  */
@@ -66,11 +58,11 @@
66
58
  * @default
67
59
  */
68
60
  showBearings: false,
69
- /**
70
- * Text for the bearing In
71
- * @type {String}
72
- * @default
73
- */
61
+ /**
62
+ * Text for the bearing In
63
+ * @type {String}
64
+ * @default
65
+ */
74
66
  bearingTextIn: 'In',
75
67
  /**
76
68
  * Text for the bearing Out
@@ -78,16 +70,16 @@
78
70
  * @default
79
71
  */
80
72
  bearingTextOut: 'Out',
81
- /**
82
- * Text for last point's tooltip
83
- * @type {String}
84
- * @default
85
- */
73
+ /**
74
+ * Text for last point's tooltip
75
+ * @type {String}
76
+ * @default
77
+ */
86
78
  tooltipTextFinish: 'Click to <b>finish line</b><br>',
87
79
  tooltipTextDelete: 'Press SHIFT-key and click to <b>delete point</b>',
88
80
  tooltipTextMove: 'Click and drag to <b>move point</b><br>',
89
- tooltipTextResume: '<br>Press ' + (isMacOS ? '⌘' : 'CTRL-key') + ' and click to <b>resume line</b>',
90
- tooltipTextAdd: 'Press ' + (isMacOS ? '⌘' : 'CTRL-key') + ' and click to <b>add point</b>',
81
+ tooltipTextResume: '<br>Press CTRL-key and click to <b>resume line</b>',
82
+ tooltipTextAdd: 'Press CTRL-key and click to <b>add point</b>',
91
83
 
92
84
  /**
93
85
  * Title for the control going to be switched on
@@ -144,21 +136,21 @@
144
136
  */
145
137
  showUnitControl: false,
146
138
  /**
147
- * The measurement units that can be cycled through by using the Unit Control button
148
- * @type {Array}
139
+ * Keep same unit in tooltips in case of distance less then 1 km/mi/nm
140
+ * @type {Boolean}
149
141
  * @default
150
142
  */
151
- unitControlUnits: ["kilometres" , "landmiles", "nauticalmiles"],
143
+ distanceShowSameUnit: false,
152
144
  /**
153
145
  * Title texts to show on the Unit Control button
154
146
  * @type {Object}
155
147
  * @default
156
148
  */
157
149
  unitControlTitle: {
158
- text: 'Change Units',
159
- kilometres: 'kilometres',
160
- landmiles: 'land miles',
161
- nauticalmiles: 'nautical miles'
150
+ text: 'Change Units',
151
+ metres: 'metres',
152
+ landmiles: 'land miles',
153
+ nauticalmiles: 'nautical miles'
162
154
  },
163
155
  /**
164
156
  * Unit symbols to show in the Unit Control button and measurement labels
@@ -166,19 +158,12 @@
166
158
  * @default
167
159
  */
168
160
  unitControlLabel: {
169
- metres: 'm',
170
- kilometres: 'km',
171
- feet: 'ft',
172
- landmiles: 'mi',
173
- nauticalmiles: 'nm'
161
+ metres: 'm',
162
+ kilometres: 'km',
163
+ feet: 'ft',
164
+ landmiles: 'mi',
165
+ nauticalmiles: 'nm'
174
166
  },
175
- /**
176
- * Classes to apply to the Unit control
177
- * @type {Array}
178
- * @default
179
- */
180
- unitControlClasses: [],
181
-
182
167
  /**
183
168
  * Styling settings for the temporary dashed rubberline
184
169
  * @type {Object}
@@ -215,18 +200,6 @@
215
200
  */
216
201
  weight: 2
217
202
  },
218
- /**
219
- * Styling of the midway arrow
220
- * @type {Object}
221
- */
222
- arrow: {
223
- /**
224
- * Color of the arrow
225
- * @type {String}
226
- * @default
227
- */
228
- color: '#000'
229
- },
230
203
  /**
231
204
  * Style settings for circle marker indicating the starting point of the polyline
232
205
  * @type {Object}
@@ -373,7 +346,7 @@
373
346
  }
374
347
  },
375
348
 
376
- _arcpoints: 99, // 99 points = 98 line segments. lower value to make arc less accurate or increase value to make it more accurate.
349
+ _arcpoints: 100, // 100 points = 99 line segments. lower value to make arc less accurate or increase value to make it more accurate.
377
350
  _circleNr: -1,
378
351
  _lineNr: -1,
379
352
 
@@ -392,10 +365,10 @@
392
365
  var anchor = document.createElement('a');
393
366
  anchor.innerHTML = label;
394
367
  anchor.setAttribute('title', title);
395
- classesToAdd.forEach(function(c) {
368
+ classesToAdd.forEach(function (c) {
396
369
  anchor.classList.add(c);
397
370
  });
398
- L.DomEvent.on (anchor, 'click', fn, context);
371
+ L.DomEvent.on(anchor, 'click', fn, context);
399
372
  container.appendChild(anchor);
400
373
  return anchor;
401
374
  },
@@ -405,11 +378,11 @@
405
378
  * @param {Object} map Map object
406
379
  * @returns {Element} Containing element
407
380
  */
408
- onAdd: function(map) {
381
+ onAdd: function (map) {
409
382
  var self = this
410
383
  // needed to avoid creating points by mouseclick during dragging the map
411
- map.on('movestart ', function() {
412
- self._mapdragging = true
384
+ map.on('movestart ', function () {
385
+ self._mapdragging = true
413
386
  })
414
387
  this._container = document.createElement('div');
415
388
  this._container.classList.add('leaflet-bar');
@@ -423,7 +396,7 @@
423
396
 
424
397
  // initialize state
425
398
  this._arrPolylines = [];
426
- this._measureControl = this._createControl (label, title, classes, this._container, this._toggleMeasure, this);
399
+ this._measureControl = this._createControl(label, title, classes, this._container, this._toggleMeasure, this);
427
400
  this._defaultControlBgColor = this._measureControl.style.backgroundColor;
428
401
  this._measureControl.setAttribute('id', _measureControlId);
429
402
  if (this.options.showClearControl) {
@@ -433,18 +406,23 @@
433
406
  if (label.indexOf('&') != -1) {
434
407
  classes.push(_unicodeClass);
435
408
  }
436
- this._clearMeasureControl = this._createControl (label, title, classes, this._container, this._clearAllMeasurements, this);
409
+ this._clearMeasureControl = this._createControl(label, title, classes, this._container, this._clearAllMeasurements, this);
437
410
  this._clearMeasureControl.classList.add('polyline-measure-clearControl')
438
411
  }
439
-
440
- // There is no point in using the unitControl if there are no units to choose from.
441
- if (this.options.showUnitControl && this.options.unitControlUnits.length > 1) {
442
- var label = this.options.unitControlLabel[this.options.unit];
443
- var title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle[this.options.unit] + "]";
444
-
445
- var classes = this.options.unitControlClasses;
446
- this._unitControl = this._createControl (label, title, classes, this._container, this._changeUnit, this);
447
- this._unitControl.setAttribute ('id', 'unitControlId');
412
+ if (this.options.showUnitControl) {
413
+ if (this.options.unit == "metres") {
414
+ var label = this.options.unitControlLabel.metres;
415
+ var title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.metres + "]";
416
+ } else if (this.options.unit == "landmiles") {
417
+ var label = this.options.unitControlLabel.landmiles;
418
+ var title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.landmiles + "]";
419
+ } else {
420
+ var label = this.options.unitControlLabel.nauticalmiles;
421
+ var title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.nauticalmiles + "]";
422
+ }
423
+ var classes = [];
424
+ this._unitControl = this._createControl(label, title, classes, this._container, this._changeUnit, this);
425
+ this._unitControl.setAttribute('id', 'unitControlId');
448
426
  }
449
427
  return this._container;
450
428
  },
@@ -464,14 +442,14 @@
464
442
  if (typeof this._polylineTargets !== 'undefined') {
465
443
  this._map._targets = this._polylineTargets;
466
444
  } else {
467
- this._map._targets ={};
445
+ this._map._targets = {};
468
446
  }
469
447
  },
470
448
 
471
449
  // on disabling the measure add-on, save Polyline-measure events and enable the former Leaflet-own events again
472
450
  _savePolylineEvents: function () {
473
- this._polylineTargets = this._map._targets;
474
- this._map._targets = this._nonpolylineTargets;
451
+ this._polylineTargets = this._map._targets;
452
+ this._map._targets = this._nonpolylineTargets;
475
453
  },
476
454
 
477
455
  /**
@@ -482,8 +460,8 @@
482
460
  this._measuring = !this._measuring;
483
461
  if (this._measuring) { // if measuring is going to be switched on
484
462
  this._mapdragging = false;
485
- this._saveNonpolylineEvents ();
486
- this._measureControl.classList.add ('polyline-measure-controlOnBgColor');
463
+ this._saveNonpolylineEvents();
464
+ this._measureControl.classList.add('polyline-measure-controlOnBgColor');
487
465
  this._measureControl.style.backgroundColor = this.options.backgroundColor;
488
466
  this._measureControl.title = this.options.measureControlTitleOff;
489
467
  this._oldCursor = this._map._container.style.cursor; // save former cursor type
@@ -494,27 +472,27 @@
494
472
  if (!this._layerPaint) {
495
473
  this._layerPaint = L.layerGroup().addTo(this._map);
496
474
  }
497
- this._map.on ('mousemove', this._mouseMove, this); // enable listing to 'mousemove', 'click', 'keydown' events
498
- this._map.on ('click', this._mouseClick, this);
499
- L.DomEvent.on (document, 'keydown', this._onKeyDown, this);
475
+ this._map.on('mousemove', this._mouseMove, this); // enable listing to 'mousemove', 'click', 'keydown' events
476
+ this._map.on('click', this._mouseClick, this);
477
+ L.DomEvent.on(document, 'keydown', this._onKeyDown, this);
500
478
  this._resetPathVariables();
501
479
  } else { // if measuring is going to be switched off
502
- this._savePolylineEvents ();
503
- this._measureControl.classList.remove ('polyline-measure-controlOnBgColor');
480
+ this._savePolylineEvents();
481
+ this._measureControl.classList.remove('polyline-measure-controlOnBgColor');
504
482
  this._measureControl.style.backgroundColor = this._defaultControlBgColor;
505
483
  this._measureControl.title = this.options.measureControlTitleOn;
506
484
  this._map._container.style.cursor = this._oldCursor;
507
- this._map.off ('mousemove', this._mouseMove, this);
508
- this._map.off ('click', this._mouseClick, this);
509
- this._map.off ('mousemove', this._resumeFirstpointMousemove, this);
510
- this._map.off ('click', this._resumeFirstpointClick, this);
511
- this._map.off ('mousemove', this._dragCircleMousemove, this);
512
- this._map.off ('mouseup', this._dragCircleMouseup, this);
513
- L.DomEvent.off (document, 'keydown', this._onKeyDown, this);
514
- if(this._doubleClickZoom) {
485
+ this._map.off('mousemove', this._mouseMove, this);
486
+ this._map.off('click', this._mouseClick, this);
487
+ this._map.off('mousemove', this._resumeFirstpointMousemove, this);
488
+ this._map.off('click', this._resumeFirstpointClick, this);
489
+ this._map.off('mousemove', this._dragCircleMousemove, this);
490
+ this._map.off('mouseup', this._dragCircleMouseup, this);
491
+ L.DomEvent.off(document, 'keydown', this._onKeyDown, this);
492
+ if (this._doubleClickZoom) {
515
493
  this._map.doubleClickZoom.enable();
516
494
  }
517
- if(this.options.clearMeasurementsOnStop && this._layerPaint) {
495
+ if (this.options.clearMeasurementsOnStop && this._layerPaint) {
518
496
  this._clearAllMeasurements();
519
497
  }
520
498
  // to remove temp. Line if line at the moment is being drawn and not finished while clicking the control
@@ -523,15 +501,15 @@
523
501
  }
524
502
  }
525
503
  // allow easy to connect the measure control to the app, f.e. to disable the selection on the map when the measurement is turned on
526
- this._map.fire('polylinemeasure:toggle', { status: this._measuring });
504
+ this._map.fire('polylinemeasure:toggle', { sttus: this._measuring });
527
505
  },
528
506
 
529
507
  /**
530
508
  * Clear all measurements from the map
531
509
  */
532
- _clearAllMeasurements: function() {
510
+ _clearAllMeasurements: function () {
533
511
  if ((this._cntCircle !== undefined) && (this._cntCircle !== 0)) {
534
- this._finishPolylinePath();
512
+ this._finishPolylinePath();
535
513
  }
536
514
  if (this._layerPaint) {
537
515
  this._layerPaint.clearLayers();
@@ -540,30 +518,29 @@
540
518
  this._map.fire('polylinemeasure:clear');
541
519
  },
542
520
 
543
- _changeUnit: function() {
544
- // Retrieve the index of the next available unit of measurement.
545
- let indexCurrUnit = this.options.unitControlUnits.indexOf(this.options.unit);
546
- let indexNextUnit = (indexCurrUnit+1)%this.options.unitControlUnits.length;
547
-
548
- // Update the unit of measurement.
549
- this.options.unit = this.options.unitControlUnits[indexNextUnit];
550
- this._unitControl.innerHTML = this.options.unitControlLabel[this.options.unit];
551
- this._unitControl.title = this.options.unitControlTitle.text +" [" + this.options.unitControlTitle[this.options.unit] + "]";
552
-
553
- if (this._currentLine) {
554
- this._computeDistance(this._currentLine);
521
+ _changeUnit: function () {
522
+ if (this.options.unit == "metres") {
523
+ this.options.unit = "landmiles";
524
+ document.getElementById("unitControlId").innerHTML = this.options.unitControlLabel.landmiles;
525
+ this._unitControl.title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.landmiles + "]";
526
+ } else if (this.options.unit == "landmiles") {
527
+ this.options.unit = "nauticalmiles";
528
+ document.getElementById("unitControlId").innerHTML = this.options.unitControlLabel.nauticalmiles;
529
+ this._unitControl.title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.nauticalmiles + "]";
530
+ } else {
531
+ this.options.unit = "metres";
532
+ document.getElementById("unitControlId").innerHTML = this.options.unitControlLabel.metres;
533
+ this._unitControl.title = this.options.unitControlTitle.text + " [" + this.options.unitControlTitle.metres + "]";
555
534
  }
556
- this._arrPolylines.map (this._computeDistance.bind(this));
557
- },
558
-
559
- _computeDistance: function(line) {
560
- var totalDistance = 0;
561
- line.circleCoords.map (function(point, point_index) {
562
- if (point_index >= 1) {
563
- var distance = line.circleCoords [point_index - 1].distanceTo (line.circleCoords [point_index]);
564
- totalDistance += distance;
565
- this._updateTooltip (line.tooltips [point_index], line.tooltips [point_index - 1], totalDistance, distance, line.circleCoords [point_index - 1], line.circleCoords [point_index]);
566
- }
535
+ this._arrPolylines.map(function (line) {
536
+ var totalDistance = 0;
537
+ line.circleCoords.map(function (point, point_index) {
538
+ if (point_index >= 1) {
539
+ var distance = line.circleCoords[point_index - 1].distanceTo(line.circleCoords[point_index]);
540
+ totalDistance += distance;
541
+ this._updateTooltip(line.tooltips[point_index], line.tooltips[point_index - 1], totalDistance, distance, line.circleCoords[point_index - 1], line.circleCoords[point_index]);
542
+ }
543
+ }.bind(this));
567
544
  }.bind(this));
568
545
  },
569
546
 
@@ -579,30 +556,30 @@
579
556
  if (this._resumeFirstpointFlag === true) {
580
557
  this._resumeFirstpointFlag = false;
581
558
  var lineNr = this._lineNr;
582
- this._map.off ('mousemove', this._resumeFirstpointMousemove, this);
583
- this._map.off ('click', this._resumeFirstpointClick, this);
584
- this._layerPaint.removeLayer (this._rubberlinePath2);
585
- this._layerPaint.removeLayer (this._tooltipNew);
586
- this._arrPolylines[lineNr].circleMarkers [0].setStyle (this.options.startCircle);
559
+ this._map.off('mousemove', this._resumeFirstpointMousemove, this);
560
+ this._map.off('click', this._resumeFirstpointClick, this);
561
+ this._layerPaint.removeLayer(this._rubberlinePath2);
562
+ this._layerPaint.removeLayer(this._tooltipNew);
563
+ this._arrPolylines[lineNr].circleMarkers[0].setStyle(this.options.startCircle);
587
564
  var text = '';
588
565
  var totalDistance = 0;
589
566
  if (this.options.showBearings === true) {
590
- text = this.options.bearingTextIn+':---°<br>'+this.options.bearingTextOut+':---°';
567
+ text = this.options.bearingTextIn + ':---°<br>' + this.options.bearingTextOut + ':---°';
591
568
  }
592
569
  text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
593
570
  text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
594
- this._arrPolylines[lineNr].tooltips [0]._icon.innerHTML = text;
595
- this._arrPolylines[lineNr].tooltips.map (function (item, index) {
571
+ this._arrPolylines[lineNr].tooltips[0]._icon.innerHTML = text;
572
+ this._arrPolylines[lineNr].tooltips.map(function (item, index) {
596
573
  if (index >= 1) {
597
- var distance = this._arrPolylines[lineNr].circleCoords[index-1].distanceTo (this._arrPolylines[lineNr].circleCoords[index]);
574
+ var distance = this._arrPolylines[lineNr].circleCoords[index - 1].distanceTo(this._arrPolylines[lineNr].circleCoords[index]);
598
575
  var lastCircleCoords = this._arrPolylines[lineNr].circleCoords[index - 1];
599
576
  var mouseCoords = this._arrPolylines[lineNr].circleCoords[index];
600
577
  totalDistance += distance;
601
- var prevTooltip = this._arrPolylines[lineNr].tooltips[index-1]
602
- this._updateTooltip (item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
578
+ var prevTooltip = this._arrPolylines[lineNr].tooltips[index - 1]
579
+ this._updateTooltip(item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
603
580
  }
604
- }.bind (this));
605
- this._map.on ('mousemove', this._mouseMove, this);
581
+ }.bind(this));
582
+ this._map.on('mousemove', this._mouseMove, this);
606
583
  return
607
584
  }
608
585
  if (!this._currentLine) { // if NOT drawing a line, ESC will directly switch of measuring
@@ -625,27 +602,32 @@
625
602
  if (this.options.unit === 'nauticalmiles') {
626
603
  unit = this.options.unitControlLabel.nauticalmiles;
627
604
  if (dist >= 185200) {
628
- dist = (dist/1852).toFixed(0);
605
+ dist = (dist / 1852).toFixed(0);
629
606
  } else if (dist >= 18520) {
630
- dist = (dist/1852).toFixed(1);
607
+ dist = (dist / 1852).toFixed(1);
631
608
  } else if (dist >= 1852) {
632
- dist = (dist/1852).toFixed(2);
633
- } else {
634
- dist = (dist/1852).toFixed(3); // there's no subunit of Nautical Miles for horizontal length measurements. "Cable length" (1/10th of 1 nm) is rarely used
609
+ dist = (dist / 1852).toFixed(2);
610
+ } else {
611
+ if (this.options.distanceShowSameUnit) {
612
+ dist = (dist / 1852).toFixed(3);
613
+ } else {
614
+ dist = (dist / 0.3048).toFixed(0);
615
+ unit = this.options.unitControlLabel.feet;
616
+ }
635
617
  }
636
618
  } else if (this.options.unit === 'landmiles') {
637
619
  unit = this.options.unitControlLabel.landmiles;
638
620
  if (dist >= 160934.4) {
639
- dist = (dist/1609.344).toFixed(0);
621
+ dist = (dist / 1609.344).toFixed(0);
640
622
  } else if (dist >= 16093.44) {
641
- dist = (dist/1609.344).toFixed(1);
623
+ dist = (dist / 1609.344).toFixed(1);
642
624
  } else if (dist >= 1609.344) {
643
- dist = (dist/1609.344).toFixed(2);
625
+ dist = (dist / 1609.344).toFixed(2);
644
626
  } else {
645
- if (!this.options.useSubunits) {
646
- dist = (dist/1609.344).toFixed(4);
627
+ if (this.options.distanceShowSameUnit) {
628
+ dist = (dist / 1609.344).toFixed(3);
647
629
  } else {
648
- dist = (dist/0.3048).toFixed(0);
630
+ dist = (dist / 0.3048).toFixed(0);
649
631
  unit = this.options.unitControlLabel.feet;
650
632
  }
651
633
  }
@@ -653,21 +635,44 @@
653
635
  else {
654
636
  unit = this.options.unitControlLabel.kilometres;
655
637
  if (dist >= 100000) {
656
- dist = (dist/1000).toFixed(0);
638
+ dist = (dist / 1000).toFixed(0);
657
639
  } else if (dist >= 10000) {
658
- dist = (dist/1000).toFixed(1);
640
+ dist = (dist / 1000).toFixed(1);
659
641
  } else if (dist >= 1000) {
660
- dist = (dist/1000).toFixed(2);
642
+ dist = (dist / 1000).toFixed(2);
661
643
  } else {
662
- if (!this.options.useSubunits) {
663
- dist = (dist/1000).toFixed(4);
644
+ if (this.options.distanceShowSameUnit) {
645
+ dist = (dist / 1000).toFixed(3);
664
646
  } else {
665
- dist = (dist).toFixed(1);
647
+ dist = (dist).toFixed(0);
666
648
  unit = this.options.unitControlLabel.metres;
667
649
  }
668
650
  }
669
651
  }
670
- return {value:dist, unit:unit};
652
+ return { value: dist, unit: unit };
653
+ },
654
+
655
+ /**
656
+ * Returns a formatted GPS coordinate string for the given distance segment.
657
+ * This method is used to display the GPS coordinates in the tooltip.
658
+ * @param {Number} distance Distance between two points (in meters)
659
+ * @returns {{value: string}} Object with formatted GPS coordinate string
660
+ * @private
661
+ */
662
+ /**
663
+ * Returns a formatted GPS coordinate string for the given mouse position (latlng).
664
+ * @param {Object} latlng The mouse position (with lat, lng)
665
+ * @returns {{value: string}} Object with formatted GPS coordinate string
666
+ * @private
667
+ */
668
+ _getGPSCoordinates: function (latlng) {
669
+ if (!latlng || typeof latlng.lat !== 'number' || typeof latlng.lng !== 'number') {
670
+ return { value: '' };
671
+ }
672
+ var formatCoord = function (latlng) {
673
+ return latlng.lat.toFixed(5) + ', ' + latlng.lng.toFixed(5);
674
+ };
675
+ return { value: formatCoord(latlng) };
671
676
  },
672
677
 
673
678
  /**
@@ -676,8 +681,7 @@
676
681
  * @private
677
682
  */
678
683
  _polylineArc: function (_from, _to) {
679
-
680
- function _GCinterpolate (f) {
684
+ function _GCinterpolate(f) {
681
685
  var A = Math.sin((1 - f) * d) / Math.sin(d);
682
686
  var B = Math.sin(f * d) / Math.sin(d);
683
687
  var x = A * Math.cos(fromLat) * Math.cos(fromLng) + B * Math.cos(toLat) * Math.cos(toLng);
@@ -689,24 +693,24 @@
689
693
  var lngInterpol = 180 / Math.PI * Math.atan2(y, x);
690
694
  // don't split polyline if it crosses dateline ( -180° or +180°). Without the polyline would look like: +179° ==> +180° ==> -180° ==> -179°...
691
695
  // algo: if difference lngInterpol-from.lng is > 180° there's been an unwanted split from +180 to -180 cause an arc can never span >180°
692
- var diff = lngInterpol-fromLng*180/Math.PI;
696
+ var diff = lngInterpol - fromLng * 180 / Math.PI;
693
697
  function trunc(n) { return Math[n > 0 ? "floor" : "ceil"](n); } // alternatively we could use the new Math.trunc method, but Internet Explorer doesn't know it
694
698
  if (diff < 0) {
695
- lngInterpol = lngInterpol - trunc ((diff - 180)/ 360) * 360;
699
+ lngInterpol = lngInterpol - trunc((diff - 180) / 360) * 360;
696
700
  } else {
697
- lngInterpol = lngInterpol - trunc ((diff +180)/ 360) * 360;
701
+ lngInterpol = lngInterpol - trunc((diff + 180) / 360) * 360;
698
702
  }
699
703
  return [latInterpol, lngInterpol];
700
704
  }
701
705
 
702
- function _GCarc (npoints) {
706
+ function _GCarc(npoints) {
703
707
  var arrArcCoords = [];
704
- var delta = 1.0 / (npoints-1 );
708
+ var delta = 1.0 / (npoints - 1);
705
709
  // first point of Arc should NOT be returned
706
710
  for (var i = 0; i < npoints; i++) {
707
711
  var step = delta * i;
708
- var coordPair = _GCinterpolate (step);
709
- arrArcCoords.push (coordPair);
712
+ var coordPair = _GCinterpolate(step);
713
+ arrArcCoords.push(coordPair);
710
714
  }
711
715
  return arrArcCoords;
712
716
  }
@@ -715,11 +719,11 @@
715
719
  var fromLng = _from.lng;
716
720
  var toLat = _to.lat;
717
721
  var toLng = _to.lng;
718
- fromLat=fromLat * Math.PI / 180;
719
- fromLng=fromLng * Math.PI / 180;
720
- toLat=toLat * Math.PI / 180;
721
- toLng=toLng * Math.PI / 180;
722
- var d = 2.0 * Math.asin(Math.sqrt(Math.pow (Math.sin((fromLat - toLat) / 2.0), 2) + Math.cos(fromLat) * Math.cos(toLat) * Math.pow(Math.sin((fromLng - toLng) / 2.0), 2)));
722
+ fromLat = fromLat * Math.PI / 180;
723
+ fromLng = fromLng * Math.PI / 180;
724
+ toLat = toLat * Math.PI / 180;
725
+ toLng = toLng * Math.PI / 180;
726
+ var d = 2.0 * Math.asin(Math.sqrt(Math.pow(Math.sin((fromLat - toLat) / 2.0), 2) + Math.cos(fromLat) * Math.cos(toLat) * Math.pow(Math.sin((fromLng - toLng) / 2.0), 2)));
723
727
  var arrLatLngs;
724
728
  if (d === 0) {
725
729
  arrLatLngs = [[fromLat, fromLng]];
@@ -742,8 +746,8 @@
742
746
  var lat2 = p2.lat / 180 * Math.PI;
743
747
  var lng1 = p1.lng / 180 * Math.PI;
744
748
  var lng2 = p2.lng / 180 * Math.PI;
745
- var y = Math.sin(lng2-lng1) * Math.cos(lat2);
746
- var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(lng2-lng1);
749
+ var y = Math.sin(lng2 - lng1) * Math.cos(lat2);
750
+ var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1);
747
751
  if (direction === "inbound") {
748
752
  var brng = (Math.atan2(y, x) * 180 / Math.PI + 180).toFixed(0);
749
753
  } else {
@@ -752,60 +756,54 @@
752
756
  return (brng % 360);
753
757
  }
754
758
 
755
- var angleIn = calcAngle (mouseCoords, lastCircleCoords, "inbound");
756
- var angleOut = calcAngle (lastCircleCoords, mouseCoords, "outbound");
757
- var totalRound = this._getDistance (total);
758
- var differenceRound = this._getDistance (difference);
759
+ var angleIn = calcAngle(mouseCoords, lastCircleCoords, "inbound");
760
+ // var angleOut = calcAngle(lastCircleCoords, mouseCoords, "outbound");
761
+ // var totalRound = this._getDistance(total);
762
+ var differenceRound = this._getDistance(difference);
763
+ var gpsCoordinates = this._getGPSCoordinates(mouseCoords);
764
+
759
765
  var textCurrent = '';
760
- if (differenceRound.value > 0 ) {
766
+ if (differenceRound.value > 0) {
761
767
  if (this.options.showBearings === true) {
762
768
  //textCurrent = this.options.bearingTextIn + ': ' + angleIn + '°<br>'+this.options.bearingTextOut+':---°';
763
769
  textCurrent = this.options.bearingTextIn + '' + angleIn + '°';
764
770
  }
765
- textCurrent += '<div class="polyline-measure-tooltip-difference">+' + differenceRound.value + '&nbsp;' + differenceRound.unit + '</div>';
771
+ textCurrent += '<div class="polyline-measure-tooltip-difference">' + differenceRound.value + '&nbsp;' + differenceRound.unit + '</div>';
772
+ textCurrent += '<div class="polyline-measure-tooltip-gps">' + gpsCoordinates.value + '</div>';
766
773
  }
767
774
  //textCurrent += '<div class="polyline-measure-tooltip-total">' + totalRound.value + '&nbsp;' + totalRound.unit + '</div>';
775
+
768
776
  currentTooltip._icon.innerHTML = textCurrent;
769
777
  if ((this.options.showBearings === true) && (prevTooltip)) {
770
- // var textPrev = prevTooltip._icon.innerHTML;
771
- // var regExp = new RegExp(this.options.bearingTextOut + '.*\°');
772
- // var textReplace = textPrev.replace(regExp, this.options.bearingTextOut + ': ' + angleOut + "°");
773
- // prevTooltip._icon.innerHTML = textReplace;
778
+ // var textPrev = prevTooltip._icon.innerHTML;
779
+ // var regExp = new RegExp(this.options.bearingTextOut + '.*\°');
780
+ // var textReplace = textPrev.replace(regExp, this.options.bearingTextOut + ': ' + angleOut + "°");
781
+ // prevTooltip._icon.innerHTML = textReplace;
774
782
  prevTooltip._icon.innerHTML = '';
775
783
  }
776
784
  },
777
785
 
778
786
  _drawArrow: function (arcLine) {
779
- // center of Great-circle distance, NOT of the arc on a Mercator map! reason: a) to complicated b) map not always Mercator c) good optical feature to see where real center of distance is not the "virtual" warped arc center due to Mercator projection
780
- // differ between even and odd pointed Arcs. If even the arrow is in the center of the middle line-segment, if odd it is on the middle point
781
- var midpoint = Math.trunc(arcLine.length/2);
782
- if (arcLine.length % 2 == 0) {
783
- var P1 = arcLine[midpoint-1];
784
- var P2 = arcLine[midpoint];
785
- var diffLng12 = P2[1] - P1[1];
786
- var diffLat12 = P2[0] - P1[0];
787
- var center = [P1[0] + diffLat12/2, P1[1] + diffLng12/2];
788
- } else {
789
- var P1 = arcLine[midpoint-1];
790
- var P2 = arcLine[midpoint+1];
791
- var diffLng12 = P2[1] - P1[1];
792
- var diffLat12 = P2[0] - P1[0];
793
- var center = arcLine[midpoint];
794
- }
795
- // angle just an aprroximation, which could be somewhat off if Line runs near high latitudes. Use of *geographical coords* for line segment P1 to P2 is best method. Use of *Pixel coords* for just one arc segement P1 to P2 could create for short lines unexact rotation angles, and the use Use of Pixel coords between endpoints [0] to [98] (in case of 99-point-arc) results in even more rotation difference for high latitudes as with geogrpaphical coords-method
796
- var cssAngle = -Math.atan2(diffLat12, diffLng12)*57.29578 // convert radiant to degree as needed for use as CSS value; cssAngle is opposite to mathematical angle.
797
- var iconArrow = L.divIcon ({
787
+ var midpoint = Math.round(arcLine.length / 2);
788
+ var P1 = arcLine[midpoint - 1];
789
+ var P2 = arcLine[midpoint];
790
+ var diffLng12 = P2[1] - P1[1];
791
+ var diffLat12 = P2[0] - P1[0];
792
+ var center = [P1[0] + diffLat12 / 2, P1[1] + diffLng12 / 2]; // center of Great-circle distance, NOT of the arc on a Mercator map! reason: a) to complicated b) map not always Mercator c) good optical feature to see where real center of distance is not the "virtual" warped arc center due to Mercator projection
793
+ // angle just an aprroximation, which could be somewhat off if Line runs near high latitudes. Use of *geographical coords* for line segment P1 to P2 is best method. Use of *Pixel coords* for just one arc segement P1 to P2 could create for short lines unexact rotation angles, and the use Use of Pixel coords between endpoints [0] to [99] (in case of 100-point-arc) results in even more rotation difference for high latitudes as with geogrpaphical coords-method
794
+ var cssAngle = -Math.atan2(diffLat12, diffLng12) * 57.29578 // convert radiant to degree as needed for use as CSS value; cssAngle is opposite to mathematical angle.
795
+ var iconArrow = L.divIcon({
798
796
  className: "", // to avoid getting a default class with paddings and borders assigned by Leaflet
799
797
  iconSize: [16, 16],
800
798
  iconAnchor: [8, 8],
801
- // html : "<img src='iconArrow.png' style='background:green; height:100%; vertical-align:top; transform:rotate("+ cssAngle +"deg)'>" <<=== alternative method by the use of an image instead of a Unicode symbol.
802
- html : "<div style = 'color:" + this.options.arrow.color + "; font-size: 16px; line-height: 16px; vertical-align:top; transform: rotate("+ cssAngle +"deg)'>&#x27a4;</div>" // best results if iconSize = font-size = line-height and iconAnchor font-size/2 .both values needed to position symbol in center of L.divIcon for all font-sizes.
799
+ // html : "<img src='iconArrow.png' style='background:green; height:100%; vertical-align:top; transform:rotate("+ cssAngle +"deg)'>" <<=== alternative method by the use of an image instead of a Unicode symbol.
800
+ html: "<div style = 'font-size: 16px; line-height: 16px; color:" + this.options.fixedLine.color + "; vertical-align:top; transform: rotate(" + cssAngle + "deg)'>&#x27a4;</div>" // best results if iconSize = font-size = line-height and iconAnchor font-size/2 .both values needed to position symbol in center of L.divIcon for all font-sizes.
803
801
  });
804
- var newArrowMarker = L.marker (center, {icon: iconArrow, zIndexOffset:-50}).addTo(this._layerPaint); // zIndexOffset to draw arrows below tooltips
805
- // if (!this._currentLine){ // just bind tooltip if not drawing line anymore, cause following the instruction of tooltip is just possible when not drawing a line
806
- // newArrowMarker.bindTooltip (this.options.tooltipTextAdd, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
807
- // }
808
- // newArrowMarker.on ('click', this._clickedArrow, this);
802
+ var newArrowMarker = L.marker(center, { icon: iconArrow, zIndexOffset: -50 }).addTo(this._layerPaint); // zIndexOffset to draw arrows below tooltips
803
+ //if (!this._currentLine) { // just bind tooltip if not drawing line anymore, cause following the instruction of tooltip is just possible when not drawing a line
804
+ // newArrowMarker.bindTooltip(this.options.tooltipTextAdd, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
805
+ //}
806
+ //newArrowMarker.on('click', this._clickedArrow, this);
809
807
  return newArrowMarker;
810
808
  },
811
809
 
@@ -816,17 +814,17 @@
816
814
  */
817
815
  _mouseMove: function (e) {
818
816
  var mouseCoords = e.latlng;
819
- this._map.on ('click', this._mouseClick, this); // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
820
- if(!mouseCoords || !this._currentLine) {
817
+ this._map.on('click', this._mouseClick, this); // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
818
+ if (!mouseCoords || !this._currentLine) {
821
819
  return;
822
820
  }
823
821
  var lastCircleCoords = this._currentLine.circleCoords.last();
824
- this._rubberlinePath.setLatLngs (this._polylineArc (lastCircleCoords, mouseCoords));
822
+ this._rubberlinePath.setLatLngs(this._polylineArc(lastCircleCoords, mouseCoords));
825
823
  var currentTooltip = this._currentLine.tooltips.last();
826
- var prevTooltip = this._currentLine.tooltips.slice(-2,-1)[0];
827
- currentTooltip.setLatLng (mouseCoords);
828
- var distanceSegment = mouseCoords.distanceTo (lastCircleCoords);
829
- this._updateTooltip (currentTooltip, prevTooltip, this._currentLine.distance + distanceSegment, distanceSegment, lastCircleCoords, mouseCoords);
824
+ var prevTooltip = this._currentLine.tooltips.slice(-2, -1)[0];
825
+ currentTooltip.setLatLng(mouseCoords);
826
+ var distanceSegment = mouseCoords.distanceTo(lastCircleCoords);
827
+ this._updateTooltip(currentTooltip, prevTooltip, this._currentLine.distance + distanceSegment, distanceSegment, lastCircleCoords, mouseCoords);
830
828
  },
831
829
 
832
830
  _startLine: function (clickCoords) {
@@ -834,10 +832,10 @@
834
832
  className: 'polyline-measure-tooltip',
835
833
  iconAnchor: [-4, -4]
836
834
  });
837
- var last = function() {
835
+ var last = function () {
838
836
  return this.slice(-1)[0];
839
837
  };
840
- this._rubberlinePath = L.polyline ([], {
838
+ this._rubberlinePath = L.polyline([], {
841
839
  // Style of temporary, dashed line while moving the mouse
842
840
  color: this.options.tempLine.color,
843
841
  weight: this.options.tempLine.weight,
@@ -866,27 +864,26 @@
866
864
  // update style on previous marker
867
865
  var lastCircleMarker = this.circleMarkers.last();
868
866
  if (lastCircleMarker) {
869
- // Commented to remove tooltip for first marker
870
- // lastCircleMarker.bindTooltip (polylineState.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
871
- lastCircleMarker.off ('click', polylineState._finishPolylinePath, polylineState);
867
+ lastCircleMarker.bindTooltip(polylineState.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
868
+ lastCircleMarker.off('click', polylineState._finishPolylinePath, polylineState);
872
869
  if (this.circleMarkers.length === 1) {
873
- lastCircleMarker.setStyle (polylineState.options.startCircle);
870
+ lastCircleMarker.setStyle(polylineState.options.startCircle);
874
871
  } else {
875
- lastCircleMarker.setStyle (polylineState.options.intermedCircle);
872
+ lastCircleMarker.setStyle(polylineState.options.intermedCircle);
876
873
  }
877
874
  }
878
- var newCircleMarker = new L.CircleMarker (latlng, polylineState.options.currentCircle).addTo(polylineState._layerPaint);
879
- newCircleMarker.bindTooltip (polylineState.options.tooltipTextFinish + polylineState.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
875
+ var newCircleMarker = new L.CircleMarker(latlng, polylineState.options.currentCircle).addTo(polylineState._layerPaint);
876
+ newCircleMarker.bindTooltip(polylineState.options.tooltipTextFinish + polylineState.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
880
877
  newCircleMarker.cntLine = polylineState._currentLine.id;
881
878
  newCircleMarker.cntCircle = polylineState._cntCircle;
882
879
  polylineState._cntCircle++;
883
- newCircleMarker.on ('mousedown', polylineState._dragCircle, polylineState);
884
- newCircleMarker.on ('click', polylineState._finishPolylinePath, polylineState);
885
- this.circleMarkers.push (newCircleMarker);
880
+ newCircleMarker.on('mousedown', polylineState._dragCircle, polylineState);
881
+ newCircleMarker.on('click', polylineState._finishPolylinePath, polylineState);
882
+ this.circleMarkers.push(newCircleMarker);
886
883
  },
887
884
 
888
- getNewToolTip: function(latlng) {
889
- return L.marker (latlng, {
885
+ getNewToolTip: function (latlng) {
886
+ return L.marker(latlng, {
890
887
  icon: icon,
891
888
  interactive: false
892
889
  });
@@ -894,80 +891,82 @@
894
891
 
895
892
  addPoint: function (mouseCoords) {
896
893
  var lastCircleCoords = this.circleCoords.last();
897
- if (lastCircleCoords && lastCircleCoords.equals (mouseCoords)) { // don't add a new circle if the click was onto the last circle
894
+ if (lastCircleCoords && lastCircleCoords.equals(mouseCoords)) { // don't add a new circle if the click was onto the last circle
898
895
  return;
899
896
  }
900
- this.circleCoords.push (mouseCoords);
897
+ this.circleCoords.push(mouseCoords);
901
898
  // update polyline
902
899
  if (this.circleCoords.length > 1) {
903
- var arc = polylineState._polylineArc (lastCircleCoords, mouseCoords);
904
- var arrowMarker = polylineState._drawArrow (arc);
900
+ var arc = polylineState._polylineArc(lastCircleCoords, mouseCoords);
905
901
  if (this.circleCoords.length > 2) {
906
902
  arc.shift(); // remove first coordinate of the arc, cause it is identical with last coordinate of previous arc
907
903
  }
908
- this.polylinePath.setLatLngs (this.polylinePath.getLatLngs().concat(arc));
904
+ this.polylinePath.setLatLngs(this.polylinePath.getLatLngs().concat(arc));
909
905
  // following lines needed especially for Mobile Browsers where we just use mouseclicks. No mousemoves, no tempLine.
906
+ var arrowMarker = polylineState._drawArrow(arc);
910
907
  arrowMarker.cntLine = polylineState._currentLine.id;
911
908
  arrowMarker.cntArrow = polylineState._cntCircle - 1;
912
- polylineState._currentLine.arrowMarkers.push (arrowMarker);
913
- var distanceSegment = lastCircleCoords.distanceTo (mouseCoords);
909
+ polylineState._currentLine.arrowMarkers.push(arrowMarker);
910
+ var distanceSegment = lastCircleCoords.distanceTo(mouseCoords);
914
911
  this.distance += distanceSegment;
915
912
  var currentTooltip = polylineState._currentLine.tooltips.last();
916
- var prevTooltip = polylineState._currentLine.tooltips.slice(-1,-2)[0];
917
- polylineState._updateTooltip (currentTooltip, prevTooltip, this.distance, distanceSegment, lastCircleCoords, mouseCoords);
913
+ var prevTooltip = polylineState._currentLine.tooltips.slice(-1, -2)[0];
914
+ polylineState._updateTooltip(currentTooltip, prevTooltip, this.distance, distanceSegment, lastCircleCoords, mouseCoords);
918
915
  }
919
916
  // update last tooltip with final value
920
917
  if (currentTooltip) {
921
- currentTooltip.setLatLng (mouseCoords);
918
+ currentTooltip.setLatLng(mouseCoords);
922
919
  }
923
920
  // add new tooltip to update on mousemove
924
921
  var tooltipNew = this.getNewToolTip(mouseCoords);
925
922
  tooltipNew.addTo(polylineState._layerPaint);
926
- this.tooltips.push (tooltipNew);
927
- this.handleMarkers (mouseCoords);
923
+ this.tooltips.push(tooltipNew);
924
+ this.handleMarkers(mouseCoords);
928
925
  },
929
926
 
930
- finalize: function() {
927
+ finalize: function () {
931
928
  // remove tooltip created by last click
932
- polylineState._layerPaint.removeLayer (this.tooltips.last());
929
+ polylineState._layerPaint.removeLayer(this.tooltips.last());
933
930
  this.tooltips.pop();
934
931
  // remove temporary rubberline
935
- polylineState._layerPaint.removeLayer (polylineState._rubberlinePath);
932
+ polylineState._layerPaint.removeLayer(polylineState._rubberlinePath);
936
933
  if (this.circleCoords.length > 1) {
937
934
  this.tooltips.last()._icon.classList.add('polyline-measure-tooltip-end'); // add Class e.g. another background-color to the Previous Tooltip (which is the last fixed tooltip, cause the moving tooltip is being deleted later)
938
935
  var lastCircleMarker = this.circleMarkers.last()
939
- lastCircleMarker.setStyle (polylineState.options.endCircle);
936
+ lastCircleMarker.setStyle(polylineState.options.endCircle);
940
937
  // use Leaflet's own tooltip method to shwo a popuo tooltip if user hovers the last circle of a polyline
941
- lastCircleMarker.unbindTooltip (); // to close the opened Tooltip after it's been opened after click onto point to finish the line
942
- polylineState._currentLine.circleMarkers.map (function (circle) {circle.bindTooltip (polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'})});
943
- polylineState._currentLine.circleMarkers[0].bindTooltip (polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete + polylineState.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
944
- lastCircleMarker.bindTooltip (polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete + polylineState.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
945
- polylineState._currentLine.arrowMarkers.map (function (arrow) {arrow.bindTooltip (polylineState.options.tooltipTextAdd, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'})});
946
- lastCircleMarker.off ('click', polylineState._finishPolylinePath, polylineState);
947
- lastCircleMarker.on ('click', polylineState._resumePolylinePath, polylineState);
948
- polylineState._arrPolylines [this.id] = this;
938
+ lastCircleMarker.unbindTooltip(); // to close the opened Tooltip after it's been opened after click onto point to finish the line
939
+ polylineState._currentLine.circleMarkers.map(function (circle) { circle.bindTooltip(polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' }) });
940
+ polylineState._currentLine.circleMarkers[0].bindTooltip(polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete + polylineState.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
941
+ lastCircleMarker.bindTooltip(polylineState.options.tooltipTextMove + polylineState.options.tooltipTextDelete + polylineState.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
942
+ //polylineState._currentLine.arrowMarkers.map(function (arrow) { arrow.bindTooltip(polylineState.options.tooltipTextAdd, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' }) });
943
+ lastCircleMarker.off('click', polylineState._finishPolylinePath, polylineState);
944
+ lastCircleMarker.on('click', polylineState._resumePolylinePath, polylineState);
945
+ polylineState._arrPolylines.push(this);
949
946
  } else {
950
947
  // if there is only one point, just clean it up
951
- polylineState._layerPaint.removeLayer (this.circleMarkers.last());
952
- polylineState._layerPaint.removeLayer (this.tooltips.last());
948
+ polylineState._layerPaint.removeLayer(this.circleMarkers.last());
949
+ polylineState._layerPaint.removeLayer(this.tooltips.last());
953
950
  }
954
951
  polylineState._resetPathVariables();
955
952
  }
956
953
  };
957
954
 
958
- var firstTooltip = L.marker (clickCoords, {
959
- icon: icon,
960
- interactive: false
955
+ var firstTooltip = L.marker(clickCoords, {
956
+ //icon: icon,
957
+ icon: L.divIcon({ className: 'polyline-measure-tooltip-hidden'}),
958
+ interactive: false,
961
959
  })
960
+
962
961
  firstTooltip.addTo(this._layerPaint);
963
962
  var text = '';
964
963
  if (this.options.showBearings === true) {
965
- text = this.options.bearingTextIn+':---°<br>'+this.options.bearingTextOut+':---°';
964
+ text = this.options.bearingTextIn + ':---°<br>' + this.options.bearingTextOut + ':---°';
966
965
  }
967
966
  text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
968
967
  text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
969
968
  firstTooltip._icon.innerHTML = text;
970
- this._currentLine.tooltips.push (firstTooltip);
969
+ this._currentLine.tooltips.push(firstTooltip);
971
970
  this._currentLine.circleCoords.last = last;
972
971
  this._currentLine.tooltips.last = last;
973
972
  this._currentLine.circleMarkers.last = last;
@@ -985,13 +984,20 @@
985
984
  return;
986
985
  }
987
986
 
987
+ //ar_customized
988
+ if (this._currentLine && !this._mapdragging) {
989
+ this._currentLine.addPoint(e.latlng);
990
+ this._finishPolylinePath();
991
+ return;
992
+ }
993
+
988
994
  if (!this._currentLine && !this._mapdragging) {
989
- this._startLine (e.latlng);
995
+ this._startLine(e.latlng);
990
996
  this._map.fire('polylinemeasure:start', this._currentLine);
991
997
  }
992
998
  // just create a point if the map isn't dragged during the mouseclick.
993
999
  if (!this._mapdragging) {
994
- this._currentLine.addPoint (e.latlng);
1000
+ this._currentLine.addPoint(e.latlng);
995
1001
  this._map.fire('polylinemeasure:add', e);
996
1002
  this._map.fire('polylinemeasure:change', this._currentLine);
997
1003
  } else {
@@ -1016,22 +1022,22 @@
1016
1022
  * @private
1017
1023
  */
1018
1024
  _resumePolylinePath: function (e) {
1019
- if (e.originalEvent.ctrlKey === true || e.originalEvent.metaKey === true) { // just resume if user pressed the CTRL-Key (or metaKey on Mac) while clicking onto the last circle
1020
- this._currentLine = this._arrPolylines [e.target.cntLine];
1021
- this._rubberlinePath = L.polyline ([], {
1025
+ if (e.originalEvent.ctrlKey === true) { // just resume if user pressed the CTRL-Key while clicking onto the last circle
1026
+ this._currentLine = this._arrPolylines[e.target.cntLine];
1027
+ this._rubberlinePath = L.polyline([], {
1022
1028
  // Style of temporary, rubberline while moving the mouse
1023
1029
  color: this.options.tempLine.color,
1024
1030
  weight: this.options.tempLine.weight,
1025
1031
  interactive: false,
1026
1032
  dashArray: '8,8'
1027
1033
  }).addTo(this._layerPaint).bringToBack();
1028
- this._currentLine.tooltips.last()._icon.classList.remove ('polyline-measure-tooltip-end'); // remove extra CSS-class of previous, last tooltip
1029
- var tooltipNew = this._currentLine.getNewToolTip (e.latlng);
1030
- tooltipNew.addTo (this._layerPaint);
1034
+ this._currentLine.tooltips.last()._icon.classList.remove('polyline-measure-tooltip-end'); // remove extra CSS-class of previous, last tooltip
1035
+ var tooltipNew = this._currentLine.getNewToolTip(e.latlng);
1036
+ tooltipNew.addTo(this._layerPaint);
1031
1037
  this._currentLine.tooltips.push(tooltipNew);
1032
1038
  this._currentLine.circleMarkers.last().unbindTooltip(); // remove popup-tooltip of previous, last circleMarker
1033
- this._currentLine.circleMarkers.last().bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1034
- this._currentLine.circleMarkers.last().setStyle (this.options.currentCircle);
1039
+ this._currentLine.circleMarkers.last().bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1040
+ this._currentLine.circleMarkers.last().setStyle(this.options.currentCircle);
1035
1041
  this._cntCircle = this._currentLine.circleCoords.length;
1036
1042
  this._map.fire('polylinemeasure:resume', this._currentLine);
1037
1043
  }
@@ -1041,40 +1047,40 @@
1041
1047
  * After completing a path, reset all the values to prepare in creating the next polyline measurement
1042
1048
  * @private
1043
1049
  */
1044
- _resetPathVariables: function() {
1050
+ _resetPathVariables: function () {
1045
1051
  this._cntCircle = 0;
1046
1052
  this._currentLine = null;
1047
1053
  },
1048
1054
 
1049
- _clickedArrow: function(e) {
1050
- if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) { // (metaKey for Mac)
1055
+ _clickedArrow: function (e) {
1056
+ if (e.originalEvent.ctrlKey) {
1051
1057
  var lineNr = e.target.cntLine;
1052
1058
  var arrowNr = e.target.cntArrow;
1053
- this._arrPolylines[lineNr].arrowMarkers [arrowNr].removeFrom (this._layerPaint);
1054
- var newCircleMarker = new L.CircleMarker (e.latlng, this.options.intermedCircle).addTo(this._layerPaint);
1059
+ this._arrPolylines[lineNr].arrowMarkers[arrowNr].removeFrom(this._layerPaint);
1060
+ var newCircleMarker = new L.CircleMarker(e.latlng, this.options.intermedCircle).addTo(this._layerPaint);
1055
1061
  newCircleMarker.cntLine = lineNr;
1056
- newCircleMarker.on ('mousedown', this._dragCircle, this);
1057
- newCircleMarker.bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1058
- this._arrPolylines[lineNr].circleMarkers.splice (arrowNr+1, 0, newCircleMarker);
1059
- this._arrPolylines[lineNr].circleMarkers.map (function (item, index) {
1062
+ newCircleMarker.on('mousedown', this._dragCircle, this);
1063
+ newCircleMarker.bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1064
+ this._arrPolylines[lineNr].circleMarkers.splice(arrowNr + 1, 0, newCircleMarker);
1065
+ this._arrPolylines[lineNr].circleMarkers.map(function (item, index) {
1060
1066
  item.cntCircle = index;
1061
1067
  });
1062
- this._arrPolylines[lineNr].circleCoords.splice (arrowNr+1, 0, e.latlng);
1063
- var lineCoords = this._arrPolylines[lineNr].polylinePath.getLatLngs(); // get Coords of each Point of the current Polyline
1064
- var arc1 = this._polylineArc (this._arrPolylines[lineNr].circleCoords[arrowNr], e.latlng);
1068
+ this._arrPolylines[lineNr].circleCoords.splice(arrowNr + 1, 0, e.latlng);
1069
+ lineCoords = this._arrPolylines[lineNr].polylinePath.getLatLngs(); // get Coords of each Point of the current Polyline
1070
+ var arc1 = this._polylineArc(this._arrPolylines[lineNr].circleCoords[arrowNr], e.latlng);
1065
1071
  arc1.pop();
1066
- var arc2 = this._polylineArc (e.latlng, this._arrPolylines[lineNr].circleCoords[arrowNr+2]);
1067
- Array.prototype.splice.apply (lineCoords, [(arrowNr)*(this._arcpoints-1), this._arcpoints].concat (arc1, arc2));
1068
- this._arrPolylines[lineNr].polylinePath.setLatLngs (lineCoords);
1069
- var arrowMarker = this._drawArrow (arc1);
1072
+ var arc2 = this._polylineArc(e.latlng, this._arrPolylines[lineNr].circleCoords[arrowNr + 2]);
1073
+ Array.prototype.splice.apply(lineCoords, [(arrowNr) * (this._arcpoints - 1), this._arcpoints].concat(arc1, arc2));
1074
+ this._arrPolylines[lineNr].polylinePath.setLatLngs(lineCoords);
1075
+ var arrowMarker = this._drawArrow(arc1);
1070
1076
  this._arrPolylines[lineNr].arrowMarkers[arrowNr] = arrowMarker;
1071
- arrowMarker = this._drawArrow (arc2);
1072
- this._arrPolylines[lineNr].arrowMarkers.splice(arrowNr+1,0,arrowMarker);
1073
- this._arrPolylines[lineNr].arrowMarkers.map (function (item, index) {
1077
+ arrowMarker = this._drawArrow(arc2);
1078
+ this._arrPolylines[lineNr].arrowMarkers.splice(arrowNr + 1, 0, arrowMarker);
1079
+ this._arrPolylines[lineNr].arrowMarkers.map(function (item, index) {
1074
1080
  item.cntLine = lineNr;
1075
1081
  item.cntArrow = index;
1076
1082
  });
1077
- this._tooltipNew = L.marker (e.latlng, {
1083
+ this._tooltipNew = L.marker(e.latlng, {
1078
1084
  icon: L.divIcon({
1079
1085
  className: 'polyline-measure-tooltip',
1080
1086
  iconAnchor: [-4, -4]
@@ -1082,16 +1088,16 @@
1082
1088
  interactive: false
1083
1089
  });
1084
1090
  this._tooltipNew.addTo(this._layerPaint);
1085
- this._arrPolylines[lineNr].tooltips.splice (arrowNr+1, 0, this._tooltipNew);
1091
+ this._arrPolylines[lineNr].tooltips.splice(arrowNr + 1, 0, this._tooltipNew);
1086
1092
  var totalDistance = 0;
1087
- this._arrPolylines[lineNr].tooltips.map (function (item, index) {
1093
+ this._arrPolylines[lineNr].tooltips.map(function (item, index) {
1088
1094
  if (index >= 1) {
1089
- var distance = this._arrPolylines[lineNr].circleCoords[index-1].distanceTo (this._arrPolylines[lineNr].circleCoords[index]);
1095
+ var distance = this._arrPolylines[lineNr].circleCoords[index - 1].distanceTo(this._arrPolylines[lineNr].circleCoords[index]);
1090
1096
  var lastCircleCoords = this._arrPolylines[lineNr].circleCoords[index - 1];
1091
1097
  var mouseCoords = this._arrPolylines[lineNr].circleCoords[index];
1092
1098
  totalDistance += distance;
1093
- var prevTooltip = this._arrPolylines[lineNr].tooltips[index-1]
1094
- this._updateTooltip (item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1099
+ var prevTooltip = this._arrPolylines[lineNr].tooltips[index - 1]
1100
+ this._updateTooltip(item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1095
1101
  }
1096
1102
  }.bind(this));
1097
1103
  this._map.fire('polylinemeasure:insert', e);
@@ -1101,16 +1107,16 @@
1101
1107
 
1102
1108
  _dragCircleMouseup: function () {
1103
1109
  // bind new popup-tooltip to the last CircleMArker if dragging finished
1104
- if ((this._circleNr === 0) || (this._circleNr === this._arrPolylines[this._lineNr].circleCoords.length-1)) {
1105
- this._e1.target.bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1110
+ if ((this._circleNr === 0) || (this._circleNr === this._arrPolylines[this._lineNr].circleCoords.length - 1)) {
1111
+ this._e1.target.bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1106
1112
  } else {
1107
- this._e1.target.bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1113
+ this._e1.target.bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1108
1114
  }
1109
1115
  this._resetPathVariables();
1110
- this._map.off ('mousemove', this._dragCircleMousemove, this);
1116
+ this._map.off('mousemove', this._dragCircleMousemove, this);
1111
1117
  this._map.dragging.enable();
1112
- this._map.on ('mousemove', this._mouseMove, this);
1113
- this._map.off ('mouseup', this._dragCircleMouseup, this);
1118
+ this._map.on('mousemove', this._mouseMove, this);
1119
+ this._map.off('mouseup', this._dragCircleMouseup, this);
1114
1120
  this._map.fire('polylinemeasure:move', this._e1);
1115
1121
  this._map.fire('polylinemeasure:change', this._arrPolylines[this._lineNr]);
1116
1122
  },
@@ -1120,119 +1126,119 @@
1120
1126
  var mouseNewLng = e2.latlng.lng;
1121
1127
  var latDifference = mouseNewLat - this._mouseStartingLat;
1122
1128
  var lngDifference = mouseNewLng - this._mouseStartingLng;
1123
- var currentCircleCoords = L.latLng (this._circleStartingLat + latDifference, this._circleStartingLng + lngDifference);
1129
+ var currentCircleCoords = L.latLng(this._circleStartingLat + latDifference, this._circleStartingLng + lngDifference);
1124
1130
  var arcpoints = this._arcpoints;
1125
1131
  var lineNr = this._e1.target.cntLine;
1126
1132
  this._lineNr = lineNr;
1127
1133
  var circleNr = this._e1.target.cntCircle;
1128
1134
  this._circleNr = circleNr;
1129
- this._e1.target.setLatLng (currentCircleCoords);
1135
+ this._e1.target.setLatLng(currentCircleCoords);
1130
1136
  this._e1.target.unbindTooltip(); // unbind popup-tooltip cause otherwise it would be annoying during dragging, or popup instantly again if it's just closed
1131
1137
  this._arrPolylines[lineNr].circleCoords[circleNr] = currentCircleCoords;
1132
1138
  var lineCoords = this._arrPolylines[lineNr].polylinePath.getLatLngs(); // get Coords of each Point of the current Polyline
1133
1139
  if (circleNr >= 1) { // redraw previous arc just if circle is not starting circle of polyline
1134
- var newLineSegment1 = this._polylineArc(this._arrPolylines[lineNr].circleCoords[circleNr-1], currentCircleCoords);
1140
+ var newLineSegment1 = this._polylineArc(this._arrPolylines[lineNr].circleCoords[circleNr - 1], currentCircleCoords);
1135
1141
  // the next line's syntax has to be used since Internet Explorer doesn't know new spread operator (...) for inserting the individual elements of an array as 3rd argument of the splice method; Otherwise we could write: lineCoords.splice (circleNr*(arcpoints-1), arcpoints, ...newLineSegment1);
1136
- Array.prototype.splice.apply (lineCoords, [(circleNr-1)*(arcpoints-1), arcpoints].concat (newLineSegment1));
1137
- var arrowMarker = this._drawArrow (newLineSegment1);
1142
+ Array.prototype.splice.apply(lineCoords, [(circleNr - 1) * (arcpoints - 1), arcpoints].concat(newLineSegment1));
1143
+ var arrowMarker = this._drawArrow(newLineSegment1);
1138
1144
  arrowMarker.cntLine = lineNr;
1139
- arrowMarker.cntArrow = circleNr-1;
1140
- this._arrPolylines[lineNr].arrowMarkers [circleNr-1].removeFrom (this._layerPaint);
1141
- this._arrPolylines[lineNr].arrowMarkers [circleNr-1] = arrowMarker;
1145
+ arrowMarker.cntArrow = circleNr - 1;
1146
+ this._arrPolylines[lineNr].arrowMarkers[circleNr - 1].removeFrom(this._layerPaint);
1147
+ this._arrPolylines[lineNr].arrowMarkers[circleNr - 1] = arrowMarker;
1142
1148
  }
1143
- if (circleNr < this._arrPolylines[lineNr].circleCoords.length-1) { // redraw following arc just if circle is not end circle of polyline
1144
- var newLineSegment2 = this._polylineArc (currentCircleCoords, this._arrPolylines[lineNr].circleCoords[circleNr+1]);
1145
- Array.prototype.splice.apply (lineCoords, [circleNr*(arcpoints-1), arcpoints].concat (newLineSegment2));
1146
- arrowMarker = this._drawArrow (newLineSegment2);
1149
+ if (circleNr < this._arrPolylines[lineNr].circleCoords.length - 1) { // redraw following arc just if circle is not end circle of polyline
1150
+ var newLineSegment2 = this._polylineArc(currentCircleCoords, this._arrPolylines[lineNr].circleCoords[circleNr + 1]);
1151
+ Array.prototype.splice.apply(lineCoords, [circleNr * (arcpoints - 1), arcpoints].concat(newLineSegment2));
1152
+ arrowMarker = this._drawArrow(newLineSegment2);
1147
1153
  arrowMarker.cntLine = lineNr;
1148
1154
  arrowMarker.cntArrow = circleNr;
1149
- this._arrPolylines[lineNr].arrowMarkers [circleNr].removeFrom (this._layerPaint);
1150
- this._arrPolylines[lineNr].arrowMarkers [circleNr] = arrowMarker;
1155
+ this._arrPolylines[lineNr].arrowMarkers[circleNr].removeFrom(this._layerPaint);
1156
+ this._arrPolylines[lineNr].arrowMarkers[circleNr] = arrowMarker;
1151
1157
  }
1152
- this._arrPolylines[lineNr].polylinePath.setLatLngs (lineCoords);
1158
+ this._arrPolylines[lineNr].polylinePath.setLatLngs(lineCoords);
1153
1159
  if (circleNr >= 0) { // just update tooltip position if moved circle is 2nd, 3rd, 4th etc. circle of a polyline
1154
- this._arrPolylines[lineNr].tooltips[circleNr].setLatLng (currentCircleCoords);
1160
+ this._arrPolylines[lineNr].tooltips[circleNr].setLatLng(currentCircleCoords);
1155
1161
  }
1156
1162
  var totalDistance = 0;
1157
1163
  // update tooltip texts of each tooltip
1158
- this._arrPolylines[lineNr].tooltips.map (function (item, index) {
1164
+ this._arrPolylines[lineNr].tooltips.map(function (item, index) {
1159
1165
  if (index >= 1) {
1160
- var distance = this._arrPolylines[lineNr].circleCoords[index-1].distanceTo (this._arrPolylines[lineNr].circleCoords[index]);
1166
+ var distance = this._arrPolylines[lineNr].circleCoords[index - 1].distanceTo(this._arrPolylines[lineNr].circleCoords[index]);
1161
1167
  var lastCircleCoords = this._arrPolylines[lineNr].circleCoords[index - 1];
1162
1168
  var mouseCoords = this._arrPolylines[lineNr].circleCoords[index];
1163
1169
  totalDistance += distance;
1164
1170
  this._arrPolylines[lineNr].distance = totalDistance;
1165
- var prevTooltip = this._arrPolylines[lineNr].tooltips[index-1]
1166
- this._updateTooltip (item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1171
+ var prevTooltip = this._arrPolylines[lineNr].tooltips[index - 1]
1172
+ this._updateTooltip(item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1167
1173
  }
1168
1174
  }.bind(this));
1169
- this._map.on ('mouseup', this._dragCircleMouseup, this);
1175
+ this._map.on('mouseup', this._dragCircleMouseup, this);
1170
1176
  },
1171
1177
 
1172
1178
  _resumeFirstpointMousemove: function (e) {
1173
1179
  var lineNr = this._lineNr;
1174
- this._map.on ('click', this._resumeFirstpointClick, this); // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
1180
+ this._map.on('click', this._resumeFirstpointClick, this); // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
1175
1181
  var mouseCoords = e.latlng;
1176
- this._rubberlinePath2.setLatLngs (this._polylineArc (mouseCoords, currentCircleCoords));
1177
- this._tooltipNew.setLatLng (mouseCoords);
1182
+ this._rubberlinePath2.setLatLngs(this._polylineArc(mouseCoords, currentCircleCoords));
1183
+ this._tooltipNew.setLatLng(mouseCoords);
1178
1184
  var totalDistance = 0;
1179
- var distance = mouseCoords.distanceTo (this._arrPolylines[lineNr].circleCoords[0]);
1185
+ var distance = mouseCoords.distanceTo(this._arrPolylines[lineNr].circleCoords[0]);
1180
1186
  var lastCircleCoords = mouseCoords;
1181
1187
  var currentCoords = this._arrPolylines[lineNr].circleCoords[0];
1182
1188
  totalDistance += distance;
1183
1189
  var prevTooltip = this._tooltipNew;
1184
1190
  var currentTooltip = this._arrPolylines[lineNr].tooltips[0]
1185
- this._updateTooltip (currentTooltip, prevTooltip, totalDistance, distance, lastCircleCoords, currentCoords);
1186
- this._arrPolylines[lineNr].tooltips.map (function (item, index) {
1191
+ this._updateTooltip(currentTooltip, prevTooltip, totalDistance, distance, lastCircleCoords, currentCoords);
1192
+ this._arrPolylines[lineNr].tooltips.map(function (item, index) {
1187
1193
  if (index >= 1) {
1188
- var distance = this._arrPolylines[lineNr].circleCoords[index-1].distanceTo (this._arrPolylines[lineNr].circleCoords[index]);
1194
+ var distance = this._arrPolylines[lineNr].circleCoords[index - 1].distanceTo(this._arrPolylines[lineNr].circleCoords[index]);
1189
1195
  var lastCircleCoords = this._arrPolylines[lineNr].circleCoords[index - 1];
1190
1196
  var mouseCoords = this._arrPolylines[lineNr].circleCoords[index];
1191
1197
  totalDistance += distance;
1192
- var prevTooltip = this._arrPolylines[lineNr].tooltips[index-1]
1193
- this._updateTooltip (item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1198
+ var prevTooltip = this._arrPolylines[lineNr].tooltips[index - 1]
1199
+ this._updateTooltip(item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1194
1200
  }
1195
- }.bind (this));
1201
+ }.bind(this));
1196
1202
  },
1197
1203
 
1198
1204
  _resumeFirstpointClick: function (e) {
1199
1205
  var lineNr = this._lineNr;
1200
1206
  this._resumeFirstpointFlag = false;
1201
- this._map.off ('mousemove', this._resumeFirstpointMousemove, this);
1202
- this._map.off ('click', this._resumeFirstpointClick, this);
1203
- this._layerPaint.removeLayer (this._rubberlinePath2);
1204
- this._arrPolylines[lineNr].circleMarkers [0].setStyle (this.options.intermedCircle);
1205
- this._arrPolylines[lineNr].circleMarkers [0].unbindTooltip();
1206
- this._arrPolylines[lineNr].circleMarkers [0].bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1207
- var newCircleMarker = new L.CircleMarker (e.latlng, this.options.startCircle).addTo(this._layerPaint);
1207
+ this._map.off('mousemove', this._resumeFirstpointMousemove, this);
1208
+ this._map.off('click', this._resumeFirstpointClick, this);
1209
+ this._layerPaint.removeLayer(this._rubberlinePath2);
1210
+ this._arrPolylines[lineNr].circleMarkers[0].setStyle(this.options.intermedCircle);
1211
+ this._arrPolylines[lineNr].circleMarkers[0].unbindTooltip();
1212
+ this._arrPolylines[lineNr].circleMarkers[0].bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1213
+ var newCircleMarker = new L.CircleMarker(e.latlng, this.options.startCircle).addTo(this._layerPaint);
1208
1214
  newCircleMarker.cntLine = lineNr;
1209
1215
  newCircleMarker.cntCircle = 0;
1210
- newCircleMarker.on ('mousedown', this._dragCircle, this);
1211
- newCircleMarker.bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1216
+ newCircleMarker.on('mousedown', this._dragCircle, this);
1217
+ newCircleMarker.bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1212
1218
  this._arrPolylines[lineNr].circleMarkers.unshift(newCircleMarker);
1213
- this._arrPolylines[lineNr].circleMarkers.map (function (item, index) {
1219
+ this._arrPolylines[lineNr].circleMarkers.map(function (item, index) {
1214
1220
  item.cntCircle = index;
1215
1221
  });
1216
1222
  this._arrPolylines[lineNr].circleCoords.unshift(e.latlng);
1217
- var arc = this._polylineArc (e.latlng, currentCircleCoords);
1218
- var arrowMarker = this._drawArrow (arc);
1223
+ var arc = this._polylineArc(e.latlng, currentCircleCoords);
1224
+ var arrowMarker = this._drawArrow(arc);
1219
1225
  this._arrPolylines[lineNr].arrowMarkers.unshift(arrowMarker);
1220
- this._arrPolylines[lineNr].arrowMarkers.map (function (item, index) {
1226
+ this._arrPolylines[lineNr].arrowMarkers.map(function (item, index) {
1221
1227
  item.cntLine = lineNr;
1222
1228
  item.cntArrow = index;
1223
1229
  });
1224
1230
  arc.pop(); // remove last coordinate of arc, cause it's already part of the next arc.
1225
- this._arrPolylines[lineNr].polylinePath.setLatLngs (arc.concat(this._arrPolylines[lineNr].polylinePath.getLatLngs()));
1231
+ this._arrPolylines[lineNr].polylinePath.setLatLngs(arc.concat(this._arrPolylines[lineNr].polylinePath.getLatLngs()));
1226
1232
  this._arrPolylines[lineNr].tooltips.unshift(this._tooltipNew);
1227
- this._map.on ('mousemove', this._mouseMove, this);
1233
+ this._map.on('mousemove', this._mouseMove, this);
1228
1234
  },
1229
1235
 
1230
1236
 
1231
1237
  // not just used for dragging Cirles but also for deleting circles and resuming line at its starting point.
1232
1238
  _dragCircle: function (e1) {
1233
1239
  var arcpoints = this._arcpoints;
1234
- if (e1.originalEvent.ctrlKey || e1.originalEvent.metaKey) { // if user wants to resume drawing a line. metaKey for Mac
1235
- this._map.off ('click', this._mouseClick, this); // to avoid unwanted creation of a new line if CTRL-clicked onto a point
1240
+ if (e1.originalEvent.ctrlKey) { // if user wants to resume drawing a line
1241
+ this._map.off('click', this._mouseClick, this); // to avoid unwanted creation of a new line if CTRL-clicked onto a point
1236
1242
  // if user wants resume the line at its starting point
1237
1243
  if (e1.target.cntCircle === 0) {
1238
1244
  this._resumeFirstpointFlag = true;
@@ -1240,15 +1246,15 @@
1240
1246
  var lineNr = this._lineNr;
1241
1247
  this._circleNr = e1.target.cntCircle;
1242
1248
  currentCircleCoords = e1.latlng;
1243
- this._arrPolylines[lineNr].circleMarkers [0].setStyle (this.options.currentCircle);
1244
- this._rubberlinePath2 = L.polyline ([], {
1249
+ this._arrPolylines[lineNr].circleMarkers[0].setStyle(this.options.currentCircle);
1250
+ this._rubberlinePath2 = L.polyline([], {
1245
1251
  // Style of temporary, rubberline while moving the mouse
1246
1252
  color: this.options.tempLine.color,
1247
1253
  weight: this.options.tempLine.weight,
1248
1254
  interactive: false,
1249
1255
  dashArray: '8,8'
1250
1256
  }).addTo(this._layerPaint).bringToBack();
1251
- this._tooltipNew = L.marker (currentCircleCoords, {
1257
+ this._tooltipNew = L.marker(currentCircleCoords, {
1252
1258
  icon: L.divIcon({
1253
1259
  className: 'polyline-measure-tooltip',
1254
1260
  iconAnchor: [-4, -4]
@@ -1256,15 +1262,15 @@
1256
1262
  interactive: false
1257
1263
  });
1258
1264
  this._tooltipNew.addTo(this._layerPaint);
1259
- var text='';
1265
+ var text = '';
1260
1266
  if (this.options.showBearings === true) {
1261
- text = text + this.options.bearingTextIn+':---°<br>'+this.options.bearingTextOut+':---°';
1267
+ text = text + this.options.bearingTextIn + ':---°<br>' + this.options.bearingTextOut + ':---°';
1262
1268
  }
1263
1269
  text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
1264
1270
  text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
1265
1271
  this._tooltipNew._icon.innerHTML = text;
1266
- this._map.off ('mousemove', this._mouseMove, this);
1267
- this._map.on ('mousemove', this._resumeFirstpointMousemove, this);
1272
+ this._map.off('mousemove', this._mouseMove, this);
1273
+ this._map.on('mousemove', this._resumeFirstpointMousemove, this);
1268
1274
  }
1269
1275
  return;
1270
1276
  }
@@ -1276,117 +1282,35 @@
1276
1282
  this._circleNr = e1.target.cntCircle;
1277
1283
  var circleNr = this._circleNr;
1278
1284
 
1279
- // if there is a rubberlinePath-layer and rubberline-id = clicked line-id of point meaning user is deleting a point of current line being drawn
1280
- if ((this._layerPaint.hasLayer (this._rubberlinePath)) && (lineNr === this._currentLine.id)) {
1281
- // when you're drawing and deleting point you need to take it into account by decreasing _cntCircle
1282
- this._cntCircle--;
1283
- // if the last Circle in polyline is being removed
1284
- if(this._currentLine.circleMarkers.length === 1) {
1285
- this._currentLine.finalize();
1286
- return;
1287
- }
1288
-
1289
- this._currentLine.circleCoords.splice(circleNr,1);
1290
- this._currentLine.circleMarkers [circleNr].removeFrom (this._layerPaint);
1291
- this._currentLine.circleMarkers.splice(circleNr,1);
1292
- this._currentLine.circleMarkers.map (function (item, index) {
1293
- item.cntCircle = index;
1294
- });
1295
- lineCoords = this._currentLine.polylinePath.getLatLngs();
1296
- this._currentLine.tooltips [circleNr].removeFrom (this._layerPaint);
1297
- this._currentLine.tooltips.splice(circleNr,1);
1298
-
1299
- // if first Circle is being removed
1300
- if (circleNr === 0) {
1301
- if(this._currentLine.circleMarkers.length === 1) {
1302
- this._currentLine.circleMarkers [0].setStyle (this.options.currentCircle);
1303
- } else {
1304
- this._currentLine.circleMarkers [0].setStyle (this.options.startCircle);
1305
- }
1306
- lineCoords.splice (0, arcpoints-1);
1307
- this._currentLine.circleMarkers [0].bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1308
- this._currentLine.arrowMarkers [circleNr].removeFrom (this._layerPaint);
1309
- this._currentLine.arrowMarkers.splice(0,1);
1310
- var text='';
1311
- if (this.options.showBearings === true) {
1312
- text = this.options.bearingTextIn+':---°<br>'+this.options.bearingTextOut+':---°';
1313
- }
1314
- text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
1315
- text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
1316
- this._currentLine.tooltips [0]._icon.innerHTML = text;
1317
- // if last Circle is being removed
1318
- } else if (circleNr === this._currentLine.circleCoords.length) {
1319
- this._currentLine.circleMarkers [circleNr-1].on ('click', this._resumePolylinePath, this);
1320
- this._currentLine.circleMarkers [circleNr-1].bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1321
- this._currentLine.circleMarkers.slice(-1)[0].setStyle (this.options.currentCircle); // get last element of the array
1322
- lineCoords.splice (-(arcpoints-1), arcpoints-1);
1323
- this._currentLine.arrowMarkers [circleNr-1].removeFrom (this._layerPaint);
1324
- this._currentLine.arrowMarkers.splice(-1,1);
1325
- // if intermediate Circle is being removed
1326
- } else {
1327
- newLineSegment = this._polylineArc (this._currentLine.circleCoords[circleNr-1], this._currentLine.circleCoords[circleNr]);
1328
- Array.prototype.splice.apply (lineCoords, [(circleNr-1)*(arcpoints-1), (2*arcpoints-1)].concat (newLineSegment));
1329
- this._currentLine.arrowMarkers [circleNr-1].removeFrom (this._layerPaint);
1330
- this._currentLine.arrowMarkers [circleNr].removeFrom (this._layerPaint);
1331
- arrowMarker = this._drawArrow (newLineSegment);
1332
- this._currentLine.arrowMarkers.splice(circleNr-1,2,arrowMarker);
1333
- }
1334
- this._currentLine.polylinePath.setLatLngs (lineCoords);
1335
- this._currentLine.arrowMarkers.map (function (item, index) {
1336
- item.cntLine = lineNr;
1337
- item.cntArrow = index;
1338
- });
1339
- var totalDistanceUnfinishedLine = 0;
1340
- this._currentLine.tooltips.map (function (item, index, arr) {
1341
- if (index >= 1) {
1342
- var distance, mouseCoords;
1343
- var prevTooltip = this._currentLine.tooltips[index-1];
1344
- var lastCircleCoords = this._currentLine.circleCoords[index - 1];
1345
- if(index === arr.length - 1) {
1346
- distance = this._currentLine.circleCoords[index-1].distanceTo (e1.latlng);
1347
- mouseCoords = e1.latlng;
1348
- // if this is the last Circle (mouse cursor) then don't sum the distance, but update tooltip like it was summed
1349
- this._updateTooltip (item, prevTooltip, totalDistanceUnfinishedLine + distance, distance, lastCircleCoords, mouseCoords);
1350
- } else {
1351
- distance = this._currentLine.circleCoords[index-1].distanceTo (this._currentLine.circleCoords[index]);
1352
- mouseCoords = this._currentLine.circleCoords[index];
1353
- // if this is not the last Circle (mouse cursor) then sum the distance
1354
- totalDistanceUnfinishedLine += distance;
1355
- this._updateTooltip (item, prevTooltip, totalDistanceUnfinishedLine, distance, lastCircleCoords, mouseCoords);
1356
- }
1357
- }
1358
- }.bind (this));
1359
-
1360
- // update _currentLine distance after point deletion
1361
- this._currentLine.distance = totalDistanceUnfinishedLine;
1362
- } else {
1363
- if (this._arrPolylines[lineNr].circleMarkers.length === 2) { // if there are just 2 remaining points, delete all these points and the remaining line, since there should not stay a lonely point the map
1364
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].circleMarkers [1]);
1365
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].tooltips [1]);
1366
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].circleMarkers [0]);
1367
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].tooltips [0]);
1368
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].arrowMarkers [0]);
1369
- this._layerPaint.removeLayer (this._arrPolylines[lineNr].polylinePath);
1370
- this._map.fire('polylinemeasure:remove', e1);
1371
- this._map.fire('polylinemeasure:change', this._arrPolylines[this._lineNr]);
1372
- return;
1285
+ // if there is a polyline with this number in finished ones
1286
+ if (this._arrPolylines[lineNr]) {
1287
+ if (this._arrPolylines[lineNr].circleMarkers.length === 2) { // if there are just 2 remaining points, delete all these points and the remaining line, since there should not stay a lonely point the map
1288
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].circleMarkers[1]);
1289
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].tooltips[1]);
1290
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].circleMarkers[0]);
1291
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].tooltips[0]);
1292
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].arrowMarkers[0]);
1293
+ this._layerPaint.removeLayer(this._arrPolylines[lineNr].polylinePath);
1294
+ this._map.fire('polylinemeasure:remove', e1);
1295
+ this._map.fire('polylinemeasure:change', this._arrPolylines[this._lineNr]);
1296
+ return;
1373
1297
  }
1374
1298
 
1375
- this._arrPolylines[lineNr].circleCoords.splice(circleNr,1);
1376
- this._arrPolylines[lineNr].circleMarkers [circleNr].removeFrom (this._layerPaint);
1377
- this._arrPolylines[lineNr].circleMarkers.splice(circleNr,1);
1378
- this._arrPolylines[lineNr].circleMarkers.map (function (item, index) {
1299
+ this._arrPolylines[lineNr].circleCoords.splice(circleNr, 1);
1300
+ this._arrPolylines[lineNr].circleMarkers[circleNr].removeFrom(this._layerPaint);
1301
+ this._arrPolylines[lineNr].circleMarkers.splice(circleNr, 1);
1302
+ this._arrPolylines[lineNr].circleMarkers.map(function (item, index) {
1379
1303
  item.cntCircle = index;
1380
1304
  });
1381
1305
  var lineCoords = this._arrPolylines[lineNr].polylinePath.getLatLngs();
1382
- this._arrPolylines[lineNr].tooltips [circleNr].removeFrom (this._layerPaint);
1383
- this._arrPolylines[lineNr].tooltips.splice(circleNr,1);
1306
+ this._arrPolylines[lineNr].tooltips[circleNr].removeFrom(this._layerPaint);
1307
+ this._arrPolylines[lineNr].tooltips.splice(circleNr, 1);
1384
1308
 
1385
1309
  // if the last Circle in polyline is being removed (in the code above, so length will be equal 0)
1386
- if(!this._arrPolylines[lineNr].circleMarkers.length) {
1310
+ if (!this._arrPolylines[lineNr].circleMarkers.length) {
1387
1311
  this._arrPolylines.splice(lineNr, 1);
1388
1312
  // when you delete the line in the middle of array, other lines indexes change, so you need to update line number of markers and circles
1389
- this._arrPolylines.forEach(function(line, index) {
1313
+ this._arrPolylines.forEach(function (line, index) {
1390
1314
  line.circleMarkers.map(function (item) {
1391
1315
  item.cntLine = index;
1392
1316
  });
@@ -1399,55 +1323,138 @@
1399
1323
  }
1400
1324
  // if first Circle is being removed
1401
1325
  if (circleNr === 0) {
1402
- this._arrPolylines[lineNr].circleMarkers [0].setStyle (this.options.startCircle);
1403
- lineCoords.splice (0, arcpoints-1);
1404
- this._arrPolylines[lineNr].circleMarkers [0].bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1405
- this._arrPolylines[lineNr].arrowMarkers [circleNr].removeFrom (this._layerPaint);
1406
- this._arrPolylines[lineNr].arrowMarkers.splice(0,1);
1407
- var text='';
1326
+ this._arrPolylines[lineNr].circleMarkers[0].setStyle(this.options.startCircle);
1327
+ lineCoords.splice(0, arcpoints - 1);
1328
+ this._arrPolylines[lineNr].circleMarkers[0].bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1329
+ this._arrPolylines[lineNr].arrowMarkers[circleNr].removeFrom(this._layerPaint);
1330
+ this._arrPolylines[lineNr].arrowMarkers.splice(0, 1);
1331
+ var text = '';
1408
1332
  if (this.options.showBearings === true) {
1409
- text = this.options.bearingTextIn+':---°<br>'+this.options.bearingTextOut+':---°';
1333
+ text = this.options.bearingTextIn + ':---°<br>' + this.options.bearingTextOut + ':---°';
1410
1334
  }
1411
1335
  text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
1412
1336
  text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
1413
- this._arrPolylines[lineNr].tooltips [0]._icon.innerHTML = text;
1337
+ this._arrPolylines[lineNr].tooltips[0]._icon.innerHTML = text;
1414
1338
  // if last Circle is being removed
1415
1339
  } else if (circleNr === this._arrPolylines[lineNr].circleCoords.length) {
1416
- this._arrPolylines[lineNr].circleMarkers [circleNr-1].on ('click', this._resumePolylinePath, this);
1417
- this._arrPolylines[lineNr].circleMarkers [circleNr-1].bindTooltip (this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, {direction:'top', opacity:0.7, className:'polyline-measure-popupTooltip'});
1418
- this._arrPolylines[lineNr].circleMarkers.slice(-1)[0].setStyle (this.options.endCircle); // get last element of the array
1340
+ this._arrPolylines[lineNr].circleMarkers[circleNr - 1].on('click', this._resumePolylinePath, this);
1341
+ this._arrPolylines[lineNr].circleMarkers[circleNr - 1].bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1342
+ this._arrPolylines[lineNr].circleMarkers.slice(-1)[0].setStyle(this.options.endCircle); // get last element of the array
1419
1343
  this._arrPolylines[lineNr].tooltips.slice(-1)[0]._icon.classList.add('polyline-measure-tooltip-end');
1420
- lineCoords.splice (-(arcpoints-1), arcpoints-1);
1421
- this._arrPolylines[lineNr].arrowMarkers [circleNr-1].removeFrom (this._layerPaint);
1422
- this._arrPolylines[lineNr].arrowMarkers.splice(-1,1);
1344
+ lineCoords.splice(-(arcpoints - 1), arcpoints - 1);
1345
+ this._arrPolylines[lineNr].arrowMarkers[circleNr - 1].removeFrom(this._layerPaint);
1346
+ this._arrPolylines[lineNr].arrowMarkers.splice(-1, 1);
1423
1347
  // if intermediate Circle is being removed
1424
1348
  } else {
1425
- var newLineSegment = this._polylineArc (this._arrPolylines[lineNr].circleCoords[circleNr-1], this._arrPolylines[lineNr].circleCoords[circleNr]);
1426
- Array.prototype.splice.apply (lineCoords, [(circleNr-1)*(arcpoints-1), (2*arcpoints-1)].concat (newLineSegment));
1427
- this._arrPolylines[lineNr].arrowMarkers [circleNr-1].removeFrom (this._layerPaint);
1428
- this._arrPolylines[lineNr].arrowMarkers [circleNr].removeFrom (this._layerPaint);
1429
- var arrowMarker = this._drawArrow (newLineSegment);
1430
- this._arrPolylines[lineNr].arrowMarkers.splice(circleNr-1,2,arrowMarker);
1349
+ newLineSegment = this._polylineArc(this._arrPolylines[lineNr].circleCoords[circleNr - 1], this._arrPolylines[lineNr].circleCoords[circleNr]);
1350
+ Array.prototype.splice.apply(lineCoords, [(circleNr - 1) * (arcpoints - 1), (2 * arcpoints - 1)].concat(newLineSegment));
1351
+ this._arrPolylines[lineNr].arrowMarkers[circleNr - 1].removeFrom(this._layerPaint);
1352
+ this._arrPolylines[lineNr].arrowMarkers[circleNr].removeFrom(this._layerPaint);
1353
+ var arrowMarker = this._drawArrow(newLineSegment);
1354
+ this._arrPolylines[lineNr].arrowMarkers.splice(circleNr - 1, 2, arrowMarker);
1431
1355
  }
1432
- this._arrPolylines[lineNr].polylinePath.setLatLngs (lineCoords);
1433
- this._arrPolylines[lineNr].arrowMarkers.map (function (item, index) {
1356
+ this._arrPolylines[lineNr].polylinePath.setLatLngs(lineCoords);
1357
+ this._arrPolylines[lineNr].arrowMarkers.map(function (item, index) {
1434
1358
  item.cntLine = lineNr;
1435
1359
  item.cntArrow = index;
1436
1360
  });
1437
1361
  var totalDistance = 0;
1438
- this._arrPolylines[lineNr].tooltips.map (function (item, index) {
1362
+ this._arrPolylines[lineNr].tooltips.map(function (item, index) {
1439
1363
  if (index >= 1) {
1440
- var distance = this._arrPolylines[lineNr].circleCoords[index-1].distanceTo (this._arrPolylines[lineNr].circleCoords[index]);
1364
+ var distance = this._arrPolylines[lineNr].circleCoords[index - 1].distanceTo(this._arrPolylines[lineNr].circleCoords[index]);
1441
1365
  var lastCircleCoords = this._arrPolylines[lineNr].circleCoords[index - 1];
1442
1366
  var mouseCoords = this._arrPolylines[lineNr].circleCoords[index];
1443
1367
  totalDistance += distance;
1444
1368
  this._arrPolylines[lineNr].distance = totalDistance;
1445
- var prevTooltip = this._arrPolylines[lineNr].tooltips[index-1];
1446
- this._updateTooltip (item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1369
+ var prevTooltip = this._arrPolylines[lineNr].tooltips[index - 1];
1370
+ this._updateTooltip(item, prevTooltip, totalDistance, distance, lastCircleCoords, mouseCoords);
1447
1371
  }
1448
- }.bind (this));
1449
- // if user is deleting a point of a line not finished yet (= rubbberline still present)
1450
- }
1372
+ }.bind(this));
1373
+ // if this is the first line and it's not finished yet
1374
+ } else {
1375
+ // when you're drawing and deleting point you need to take it into account by decreasing _cntCircle
1376
+ this._cntCircle--;
1377
+ // if the last Circle in polyline is being removed
1378
+ if (this._currentLine.circleMarkers.length === 1) {
1379
+ this._currentLine.finalize();
1380
+ return;
1381
+ }
1382
+
1383
+ this._currentLine.circleCoords.splice(circleNr, 1);
1384
+ this._currentLine.circleMarkers[circleNr].removeFrom(this._layerPaint);
1385
+ this._currentLine.circleMarkers.splice(circleNr, 1);
1386
+ this._currentLine.circleMarkers.map(function (item, index) {
1387
+ item.cntCircle = index;
1388
+ });
1389
+ lineCoords = this._currentLine.polylinePath.getLatLngs();
1390
+ this._currentLine.tooltips[circleNr].removeFrom(this._layerPaint);
1391
+ this._currentLine.tooltips.splice(circleNr, 1);
1392
+
1393
+ // if first Circle is being removed
1394
+ if (circleNr === 0) {
1395
+ if (this._currentLine.circleMarkers.length === 1) {
1396
+ this._currentLine.circleMarkers[0].setStyle(this.options.currentCircle);
1397
+ } else {
1398
+ this._currentLine.circleMarkers[0].setStyle(this.options.startCircle);
1399
+ }
1400
+ lineCoords.splice(0, arcpoints - 1);
1401
+ this._currentLine.circleMarkers[0].bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1402
+ this._currentLine.arrowMarkers[circleNr].removeFrom(this._layerPaint);
1403
+ this._currentLine.arrowMarkers.splice(0, 1);
1404
+ var text = '';
1405
+ if (this.options.showBearings === true) {
1406
+ text = this.options.bearingTextIn + ':---°<br>' + this.options.bearingTextOut + ':---°';
1407
+ }
1408
+ text = text + '<div class="polyline-measure-tooltip-difference">+' + '0</div>';
1409
+ text = text + '<div class="polyline-measure-tooltip-total">' + '0</div>';
1410
+ this._currentLine.tooltips[0]._icon.innerHTML = text;
1411
+ // if last Circle is being removed
1412
+ } else if (circleNr === this._currentLine.circleCoords.length) {
1413
+ this._currentLine.circleMarkers[circleNr - 1].on('click', this._resumePolylinePath, this);
1414
+ this._currentLine.circleMarkers[circleNr - 1].bindTooltip(this.options.tooltipTextMove + this.options.tooltipTextDelete + this.options.tooltipTextResume, { direction: 'top', opacity: 0.7, className: 'polyline-measure-popupTooltip' });
1415
+ this._currentLine.circleMarkers.slice(-1)[0].setStyle(this.options.currentCircle); // get last element of the array
1416
+ this._currentLine.tooltips.slice(-1)[0]._icon.classList.add('polyline-measure-tooltip-end');
1417
+ lineCoords.splice(-(arcpoints - 1), arcpoints - 1);
1418
+ this._currentLine.arrowMarkers[circleNr - 1].removeFrom(this._layerPaint);
1419
+ this._currentLine.arrowMarkers.splice(-1, 1);
1420
+ // if intermediate Circle is being removed
1421
+ } else {
1422
+ newLineSegment = this._polylineArc(this._currentLine.circleCoords[circleNr - 1], this._currentLine.circleCoords[circleNr]);
1423
+ Array.prototype.splice.apply(lineCoords, [(circleNr - 1) * (arcpoints - 1), (2 * arcpoints - 1)].concat(newLineSegment));
1424
+ this._currentLine.arrowMarkers[circleNr - 1].removeFrom(this._layerPaint);
1425
+ this._currentLine.arrowMarkers[circleNr].removeFrom(this._layerPaint);
1426
+ arrowMarker = this._drawArrow(newLineSegment);
1427
+ this._currentLine.arrowMarkers.splice(circleNr - 1, 2, arrowMarker);
1428
+ }
1429
+ this._currentLine.polylinePath.setLatLngs(lineCoords);
1430
+ this._currentLine.arrowMarkers.map(function (item, index) {
1431
+ item.cntLine = lineNr;
1432
+ item.cntArrow = index;
1433
+ });
1434
+ var totalDistanceUnfinishedLine = 0;
1435
+ this._currentLine.tooltips.map(function (item, index, arr) {
1436
+ if (index >= 1) {
1437
+ var distance, mouseCoords;
1438
+ var prevTooltip = this._currentLine.tooltips[index - 1];
1439
+ var lastCircleCoords = this._currentLine.circleCoords[index - 1];
1440
+ if (index === arr.length - 1) {
1441
+ distance = this._currentLine.circleCoords[index - 1].distanceTo(e1.latlng);
1442
+ mouseCoords = e1.latlng;
1443
+ // if this is the last Circle (mouse cursor) then don't sum the distance, but update tooltip like it was summed
1444
+ this._updateTooltip(item, prevTooltip, totalDistanceUnfinishedLine + distance, distance, lastCircleCoords, mouseCoords);
1445
+ } else {
1446
+ distance = this._currentLine.circleCoords[index - 1].distanceTo(this._currentLine.circleCoords[index]);
1447
+ mouseCoords = this._currentLine.circleCoords[index];
1448
+ // if this is not the last Circle (mouse cursor) then sum the distance
1449
+ totalDistanceUnfinishedLine += distance;
1450
+ this._updateTooltip(item, prevTooltip, totalDistanceUnfinishedLine, distance, lastCircleCoords, mouseCoords);
1451
+ }
1452
+ }
1453
+ }.bind(this));
1454
+
1455
+ // update _currentLine distance after point deletion
1456
+ this._currentLine.distance = totalDistanceUnfinishedLine;
1457
+ }
1451
1458
 
1452
1459
  this._map.fire('polylinemeasure:remove', e1);
1453
1460
  this._map.fire('polylinemeasure:change', this._arrPolylines[this._lineNr]);
@@ -1456,45 +1463,18 @@
1456
1463
  this._e1 = e1;
1457
1464
  if ((this._measuring) && (this._cntCircle === 0)) { // just execute drag-function if Measuring tool is active but no line is being drawn at the moment.
1458
1465
  this._map.dragging.disable(); // turn of moving of the map during drag of a circle
1459
- this._map.off ('mousemove', this._mouseMove, this);
1460
- this._map.off ('click', this._mouseClick, this);
1466
+ this._map.off('mousemove', this._mouseMove, this);
1467
+ this._map.off('click', this._mouseClick, this);
1461
1468
  this._mouseStartingLat = e1.latlng.lat;
1462
1469
  this._mouseStartingLng = e1.latlng.lng;
1463
1470
  this._circleStartingLat = e1.target._latlng.lat;
1464
1471
  this._circleStartingLng = e1.target._latlng.lng;
1465
- this._map.on ('mousemove', this._dragCircleMousemove, this);
1472
+ this._map.on('mousemove', this._dragCircleMousemove, this);
1466
1473
  }
1467
- },
1468
-
1469
- /**
1470
- * Takes in a dataset and programatically draws the polylines and measurements to the map
1471
- * Dataset must be in the form of an array of LatLng[], which allows for multiple discontinuous
1472
- * polylines to be seeded
1473
- * @param {L.LatLng[][]} polylinesArray | Array of array of points
1474
- */
1475
- seed: function(polylinesArray){
1476
- // Hijack user actions to manually draw polylines
1477
- polylinesArray.forEach((polyline) => {
1478
- // toggle draw state on:
1479
- this._toggleMeasure();
1480
- // start line with first point of each polyline
1481
- this._startLine(polyline[0]);
1482
- // add subsequent points:
1483
- polyline.forEach((point, ind) => {
1484
- const latLng = L.latLng(point);
1485
- this._mouseMove({ latLng });
1486
- this._currentLine.addPoint(latLng);
1487
- // on last point,
1488
- if (ind === polyline.length - 1) {
1489
- this._finishPolylinePath();
1490
- this._toggleMeasure();
1491
- }
1492
- });
1493
- });
1494
1474
  }
1495
1475
  });
1496
1476
 
1497
- //======================================================================================
1477
+ //======================================================================================
1498
1478
 
1499
1479
  L.Map.mergeOptions({
1500
1480
  PolylineMeasureControl: false
@@ -1508,7 +1488,7 @@
1508
1488
  });
1509
1489
 
1510
1490
  L.control.polylineMeasure = function (options) {
1511
- return new L.Control.PolylineMeasure (options);
1491
+ return new L.Control.PolylineMeasure(options);
1512
1492
  };
1513
1493
 
1514
1494
  return L.Control.PolylineMeasure;