Skip to content

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrude-height paint property.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Extrude polygons for 3D indoor mapping</title>
    <meta property="og:description" content="Create a 3D indoor map with the fill-extrude-height paint property." />

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const map = new trackasiagl.Map({
        container: 'map',
        style: 'https://maps.track-asia.com/styles/v2/simple.json?key=public_key',
        center: {lng: 106.7479216, lat: 10.7950349},
        zoom: 16.99,
        pitch: 40,
        bearing: 20,
        canvasContextAttributes: { antialias: true }
      });

      map.on('load', () => {
        map.addSource('floorplan', {
          'type': 'geojson',
          'data': 'https://docs.track-asia.com/assets/indoor-3d-map.geojson'
        });
        map.addLayer({
          'id': 'room-extrusion',
          'type': 'fill-extrusion',
          'source': 'floorplan',
          'paint': {

            // Get the fill-extrusion-color from the source 'color' property.
            'fill-extrusion-color': ['get', 'color'],

            // Get fill-extrusion-height from the source 'height' property.
            'fill-extrusion-height': ['get', 'height'],

            // Get fill-extrusion-base from the source 'base_height' property.
            'fill-extrusion-base': ['get', 'base_height'],

            // Make extrusions slightly opaque for see through indoor walls.
            'fill-extrusion-opacity': 0.5
          }
        });
      });
    </script>
  </body>

</html>