Add-on to draw geodesic lines with leaflet
HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download

README.md

Leaflet.Geodesic

Add-on for Leaflet to draw geodesic lines and great circles. A geodesic line is the shortest path between two given positions on the earth surface. Wrapping at lng=180° is handled correctly. The master branch is compatible with Leaflet v1.0.2+.

Leaflet.Geodesic Screenshot

It is based on geodesy by Chris Veness that gives extremely precise results.

Live-Demo

Usage

Add the source to your project/html-file after leaflet.js:

<script src="leaflet.js"></script>
<script src="Leaflet.Geodesic.js"></script>

Leaflet.Geodesic can be used similar to Leaflet's Polyline.

Creation

L.geodesic( <LatLng[][]> latlngs, <Geodesic options> options? )

Options

Geodesic has the following options:

Option Type Default Description
steps Number 10 Defines how many intermediate points are generated along the path. More steps mean a smoother path but more resources.
color String blue Stroke color.
dash Number 1 Use a number between 0..1 to create a dashed line. The given number represents the percentage of the actual dash between each intermediate point (0.5 means the line is drawn half the length) defined by steps. See example below.
wrap Boolean true Wrap line at map border (date line). Set to 'false' if you want lines to cross the dateline (experimental, see noWrap-example on how to use)

All options of Leaflet's Polyline can be used as well.

Tutorial

You need to add the plugin in your html file after the leaflet file

<script src="leaflet.js"></script>
<script src="Leaflet.Geodesic.js"></script>

This code creates an empty Geodesic object:

var Geodesic = L.geodesic([], {
	weight: 7,
	opacity: 0.5,
	color: 'blue',
	steps: 50
}).addTo(map);

To actually draw a line, we need to create and set the coordinates of our geodesic line:

var berlin = new L.LatLng(52.5, 13.35);
var losangeles = new L.LatLng(33.82, -118.38);

Geodesic.setLatLngs([[berlin, losangeles]]);

A geodesic line can have more than two Points:

var berlin = new L.LatLng(52.5, 13.35);
var losangeles = new L.LatLng(33.82, -118.38);
var capetown = new L.LatLng(-33.91, 18.41);

Geodesic.setLatLngs([[berlin, losangeles, capetown]]);

You can also draw independent lines within one geodesic object:

var berlin = new L.LatLng(52.5, 13.35);
var losangeles = new L.LatLng(33.82, -118.38);
var capetown = new L.LatLng(-33.91, 18.41);
var sydney = new L.LatLng(-33.91, 151.08);

Geodesic.setLatLngs([[berlin, losangeles], [capetown, sydney]]);

Great circles

Draw a circle around a given position.

L.Geodesic.createCircle(<LatLng> center, <Number> radius)
Parameter Type Description
center L.LatLng geographic position/center of the circle
radius Number Radius of the circle in metres

Example

var Geodesic = L.geodesic([], {steps:40}).addTo(map);
Geodesic.createCircle(new L.LatLng(61.07, -114.35), 1500000);

Great Circle Screenshot

see also: Great Circle Demo

Create geodesic objects from GeoJSON

Draw geodesic lines given in GeoJSON-format. LineString, MultiLineString and Polygon geometries are supported.

Parameter Type Description
geojson Object GeoJSON-Object to draw as geodesic-lines.
var geojsonExample =
{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {},
			"geometry": {
				"type": "LineString",
				"coordinates": [
					[-40.07, -6.66],
					[16.17, -69.16],
					[46.75, -20.30]
				]
			}
		}
	]
}

var geodesicLayer = L.geodesic([], {
	weight: 7,
	opacity: 0.5,
	color: '#ff33ee',
	steps: 50,
	wrap: false,
}).addTo(map)

geodesicLayer.geoJson(geojsonExample)

geoJSON Screenshot

FAQ

Q: How can I use a custom icon with leaflet?

see http://jsfiddle.net/h1r3yagb/

Q: I want to draw only part (eg. halfway) of a geodesic line between two places?

see http://jsfiddle.net/h1r3yagb/20/

Q: How can I draw filled great circles?

in options set: fill: true. See also Leaflet's Path API reference

var Geodesic3 = L.geodesic([], {
	weight:3, opacity:1, fill: true,
	color: 'green',	steps: 40}).addTo(map);
Geodesic3.createCircle(calgary, 2000000);

Branches

ES5 branch

See https://github.com/henrythasler/Leaflet.Geodesic/issues/31 Also includes a minified version

Legacy Branch for Leaflet v0.7.7 and before

Please look at the branch legacy to use Leaflet.Geodesic with Leaflet v0.7.7 and before. The master and testing branches can only be used with Leaflet v1.0.0+.

License

GPL V3