Building floors

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>deck.gl+Google</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

    <script>
      const FOOTPRINT = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {},
          "geometry": {
            "coordinates": [
              [
                [
                  -3.705741617703808,
                  40.420466556967796
                ],
                [
                  -3.70572993049754,
                  40.42048053882911
                ],
                [
                  -3.7056831816703664,
                  40.420929227941826
                ],
                [
                  -3.7057282608963646,
                  40.420953378262595
                ],
                [
                  -3.7062157843781733,
                  40.42066230276811
                ],
                [
                  -3.706220793181757,
                  40.42064450771883
                ],
                [
                  -3.705950317824886,
                  40.42047926775152
                ],
                [
                  -3.705741617703808,
                  40.420466556967796
                ]
              ]
            ],
            "type": "Polygon"
          }
        }]
      }

    </script>
    <!-- jsFiddle will insert css and js -->
  </head>

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

</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

/** Hacky way to apply height offset to GeoJSON polygon **/
function applyHeightOffset(geojson, offset = 0) {
  // Clone 
  const result = JSON.parse(JSON.stringify(geojson));
  for (const {geometry} of result.features) {
    geometry.coordinates[0] = geometry.coordinates[0].map(c => [c[0], c[1], (c[2] || 0) + offset]);
  }
  return result;
}

const floorHeights = [0, 10, 20, 30, 40, 50];

const layers = floorHeights.map(height => 
  new deck.GeoJsonLayer({
    id: `floor-${height}`,
    data: applyHeightOffset(FOOTPRINT, height),
    filled: true,
    getFillColor: [100 + height * 3, 0, 80, 180 - height * 2],
    getElevation: 10,
    extruded: true,
    pickable: true,
    autoHighlight: true,
    wireframe: true
  })
); 

const deckgl = new deck.DeckGL({
  container: 'map',
  controller: true,
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState: {longitude: -3.705741, latitude: 40.420466, zoom: 18, pitch: 45},
  layers
});