body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;    
}
/*
* https://deck.gl/docs/api-reference/extensions/terrain-extension
*/

const {Deck, TerrainLayer, GeoJsonLayer, _TerrainExtension} = deck;

const COLOR_SCHEME = {
  easy: [20, 200, 0],
  intermediate: [0, 80, 240],
  advanced: [235, 40, 0],
  other: [100, 100, 100]
};

new Deck({
  initialViewState: {
    longitude: 7.785,
    latitude: 45.985,
    zoom: 12,
    pitch: 55,
    bearing: 110
  },
  controller: {maxPitch: 89},
  pickingRadius: 3,
  layers: [
    new TerrainLayer({
      id: 'terrain-source',
      // Data source: https://www.mapzen.com/blog/terrain-tile-service/
      elevationData: 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png',
      elevationDecoder: {
        rScaler: 256,
        gScaler: 1,
        bScaler: 1 / 256,
        offset: -32768
      },
      texture: null,
      maxZoom: 14,
      material: {
        diffuse: 1
      },
      operation: 'terrain+draw'
    }),
    new GeoJsonLayer({
      id: 'zermatt-ski-trails',
      // Data source https://www.openstreetmap.org. Converted to GeoJSON with http://overpass-turbo.eu/ under ODbL.
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/ski.geojson',
      getLineColor: f => COLOR_SCHEME[f.properties.difficulty] || COLOR_SCHEME.other,
      getFillColor: f => COLOR_SCHEME[f.properties.difficulty] || COLOR_SCHEME.other,
      getLineWidth: 20,
      stroked: false,
      getPointRadius: 50,
      lineWidthMinPixels: 2,
      pointType: 'circle',
      pickable: true,
      autoHighlight: true,
      highlightColor: [255, 200, 0],
      extensions: [new _TerrainExtension()]
    })
  ],
  getTooltip
});

function getTooltip({object}) {
  return object && `\
    ${object.properties.name || ''} (${object.properties.type})
    Difficulty: ${object.properties.difficulty || 'Not rated'}`;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/deck.gl@^8.9.0/dist.min.js