Arc.js
HTML
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css">
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<div id='map'></div>
CSS
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
JavaScript
L.mapbox.accessToken = 'pk.eyJ1IjoiYW5jZXN0cnltYXBib3giLCJhIjoiNllqcGhKYyJ9.p9QKjx4kc2E_55jLTmDw0Q';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([42.87596410238254, -100.546875], 3);
// Start and end points, in x = longitude, y = latitude values
var start = { x: 0.1275, y: 51.5072 };
var end = { x: -77, y: 39 };
var generator = new arc.GreatCircle(start, end, { name: 'Seattle to DC' });
var line = generator.Arc(100, { offset: 20 });
var line_options = {
color: '#60527E', // Stroke color
opacity: 1, // Stroke opacity
weight: 3, // Stroke weight
};
L.mapbox.featureLayer({
// this feature is in the GeoJSON format: see geojson.org
// for the full specification
type: 'Feature',
geometry: {
type: 'Point',
// coordinates here are in longitude, latitude order because
// x, y is the standard for GeoJSON and many formats
coordinates: [
-77.03221142292,
38.913371603574
]
},
properties: {
title: 'Arrival',
description: '1898 • New York City, New York, United States',
'marker-size': 'medium',
'marker-color': '#60527E',
'marker-symbol': 'circle'
}
}).addTo(map);
L.mapbox.featureLayer({
// this feature is in the GeoJSON format: see geojson.org
// for the full specification
type: 'Feature',
geometry: {
type: 'Point',
// coordinates here are in longitude, latitude order because
// x, y is the standard for GeoJSON and many formats
coordinates: [
.012234,
51.5072
]
},
properties: {
title: 'Departure',
description: '1898 • London, England, United Kingdom',
'marker-size': 'medium',
'marker-color': '#60527E',
'marker-symbol': 'circle'
}
}).addTo(map);
L.geoJson(line.json(),line_options).addTo(map);