UNPKG

leaflet-arc

Version:

Leaflet.js plugin for drawing Great Circle arcs using arc.js

57 lines (42 loc) 2.02 kB
# [Leaflet.Arc](https://github.com/MAD-GooZe/Leaflet.Arc) [![Build Status](https://travis-ci.org/mad-gooze/Leaflet.Arc.svg?branch=master)](https://travis-ci.org/mad-gooze/Leaflet.Arc) [![npm version](https://img.shields.io/npm/v/leaflet-arc.svg)](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.