index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>東京都Vector Tile</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.6.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>
            var map = new mapboxgl.Map({
                container: 'map',
                style: './style.json',
                zoom: 14,
                center: [139.69167, 35.689444],
                hash: true,
                antialias: false
            });
            var nav = new mapboxgl.NavigationControl();
            map.addControl(nav, 'top-left');
            var scale = new mapboxgl.ScaleControl();
            map.addControl(scale, 'bottom-left');
            map.addControl(new mapboxgl.GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true
                }
            }), 'top-left');
        </script>

    </body>
</html>