src/pages/documentation/examples/extrusion.mdx

---
layout: default
title: Extrusion of vector tiles from OSM data
---

# Extrusion of vector tiles from OSM data

This example builds upon the [OpenStreetMap example](/documentation/examples/import-osm-into-postgis/) and shows how 3d
buildings can be extruded with Maplibre. First, start by downloading the OSM data for London in the current directory.

To import London data in the database.

```
cd examples/extrusion
baremaps workflow execute --file workflow.json
```

In the [tileset.json](https://raw.githubusercontent.com/apache/incubator-baremaps/main/examples/extrusion/tileset.json)
file, notice the SQL query associated with the building layer. Here, the number of levels stored in OSM is multiplied by
3, which roughly corresponds to the height of a level in meters.

```sql
SELECT id,
       tags || jsonb_build_object('building:height', (CASE
                                                          WHEN tags ->> 'building:levels' ~ '^[0-9\\.]+$'
                                                              THEN tags ->> 'building:levels'
                                                          ELSE '1' END)::real * 3),
       geom
FROM osm_ways
WHERE tags ? 'building'
```

This property is then used in
the [style.json](https://raw.githubusercontent.com/apache/incubator-baremaps/main/examples/extrusion/style.json) file to
extrude the buildings.

```json
{
  ...
  "layers": [
    {
      "id": "building",
      "type": "fill-extrusion",
      "source": "baremaps",
      "source-layer": "building",
      "paint": {
        "fill-extrusion-color": "rgb(152, 174, 221)",
        "fill-extrusion-height": [
          "get",
          "building:height"
        ],
        "fill-extrusion-base": 0,
        "fill-extrusion-opacity": 0.9
      }
    }
  ],
  ...
}
```

To preview this example, start the tile viewer. Here, the cache directive is
a [caffeine specification](https://www.javadoc.io/doc/com.github.ben-manes.caffeine/caffeine/2.2.2/com/github/benmanes/caffeine/cache/CaffeineSpec.html)
for a 100MB tile cache.

```shell
baremaps map dev \
  --tileset 'tileset.json' \
  --style 'style.json'
```

Well done, a map of London with extruded buildings should now appear in your [browser](http://localhost:9000/)!

![Tile viewer](/images/extrusion.png)

## Conclusion

In this tutorial, we learnt how to import OSM data in PostGIS with a workflow and then use the MVT specification to extrude the vector tiles into a 3d object.