Skip to content

Instantly share code, notes, and snippets.

@ryanbaumann
Last active June 6, 2018 02:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanbaumann/7a5480c20f2de3aba91bb19435403b3b to your computer and use it in GitHub Desktop.
Save ryanbaumann/7a5480c20f2de3aba91bb19435403b3b to your computer and use it in GitHub Desktop.
great arc circles client side mapbox gl js
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6IjdiOWEzZGIyMGNkOGY3NWQ4ZTBhN2Y5ZGU2Mzg2NDY2In0.jycgv7qwF8MMIWt4cT0RaQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9?optimize=true',
center: [-122.486052, 37.830348],
zoom: 0
});
function getRandomInRange(from, to, fixed) {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
// .toFixed() returns string, so ' * 1' is a trick to convert to number
}
var num_points = 1000
var arc_geojson = {
"type": "FeatureCollection",
"features": []
}
for (var i = 0; i < num_points; i++) {
let origin = { x: getRandomInRange(-122, 47, 3), y: getRandomInRange(-45, 45, 3) }
let destination = {x: getRandomInRange(-74, 20, 3), y: getRandomInRange(-45, 45, 3)}
let generator = new arc.GreatCircle(origin, destination, { metric: getRandomInRange(0, 100, 0) });
let line = generator.Arc(100, { offset: 10 });
arc_geojson.features.push(line.json());
}
map.on('style.load', function() {
map.addSource('arcs', {
"type": "geojson",
"data": arc_geojson
})
map.addLayer({
"id": "route",
"type": "line",
"source": 'arcs',
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": {
'property': 'metric',
'type': 'exponential',
'stops': [[10, '#ffeda0'], [50, '#feb24c'], [75, '#f03b20']]
},
"line-width": {
"stops": [[0,0.2], [5,1]]
},
"line-opacity": {
'property': 'metric',
'type': 'exponential',
'stops': [[10, 0.1], [100, 1]]
}
}
}, 'waterway-label');
map.addLayer({
"id": "points",
"type": "circle",
"source": 'arcs',
"paint": {
"circle-color": 'white',
"circle-radius": {
stops: [[0,0.5], [5,1]]
}
}
}, 'waterway-label');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment