<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="mapbox"></div>
    <script type="text/javascript" src="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
    <script type="text/javascript" src="//api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.3.0/mapbox.directions.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
L.mapbox.accessToken = 'pk.eyJ1IjoiaWg4IiwiYSI6ImNpZWs1NjV2MTAwOGd0OGtoMmhheDR4emQifQ.vkkWw2tQ67K3v7xxVr9rPA';

var map = L.mapbox.map('mapbox', 'mapbox.dark');

var layer = L.mapbox.featureLayer(null, {
  pointToLayer: function (feature, latLng) {
    return new L.Marker(latLng, {
      clickable: false
    });
  }
}).addTo(map);

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-113.5, 53.5]
    },
    "properties": {
        "title": "Current Location",
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-113, 53.5]
    },
    "properties": {
        "title": "Vehicle",
    }
}];

layer.setGeoJSON(geoJson);
map.fitBounds(layer.getBounds());
html, body, #mapbox {
  height: 100%;
}

.leaflet-marker-icon {
  cursor:-webkit-grab;
  cursor:-moz-grab
}