Project Timeline
(click to enlarge)
Location
mapboxgl.accessToken = 'pk.eyJ1IjoidHR3ZWFrIiwiYSI6ImNpcDdhZnVnbjAwenlzdmx5c2VxZG1paTcifQ.dKl-bEZoS8tEp4pxn47IGQ';
if (!mapboxgl.supported()) {
var div = document.createElement("div");
div.setAttribute('class', 'alert alert-warning');
div.innerHTML = "Sorry, your browser does not support this map.";
document.getElementById("map").appendChild(div);
} else {
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ttweak/cixs3145e001w2rn2j66m3ahv', //hosted style id
center: [-121.8488, 37.6825], // starting position
zoom: 11.5, // starting zoom
attributionControl: false
});
}
map.addControl(new mapboxgl.NavigationControl()); // Add zoom and rotation controls to the map
map.dragRotate.disable(); // disable map rotation using right click + drag
map.touchZoomRotate.disableRotation(); // disable map rotation using touch rotation gesture
map.doubleClickZoom.disable(); // disable double click
map.keyboard.disable(); // disable keyboard controls
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[ -121.86240920054965, 37.69122548117785 ],
[ -121.86248452720369, 37.6820751999971 ],
[ -121.85736231473186, 37.68213481460269 ],
[ -121.85721166142385, 37.67566635051159 ],
[ -121.85468821851498, 37.67566635051159 ],
[ -121.85465055518796, 37.67167171775823],
[ -121.85525316841995, 37.671731340723426],
[ -121.85566746501692, 37.67152266013544],
[ -121.85536615840095, 37.67137360221335],
[ -121.8375137414036, 37.67337095349514],
[ -121.83766439471157, 37.678587662196605],
[ -121.83303180549073, 37.68022712346399],
[ -121.83352142874173, 37.680942513390036],
[ -121.83280582552874, 37.681151167485666],
[ -121.83732542476858, 37.68592024393831],
[ -121.8430502504724, 37.691106266531804],
[ -121.84734386975025, 37.691732141285144],
[ -121.8484737695602, 37.692477223389716],
[ -121.84854909621419, 37.69369914183423],
[ -121.85408560528299, 37.69366933918501 ],
[ -121.85412326861, 37.69137449921577],
[ -121.86240920054965, 37.69125528480946]
],
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#367D5B",
"line-width": 3
}
});
});