A simple leaflet plugin to measure true bearing and distance between clicked points
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
dist Initial commit. May 11, 2017
examples Initial commit. May 11, 2017
src Closing path with double click issue fixed Jun 30, 2017
LICENSE.md Initial commit. May 11, 2017
README.md Source code links and options updated. May 12, 2017

README.md

Leaflet-Ruler Plugin

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

Demo

Demo

Requirements

  • Leaflet 1.0.0+

Usage

  • Create a leaflet map
  • Include leaflet-ruler.js and leaflet-ruler.css files.
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css">
<script src="https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"></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)  
      },
      angleUnit: {
        display: '&deg;',           // 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).
      }
    }