CartoLayer Dropping Features

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>CartoLayer Dropping Fetaures</title>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></script>

    <!-- jsFiddle will insert css and js -->
  </head>

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

</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

deck.carto.setDefaultCredentials({
  accessToken: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImRVNGNZTHAwaThjYnVMNkd0LTE0diJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImZwYWxtZXJAY2FydG9kYi5jb20iLCJodHRwOi8vYXBwLmNhcnRvLmNvbS9hY2NvdW50X2lkIjoiYWNfN3hoZnd5bWwiLCJpc3MiOiJodHRwczovL2F1dGguY2FydG8uY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTA3OTY5NjU1OTI5NjExMjIxNDg2IiwiYXVkIjoiY2FydG8tY2xvdWQtbmF0aXZlLWFwaSIsImlhdCI6MTY3NTMyODQ2OSwiZXhwIjoxNjc1NDE0ODY5LCJhenAiOiJBdHh2SERldVhsUjhYUGZGMm5qMlV2MkkyOXB2bUN4dSIsInBlcm1pc3Npb25zIjpbImV4ZWN1dGU6d29ya2Zsb3dzIiwicmVhZDphY2NvdW50IiwicmVhZDphcHBzIiwicmVhZDpjb25uZWN0aW9ucyIsInJlYWQ6Y3VycmVudF91c2VyIiwicmVhZDppbXBvcnRzIiwicmVhZDpsaXN0ZWRfYXBwcyIsInJlYWQ6bWFwcyIsInJlYWQ6dGlsZXNldHMiLCJyZWFkOnRva2VucyIsInJlYWQ6d29ya2Zsb3dzIiwidXBkYXRlOmN1cnJlbnRfdXNlciIsIndyaXRlOmFwcHMiLCJ3cml0ZTpjb25uZWN0aW9ucyIsIndyaXRlOmltcG9ydHMiLCJ3cml0ZTptYXBzIiwid3JpdGU6dG9rZW5zIiwid3JpdGU6d29ya2Zsb3dzIl19.W3x0XDXPkDTT_kT_eFInfOs0IsxDQPAy2W1kQPvq32LylT_SA2bSvofhjbC3TuQsGpblvwGW_UpZN4Ce5PmUQ7DfrhrUcbV_rZBww7HkhEByahH7FiwunlOIKXLiJ7_FMXiCy4rXGPu5EKejfd7fc7NDgRKo20hjupNUjoslV5fsmfm6dmDsruYlp3cQ2PDhqKRKbKhy-GFWbWB3f2tII17kUbfnV8CU9xnfr8LiCzE2vP3GeqkhvnIxWGDjjWKgDzgJCEYKEqseZ-lfC5ZKXZuIi7CNF44IElH2iBukEhu0FnmUHU85Le1GVv24n6seHuQF81V3bVvcHyQGY4Cu8g',
});

// const {registerLoaders} = globalThis.loaders;


// Use custom loader to extract headers
const CustomLoader = {
  name: 'WithHeaders',
  module: 'carto',
  category: 'geometry',
  extensions: [],
  mimeTypes: ['application/vnd.carto-vector-tile'],
  parse: async (arrayBuffer, options, context) => {
    const isDroppingFeatures = context.response.headers['features-dropped-from-tile'];
    console.log('isDroppingFeatures', isDroppingFeatures);
    const result = await context.parse(arrayBuffer, options, context);
    return result ? { ...result, isDroppingFeatures } : null;
  }
}
// registerLoaders(CustomLoader);

const layers = [
  new deck.carto.CartoLayer({
    id: 'carto',
    loaders: [CustomLoader],
    type:...