example/index.html

<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>osmzen example</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <style>
      body {
        margin: 0;
        border: 0;
        padding: 0;
      }

      #map {
        height: 100%;
        width: 100%;
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/tangram@0.21.1/dist/tangram.min.js"></script>
    <script src="https://unpkg.com/lodash@4.17.20/lodash.js"></script>

    <script>
      let map = L.map('map', {
        minZoom: 15,
        maxZoom: 18,
      });

      if (window.location.hash) {
        let parts = window.location.hash.substring(1).split('/');
        map.setView([parts[2], parts[1]], parts[0]);
      } else {
        map.setView([37.82502, -122.25466], 17);
      }

      map.on('move', _.throttle(() => {
        window.location.hash = [
          map.getZoom().toFixed(2),
          map.getCenter().lng.toFixed(4),
          map.getCenter().lat.toFixed(4)
        ].join('/')
      }, 500))

      let tangramLayer = Tangram.leafletLayer({
        attribution: '<a href="https://github.com/tangrams" target="_blank">Tangram</a> | <a href="http://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        scene: {
          import: [
            'https://tangrams.github.io/bubble-wrap/bubble-wrap-style.yaml',
            'https://tangrams.github.io/bubble-wrap/themes/label-10.yaml'
          ],
          sources: {
            mapzen: {
              type: 'GeoJSON',
              url: window.location.origin + '/tiles/{z}/{x}/{y}.json',
              tile_size: 256,
              min_zoom: 15,
              max_zoom: 18,
              min_display_zoom: 15,
              max_display_zoom: 18
            }
          }
        }
      });

      tangramLayer.addTo(map);
    </script>
  </body>
</html>