Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gokertanrisever/leaflet-ruler
A simple leaflet plugin to measure true bearing and distance between clicked points
https://github.com/gokertanrisever/leaflet-ruler
Last synced: 18 days ago
JSON representation
A simple leaflet plugin to measure true bearing and distance between clicked points
- Host: GitHub
- URL: https://github.com/gokertanrisever/leaflet-ruler
- Owner: gokertanrisever
- License: mit
- Created: 2017-05-11T20:18:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-18T20:56:00.000Z (7 months ago)
- Last Synced: 2024-09-20T01:40:15.365Z (about 2 months ago)
- Language: JavaScript
- Size: 8.87 MB
- Stars: 125
- Watchers: 8
- Forks: 56
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Leaflet-Ruler Plugin
A simple leaflet plugin to measure **true bearing** and **distance** between clicked points. Extends L.Control.
### [Demo](http://gokertanrisever.github.io/leaflet-ruler)
[](http://gokertanrisever.github.io/leaflet-ruler)
## Requirements
- Leaflet 1.0.0+
## Usage
- Create a [leaflet map](http://leafletjs.com/examples/quick-start/)
- Include leaflet-ruler.js and leaflet-ruler.css files.
```html
```
- Add Ruler control to map
```js
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.
```js
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
```js
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:'
}
}
```