deck.gl ScenegraphLayer

deck-gl-scenegraphlayer.markdown

deck.gl ScenegraphLayer

A Pen by murat aka on CodePen.

License.

script.js

/*
* https://deck.gl/docs/api-reference/mesh-layers/scenegraph-layer
*/
const {DeckGL, ScenegraphLayer} = deck;

const layer = new ScenegraphLayer({
  id: 'ScenegraphLayer',
  data: [
  {"name":"Lafayette (LAFY)","code":"LF","address":"3601 Deer Hill Road, Lafayette CA 94549","entries":"3481","exits":"3616","coordinates":[-122.123801,37.893394]}],
  
  /* props from ScenegraphLayer class */
  
  _animations: {
    '*': {speed: 5}
  },
  _lighting: 'pbr',
  // getAnimator: null,
  // getColor: [255, 255, 255, 255],
  getOrientation: d => [0, Math.random() * 180, 90],
  getPosition: d => d.coordinates,
  // getScale: [1, 1, 1],
  // getScene: null,
  // getTransformMatrix: [],
  // getTranslation: [0, 0, 0],
  // loaders: ,
  scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
  // sizeMaxPixels: Number.MAX_SAFE_INTEGER,
  // sizeMinPixels: 0,
  sizeScale: 500,
  
  /* props inherited from Layer class */
  
  // autoHighlight: false,
  // coordinateOrigin: [0, 0, 0],
  // coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
  // highlightColor: [0, 0, 128, 128],
  // modelMatrix: null,
  // opacity: 1,
  pickable: true,
  // visible: true,
  // wrapLongitude: false,
});

new DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    maxZoom: 20,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  getTooltip: ({object}) => object && `${object.name}
${object.address}`,
  layers: [layer]
});
  

scripts

<script src="https://api.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 {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  .deck-tooltip {
    font-size: 0.8em;
    font-family: Helvetica, Arial, sans-serif;
  }