example/example3/california-vector-tiles.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a third party vector tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin: 0px; padding: 0px; }
        #map { position: absolute; top: 0px; bottom: 0px; left: 300px; width: 100%; }
    </style>
</head>
<body>

  <div id="sidebar"></div>

  <div id='map'></div>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <script>

    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "simple-tiles": {
                    "type": "raster",
                    "tiles":["http://tile.stamen.com/toner/{z}/{x}/{y}.png"],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "simple-tiles",
                "minzoom": 0,
                "maxzoom": 19
            }]
        },
        zoom: 10.5,
        center: [-122.2, 37.8]
    });


    map.on('load', function() {
      map.addSource("vtile-source", {
        "type": "vector",
        // point to tiles being served from Amazon s3
        "tiles": ["https://s3-us-west-2.amazonaws.com/ross-vectortile/californiaa.mbtiles/{z}/{x}/{y}.pbf"]
      })


      // Add VecTiles source
      map.addLayer({
        // This id can be found in the metadata.json in the `.mbtiles` folder
        // as the json.id key
        "id": "California",
        "type": "fill",
        "source": "vtile-source",
        "source-layer": "California",
        "paint": {
            "fill-color":
                "blue"
        }
      });
    });
  </script>
</body>
</html>