gokertanrisever/leaflet-ruler

A simple leaflet plugin to measure true bearing and distance between clicked points

Leaflet-Ruler Plugin

A simple leaflet plugin to measure true bearing and distance between clicked points. Extends L.Control.

Demo

Requirements

• Leaflet 1.0.0+

Usage

• Create a leaflet map
• Include leaflet-ruler.js and leaflet-ruler.css files.

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.css"
    integrity="sha384-P9DABSdtEY/XDbEInD3q+PlL+BjqPCXGcF8EkhtKSfSTr/dS5PBKa9+/PMkW2xsY"
    crossorigin="anonymous"
/>
<script
    src="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.js"
    integrity="sha384-8SqKZR7V8uOetpjjbcNJHvwuHpb074WS0UXjCLhzfJUqYn3B/uWx1WVv5mwRp1mV"
    crossorigin="anonymous"
></script>

• Add Ruler control to map

L.control.ruler().addTo(map);

• Escape button finishes measurement path and starts a new measurement. Second push to escape turns off the plugin.
• Double-click also finishes measurement path and starts a new measurement.
• It's possible to add other units. No need to specify any option value to use defaults.

var options = {
    position: 'topleft',
    lengthUnit: {
        factor: 0.539956803, //  from km to nm
        display: 'Nautical Miles',
        decimal: 2,
    },
};
L.control.ruler(options).addTo(map);

Default Options

options: {
      position: 'topright',         // Leaflet control position option
      circleMarker: {               // Leaflet circle marker options for points used in this plugin
        color: 'red',
        radius: 2
      },
      lineStyle: {                  // Leaflet polyline options for lines used in this plugin
        color: 'red',
        dashArray: '1,6'
      },
      lengthUnit: {                 // You can use custom length units. Default unit is kilometers.
        display: 'km',              // This is the display value will be shown on the screen. Example: 'meters'
        decimal: 2,                 // Distance result will be fixed to this value.
        factor: null,               // This value will be used to convert from kilometers. Example: 1000 (from kilometers to meters)
        label: 'Distance:'
      },
      angleUnit: {
        display: '°',           // This is the display value will be shown on the screen. Example: 'Gradian'
        decimal: 2,                 // Bearing result will be fixed to this value.
        factor: null,                // This option is required to customize angle unit. Specify solid angle value for angle unit. Example: 400 (for gradian).
        label: 'Bearing:'
      }
    }

leaflet-ruler's Issues

better calculation on low distanse

Example quickstart with CDN has outdated hash for leaflet-ruler.js

The readme provides the following CDN based quickstart:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.css" integrity="sha384-P9DABSdtEY/XDbEInD3q+PlL+BjqPCXGcF8EkhtKSfSTr/dS5PBKa9+/PMkW2xsY" crossorigin="anonymous">  
<script src="https://cdn.jsdelivr.net/gh/gokertanrisever/leaflet-ruler@master/src/leaflet-ruler.js" integrity="sha384-N2S8y7hRzXUPiepaSiUvBH1ZZ7Tc/ZfchhbPdvOE5v3aBBCIepq9l+dBJPFdo1ZJ" crossorigin="anonymous"></script>

However, the sha384 hash for leaflet-ruler.js is incorrect (it appears the readme wasn't updated when the last PR was merged).
The hash should be updated to: sha384-8SqKZR7V8uOetpjjbcNJHvwuHpb074WS0UXjCLhzfJUqYn3B/uWx1WVv5mwRp1mV

Control on Custom Button

Hey,

I know this project is no longer maintained. I was wondering if anyone was able to figure out a way to get this to fire off from a non-map oriented button. I have a menu and I want to be able to fire it from that menu.

Tooltip

can you add an option to display a custom tooltip text when hovering ruler icon ?
Thx

Could be bug feedback

Thank you very much for the plugin! I found that when only measuring the distance between two points, double-clicking the mouse to stop the measurement caused the distance to double.

Measuring distance and bearing from within a map layer (circle, etc.)

Hello Goker, Thank you for the nice feature! It is very well looking and easy to use.

Perhaps my question is not an issue at all, because this could be according to ruler design. So it could be considered as recommendation.

I have my leaflet map populated with many layers - most of them are circles and semiCircles. What I need is to be able to measure when my start point is in the centre (or within) a circle marker. My problem is that when my cursor is within the area of the marker it is no longer a Cross and it gets back to its default type of pointing finger, which means that Ruler is not active and I cannot start measurement. Whenever I get out of the marker, then Cross is back.

Is there any option to keep Ruler feature active all the time until switched-off from the icon?

Thank you!

Draggable waypoints?

Is there any workaround to make the click-created waypoints draggable?

Show coordinates for each waypoint

Optionally, allow each point to be labeled with its coordinates.

Currently each point is labeled:

  Bearing: 51.92
  Distance: 2.48km

Instead also allow coordinates:

  (41.029, 29.002) 
  Bearing: 51.92
  Distance: 2.48km

Is it possible to disable angleUnit?

I loved the plugin, but I wanted to disable the angleUnit portion of it. Is it possible?

Double click doubles the distance before closing

Hi, I tried your online and offline demo and I noticed that in offline demo when I want to close the path with double click the distance gets doubled before it closes so it reads wrong distance. Also in online demo when I click on the same spot the distance gets doubled. Attached a photo with two lines one terminated with esc and the other with double click
I think that clicking on the same spot it should close the path

doubleClick error

when I double click the map, if the two operations are not at the same position, the map will show two markers.Now,I remove the compare between current click and the last click . And in the _closePath function,add a this._map.removeLayer(this.lastMarker);

` _clicked: function(e) {
this._clickedLatLong = e.latlng;
this._clickedPoints.push(this._clickedLatLong);
//L.circleMarker(this._clickedLatLong, this.options.circleMarker).addTo(this._pointLayer);
//&& !e.latlng.equals(this._clickedPoints[this._clickedPoints.length - 2])
if(this._clickCount > 0 ){
if (this._movingLatLong){
L.polyline([this._clickedPoints[this._clickCount-1], this._movingLatLong], this.options.lineStyle).addTo(this._polylineLayer);
}
var text;
this._totalLength += this._result.Distance;
if (this._clickCount > 1){
text = '距离:' + ' ' + this._addedLength.toFixed(this.options.lengthUnit.decimal) + ' ' + this.options.lengthUnit.display + '

(+' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + ')

';
}
else {
text = '距离:' + ' ' + this._result.Distance.toFixed(this.options.lengthUnit.decimal) + ' ' + this.options.lengthUnit.display;

      }
      this._lastMarker=L.circleMarker(this._clickedLatLong, this.options.circleMarker).bindTooltip(text, {permanent: true, className: 'result-tooltip'}).addTo(this._pointLayer).openTooltip();
    }
    this._clickCount++;
  },`

_closePath: function() { this._map.removeLayer(this._tempLine); this._map.removeLayer(this._tempPoint); this._map.removeLayer(this._lastMarker); this._choice = false; L.DomEvent.on(this._container, 'click', this._toggleMeasure, this); this._toggleMeasure(); }

Optional Tooltip

Initially, I want to suggest a tooltip on the control that will explain the function to the user. But it should be optional and up to the developer himself. Or is there anyway that I can do it myself to extend it?

how to toggle ?

hello how to toggle the ruler plugin ?

Double click produces doubling of measurement resulting in incorrect measurement

Hi

I have been testing your control and its really good. Except I think I have found a bug.
When I double click it sometimes doubles the distance and I cant seem to work out why it does this.

Are you aware of this bug ?

I know it may be a bit of work have your thoight about implementoing a right click to finish the line. This may help differentiate a click that is intended to finish measuring.

If you can fix this issue it would be great.

Thanks

Wayne

Android Issues with touch event handling

Great plugin. But there are issues on Android with touch event handling. You can start "ruling" but can't stop. Note this is with Leaflet configured for mobile use as shown here.

L.Control.ruler is not a function

Ruler control on some html element

For example:

<div class="some-class">Ruler</div>

...and on click at this div, I want to activate ruler on the map. On one more click - disactivate.

Now ruler attach to leaflet control. But this is does not suit me and my app design.

Double rendering on react-leaflet

Ruler appears twice on react-leaflet map. I am not sure on how to use it with react hooks as some complex functions that refresh the map view might be having an hand on this.