help with MVT Scatterplot example

[cornhundred]

Hi, I am trying to reproduce a scatterplot example from this very nice blogpost using public MVT data that is hosted on Mapbox and my code is being run on ObservableHQ (see notebook). The code from the blogpost that produces the scatterplot is

const scatter_layer =  new TileLayer({
      id: "assessment-NR",
      type: TileLayer,
      getTileData: ({x, y, z}) => {
        const mapSource = `https://a.tiles.mapbox.com/v4/saadiqm.azk20mv4/${z}/${x}/${y}.vector.pbf?access_token=${MAPBOX_ACCESS_TOKEN}`;
        return fetch(mapSource)
          .then(response => response.arrayBuffer())
          .then(buffer => {
            const tile = new VectorTile(new Protobuf(buffer));

            const features = [];
            let vectorTileLayer = tile.layers["NR"]

            for (let i = 0; i < vectorTileLayer.length; i++) {
              const vectorTileFeature = vectorTileLayer.feature(i);
              const feature = vectorTileFeature.toGeoJSON(x, y, z);
              features.push(feature);
            }
            return features;
          });
      },
      onTileError:(e) => console.error(e),
      maxZoom:14,
      onHover: info => this.setState({
       hoveredObject: info.object,
       pointerX: info.x,
       pointerY: info.y
      }),
      renderSubLayers: props => {
        return new ScatterplotLayer(props,{
            opacity:0.5,
            pickable: true,
            getLineWidth:0,
            radiusScale: Math.pow(2, Math.max(14 - this.state.zoom, 0)),
            radiusMinPixels: 1,
            radiusMaxPixels:90,
            getPosition: d => d.geometry.coordinates,
            getFillColor: d => [66, 135, 245],
            getRadius: d => Math.sqrt(d.properties.NR_ASSESSED_VALUE)/500,
          });
        }
      })

but when I try this on ObservableHQ I am seeing the following error in the console

TypeError: VectorTile is not a constructor

and I'm importing VectorTile using VectorTile = require('https://bundle.run/@mapbox/vector-tile@1.3.1'). Am I importing the VectorTile library incorrectly?

Also, is there a more straightforward method to visualize this data using the MVTLayer directly and if so are there any examples available of how to do this?

[Pessimistress]

Am I importing the VectorTile library incorrectly?

@mapbox/vector-tile is not a deck.gl library, you are asking in the wrong place.

is there a more straightforward method to visualize this data using the MVTLayer directly and if so are there any examples available of how to do this?

https://deck.gl/docs/api-reference/geo-layers/mvt-layer

[cornhundred]

Thanks @Pessimistress

[cornhundred]

I was able to get it working using the following ObservableHQ notebook

  // MVT Layer
  const scatter_layer = new deck.MVTLayer({
    id: 'MVTLayer',
    data: [
      `https://raw.githubusercontent.com/cornhundred/vector_tile_pbf_test/master/NR2019-pC-PBF/{z}/{x}/{y}.pbf` 
    ],
    getLineColor: [255, 0, 0],
    lineWidthMinPixels: 5,
  });