amaldare93/leaflet.arc

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

Leaflet.Arc

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

This plugin adds L.Polyline.Arc function which wraps arc.js functionality for creation of Great Cirlce arcs.

Tested with Leaflet v1.0.0-beta.2

Demo

Usage

Include Leaflet.js, arc.js and Leaflet.Arc.min.js:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src='http://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<script src='Leaflet.Arc.min.js'></script>

or install with npm:

npm install --save https://github.com/MAD-GooZe/Leaflet.Arc.git#gh-pages

Create arcs!

 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:

 L.Polyline.Arc([59.56667, 150.80000], [67.50000, 64.03333], {
    color: "red",
    vertices: 200
}).addTo(map);

API

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

Optional object to declare options. Possible properties (inherited from arc.js 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.