travels.html

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />

<div id='map' style='height:400px'></div>

<script>
mapboxgl.accessToken = '{{ site.mapbox.accessToken }}';
var map = new mapboxgl.Map({
  container: 'map',
  style: '{{site.mapbox.style}}',
  center: [-70.39916221303974, 32.69356230197333],
  maxBounds: [ [-180, -85], [180, 85] ],
  dragRotate: false
});

var nav = new mapboxgl.NavigationControl({
  showCompass: false
});

map.addControl(nav, 'top-left');

map.on('load', function () {

  map.addLayer({
    "id": "travels",
    "type": "circle",
    "source": {
        "type": "geojson",
        "data": "{{ site.url }}/resources/travels.geojson"
    },
    'paint': {
      'circle-color': '#3366ff',
      'circle-opacity': 0.4
    }
  });

  var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  });

  map.on('mouseenter', 'travels', function(e) {
    /* Change the cursor style as a UI indicator. */
    map.getCanvas().style.cursor = 'pointer';

    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.place_name;

    /* Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to. */
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    /* Populate the popup and set its coordinates
    // based on the feature found. */
    popup.setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
  });

  map.on('mouseleave', 'travels', function() {
    map.getCanvas().style.cursor = '';
    popup.remove();
  });

});



</script>