tests/debug-leaflet.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Martin Debug Page</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

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

    <script>
      var map = L.map('map').setView([0, 0], 5);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);

      L.vectorGrid
        .protobuf('http://localhost:3000/table_source/{z}/{x}/{y}', {
          vectorTileLayerStyles: {
            'table_source': {
              color: 'black',
              fill: true,
              fillColor: 'black',
              fillOpacity: 1,
            },
          },
        })
        .addTo(map);
    </script>
  </body>
</html>