First mapbox-gl.js w/ geojson FeatureCollection of LineStrings by mpmckenna8

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.css' rel='stylesheet' />
        <link type="text/css" rel="stylesheet" href="./stySheets/bikes.css"/>


</head>
<body>
<div class="legend">

  <span>Sharrows <div class="boxer" id= "sharecare"></div></span><br>
  <span>Bike route <div class="boxer" id= "some"></div></span><br>
  <span>Green lane <div class="boxer" id= "paint"></div></span>

</div>
<div id='map'></div>
<script>

  //console.log(bikeD);

mapboxgl.util.getJSON('bikeoutdoors-v4.json', function(err,style){




mapboxgl.accessToken = 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ';
var map = new mapboxgl.Map({
  container: 'map',
  style: style,
  center: [37.763, -122.494],
  zoom: 11,
  // causes pan & zoom handlers not to be applied, similar to
  // .dragging.disable() and other handler .disable() funtions in Leaflet.
  interactive: true,
  hash:true

})

var file = './bikewaySFMTA.geojson'

mapboxgl.util.getJSON(file, function(err,bikeD){


map.on('click', function(e){
  console.log(e)
})

var geojson = bikeD;
var sfBike = new mapboxgl.GeoJSONSource({data: geojson });

map.addSource('bikeSF',sfBike);

console.log(map.sources);

console.log(style)

map.addControl(new mapboxgl.Navigation());


map.style.addClass('night');
})

})

function lanesStyle(err, style){

}
</script>

</body>
</html>