deck.gl geojson layer demo by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>deck.gl geojson layer demo</title>

  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
  
  <script src="https://unpkg.com/deck.gl@~5.2.0/deckgl.min.js"></script>  

<style>    
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

#tooltip:empty {
  display: none;
}
#tooltip {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  position: absolute;
  padding: 4px;
  margin: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  max-width: 300px;
  font-size: 10px;
  z-index: 9;
  pointer-events: none;
}    
    
</style>  
</head>

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

<script>
fetch('https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json')
.then(res => res.json())
.then(data => {  
  const geojsonLayer = new deck.GeoJsonLayer({
    data,
    opacity: 0.8,
    stroked: false,
    filled: true,
    extruded: true,
    wireframe: true,
    fp64: true,
    lightSettings: LIGHT_SETTINGS,
    
    getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,
    getFillColor: f => colorScale(f.properties.growth),
    getLineColor: f => [255, 255, 255],
    
    pickable: true,
    onHover: updateTooltip
  });

  new deck.DeckGL({
    mapboxAccessToken: '',
    mapStyle: 'https://free.tilehosting.com/styles/positron/style.json?key=U0iNgiZKlYdwvgs9UPm1',
    latitude: 49.254,
    longitude: -123.13,
    zoom: 11,
    maxZoom: 16,
    pitch: 45,
    layers: [geojsonLayer]
  });

});

const LIGHT_SETTINGS = {
  lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],
  ambientRatio: 0.2,
  diffuseRatio: 0.5,
  specularRatio: 0.3,
  lightsStrength: [1.0, 0.0, 2.0, 0.0],
  numberOfLights: 2
};

const COLOR_SCALE = [
  // negative
  [65, 182, 196],
  [127, 205, 187],
  [199, 233, 180],
  [237, 248, 177],

  // positive
  [255, 255, 204],
  [255, 237, 160],
  [254, 217, 118],
  [254, 178, 76],
  [253, 141, 60],
  [252, 78, 42],
  [227, 26, 28],
  [189, 0, 38],
  [128, 0, 38]
];

function colorScale(x) {
  const i = Math.round(x * 7) + 4;
  if (x < 0) {
    return COLOR_SCALE[i] || COLOR_SCALE[0];
  }
  return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];
}

function updateTooltip({x, y, object}) {
  const tooltip = document.getElementById('tooltip');

  if (object) {
    tooltip.style.top = `${y}px`;
    tooltip.style.left = `${x}px`;
    tooltip.innerHTML = `
<div><b>Average Property Value &nbsp;</b></div>
<div><div>${object.properties.valuePerSqm} / m<sup>2</sup></div></div>
<div><b>Growth</b></div>
<div>${Math.round(object.properties.growth * 100)}%</div>
`;
  } else { 
    tooltip.innerHTML = '';
  }
}
</script>
  
</body>
</html>