turf map

by Stefano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js"></script>
<div id='map' style="height:600px"></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY3ZlbGV5IiwiYSI6ImNqZ3hxaDJlNTI5M2wzMHAxZmhiN2didGgifQ.P3dSOAlfrWBysiS2sMPJCA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
//center: [180, 45],
zoom: 5
});
 
map.on('load', function () {
/* var start = turf.point([-103.0078125, -27.059125784374054]) */;
/* var end = turf.point([23.90625, -45.08903556483102]) */;
var start = turf.point([55.352916, 25.248663999999998]);
var end = turf.point([-122.389881, 37.615215]);

var greatCircle = turf.greatCircle(start, end);


 map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
      "type": "geojson",
      "data": greatCircle
    },
    "layout": {
    "line-join": "round",
    "line-cap": "round"
    },
    "paint": {
    "line-color": "#888",
    "line-width": 8
    }
  });

});