<!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
}