leaflet-arc
Version:
Leaflet.js plugin for drawing Great Circle arcs using arc.js
57 lines (42 loc) • 2.02 kB
Markdown
# [Leaflet.Arc](https://github.com/MAD-GooZe/Leaflet.Arc) [](https://travis-ci.org/mad-gooze/Leaflet.Arc) [](https://www.npmjs.com/package/leaflet-arc)
> Leaflet.js plugin for drawing Great Circle arcs using arc.js
This [Leaflet.js](http://leafletjs.com/) plugin adds L.Polyline.Arc function which wraps [arc.js](https://github.com/springmeyer/arc.js) functionality for drawing Great Circle arcs on your maps.
Tested with Leaflet v1.0.0-beta.2 and v1.0.0-rc.3
[Demo](http://mad-gooze.github.io/Leaflet.Arc/)
## Usage & Installation
1. Include [leaflet-arc.min.js](https://github.com/mad-gooze/Leaflet.Arc/blob/master/bin/leaflet-arc.min.js) after Leaflet:
```html
<script src='leaflet-arc.min.js'></script>
```
You can use hosted version from unpkg.com:
```html
<script src='//unpkg.com/leaflet-arc/bin/leaflet-arc.min.js'></script>
```
Or install from npm:
```shell
npm install --save leaflet-arc
```
2. Create arcs!
```javascript
L.Polyline.Arc([43.11667, 131.90000], [55.7522200, 37.6155600]).addTo(map);
```
You can also change number of vertices in line or use all L.Polyline options:
```javascript
L.Polyline.Arc([59.56667, 150.80000], [67.50000, 64.03333], {
color: 'red',
vertices: 200
}).addTo(map);
```
## API
```javascript
L.Polyline.Arc(from, to, [options])
```
Returns general `L.Polyline` object.
#### from, to
`L.LatLng` objects representing the beginning and the end of arc
options
#### options
Object to bypass options. Possible properties (inherited from [arc.js options](https://github.com/springmeyer/arc.js/#arc-options)):
* `vertices` - number of intermediate vertices in resulting arc;
* `offset` - controls the likelyhood that lines will be split which cross the dateline
All `L.Polyline` options are also supported.