deck.gl MVT zoom & subLayer visible

deck-gl-mvt-zoom-sublayer-visible.markdown

deck.gl MVT zoom & subLayer visible

A Pen by fifzteen on CodePen.

License.

index.html

<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" rel="stylesheet">
<div id="map"></div>
<span id="zoom">zoom: 5</span>

script.js

const { DeckGL, MVTLayer, GeoJsonLayer } = deck
let zoom = 5
const center = [139.759894, 35.692182]
const initialViewState = {
    longitude: center[0],
    latitude: center[1],
    zoom: zoom,
    pitch: 0,
    bearing: 0,
}

const deckGl = new DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState,
  controller: true,
  onViewStateChange: ({viewState}) => {
    zoom = viewState.zoom
    document.getElementById('zoom').innerText = `zoom: ${zoom}`
    setLayers()
  }
})

const setLayers = () => {
  deckGl.setProps({
    layers: [
      new MVTLayer({
        id: 'gsi_vector',
        data: 'https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf',
        minZoom: 4,
        maxZoom: 16,
        lineWidthUnits: 'pixels',
        pointRadiusUnits: 'pixels',
        getLineColor: [128, 128, 128, 255],
        getLineWidth: 2,
        getFillColor: [0, 255, 231, 64],
        updateTriggers: {
          renderSubLayers: zoom,
        },
        renderSubLayers: (props) => {
          return [
            new GeoJsonLayer(props),
            new GeoJsonLayer({
              ...props,
              id: `${props.id}_point`,
              visible: zoom >= 14,
              getFillColor: [0, 0, 255, 128],
              getRadius: 5,
            })
          ]
        },
      })
    ]
  })
}

setLayers()

scripts

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

style.css

body {
  width: 95vw;
  height: 95vh;
}
#map {
  width: 100%;
  height: 100%;
}
#zoom {
  position: absolute;
  top: 4;
  left: 4;
}