Mapbox style; addSource; addLayer

Show and hide layers Create a custom layer switcher to display different datasets.

<!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.32.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/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.eyJ1IjoidGtheW5lMjMiLCJhIjoiN2ZuVll5MCJ9.INSHe8gm7HMfO8HZPUuAhg';
var map = new mapboxgl.Map({
    container: 'map',
  	// use any style
    style: 'mapbox://styles/tkayne23/ciyt1ibkz000r2rpdp6qsobt7',
    center: [-100.789, 29.352],
    zoom: 13.9
});

map.on('load', function () {
  
  	// source is a TMK tileset
    map.addSource('laughlincombined4326', {
        type: 'vector',
        url: 'mapbox://tkayne23.5b9u73tj'
    });
  
  	// add a layer name from the tileset
    map.addLayer({
        'id': 'homes-outline',
        'type': 'line',
        'source': 'laughlincombined4326',
        'source-layer': 'LaughlinCombined4326-durrw3',
        'layout': {
            'visibility': 'visible',
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#877b59',
            'line-width': 1
        }
    });

});
</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js