wboykinm/index.html

## 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.11.4/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('style.load', function () {
    map.addSource("route", {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.48369693756104, 37.83381888486939],
                    [-122.48348236083984, 37.83317489144141],
                    [-122.48339653015138, 37.83270036637107],
                    [-122.48356819152832, 37.832056363179625],
                    [-122.48404026031496, 37.83114119107971],
                    [-122.48404026031496, 37.83049717427869],
                    [-122.48348236083984, 37.829920943955045],
                    [-122.48356819152832, 37.82954808664175],
                    [-122.48507022857666, 37.82944639795659],
                    [-122.48610019683838, 37.82880236636284],
                    [-122.48695850372314, 37.82931081282506],
                    [-122.48700141906738, 37.83080223556934],
                    [-122.48751640319824, 37.83168351665737],
                    [-122.48803138732912, 37.832158048267786],
                    [-122.48888969421387, 37.83297152392784],
                    [-122.48987674713133, 37.83263257682617],
                    [-122.49043464660643, 37.832937629287755],
                    [-122.49125003814696, 37.832429207817725],
                    [-122.49163627624512, 37.832564787218985],
                    [-122.49223709106445, 37.83337825839438],
                    [-122.49378204345702, 37.83368330777276]
                ]
            }
        }
    });

    map.addLayer({
        "id": "route",
        "type": "line",
        "interactive": true,
        "source": "route",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#0077aa",
            "line-width": 8
        }
    });
});

map.on('click', function (e) {
    // Use featresAt to get features within a given radius of the click event
    // Use layer option to avoid getting results from other layers
    map.featuresAt(e.point, {layer: 'route', radius: 10, includeGeometry: true}, function (err, features) {
        if (err) throw err;
        // if there are features within the given radius of the click event,
        // fly to the location of the click event
        if (features.length) {
          var tooltip = new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML("<h1>It's a line!</h1>")
            .addTo(map);
        }
    });
});

map.on('mousemove', function (e) {
    map.featuresAt(e.point, {layer: 'route', radius: 10}, function (err, features) {
        if (err) throw err;
        map.getCanvas().style.cursor = features.length ? "pointer" : "";
    });
});

</script>

</body>
</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.11.4/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<div id='map'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [-122.486052, 37.830348],
	zoom: 15
	});

	map.on('style.load', function () {
	map.addSource("route", {
	"type": "geojson",
	"data": {
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[-122.48369693756104, 37.83381888486939],
	[-122.48348236083984, 37.83317489144141],
	[-122.48339653015138, 37.83270036637107],
	[-122.48356819152832, 37.832056363179625],
	[-122.48404026031496, 37.83114119107971],
	[-122.48404026031496, 37.83049717427869],
	[-122.48348236083984, 37.829920943955045],
	[-122.48356819152832, 37.82954808664175],
	[-122.48507022857666, 37.82944639795659],
	[-122.48610019683838, 37.82880236636284],
	[-122.48695850372314, 37.82931081282506],
	[-122.48700141906738, 37.83080223556934],
	[-122.48751640319824, 37.83168351665737],
	[-122.48803138732912, 37.832158048267786],
	[-122.48888969421387, 37.83297152392784],
	[-122.48987674713133, 37.83263257682617],
	[-122.49043464660643, 37.832937629287755],
	[-122.49125003814696, 37.832429207817725],
	[-122.49163627624512, 37.832564787218985],
	[-122.49223709106445, 37.83337825839438],
	[-122.49378204345702, 37.83368330777276]
	]
	}
	}
	});

	map.addLayer({
	"id": "route",
	"type": "line",
	"interactive": true,
	"source": "route",
	"layout": {
	"line-join": "round",
	"line-cap": "round"
	},
	"paint": {
	"line-color": "#0077aa",
	"line-width": 8
	}
	});
	});

	map.on('click', function (e) {
	// Use featresAt to get features within a given radius of the click event
	// Use layer option to avoid getting results from other layers
	map.featuresAt(e.point, {layer: 'route', radius: 10, includeGeometry: true}, function (err, features) {
	if (err) throw err;
	// if there are features within the given radius of the click event,
	// fly to the location of the click event
	if (features.length) {
	var tooltip = new mapboxgl.Popup()
	.setLngLat(e.lngLat)
	.setHTML("<h1>It's a line!</h1>")
	.addTo(map);
	}
	});
	});

	map.on('mousemove', function (e) {
	map.featuresAt(e.point, {layer: 'route', radius: 10}, function (err, features) {
	if (err) throw err;
	map.getCanvas().style.cursor = features.length ? "pointer" : "";
	});
	});

	</script>

	</body>
	</html>