Bug

by felixp

HTML

<html>
​
<head>
  <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/[email protected]/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
</head>

<body style="margin: 0; padding: 0">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
  <a href="https://carto.com" title="CARTO" target="_blank">
    <img src="carto-logo.svg" style="position: absolute; bottom: 10px; left: 20px" />
  </a>
</body>

</html>

CSS

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

JavaScript

const cartoMapId = 'bcc1a325-57b9-4d89-beec-0b817c0b8ad6';
deck.carto
  .fetchMap({
    cartoMapId: "58fa7173-410a-443e-92b0-d8becdc95a2a"
  })
  .then(({
    initialViewState,
    mapStyle,
    layers
  }) => {
    const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;

    let mapLayers = layers.map((l) =>
      l.clone({
        pickable: false,
        parameters: {
          depthTest: false
        }
      })
    );
    //).reverse();

    const deckgl = new deck.DeckGL({
      container: "map",
      map: maplibregl,
      controller: true,
      mapStyle: MAP_STYLE,
      initialViewState,
      layers: mapLayers,
      // layerFilter: ({ layer, viewport }) => {
      //   if (
      //     viewport.zoom < 15 &&
      //     (layer.props.cartoLabel === "la nave marker-label-label" ||
      //       layer.props.cartoLabel === "subway_point-label-label")
      //   ) {
      //     return false;
      //   }
      //   return true;
      //},
    });
  });