blob: b39f6a297496e6bdc407d7f3fbfb2da8f4fcabae [file] [log] [blame]
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](
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.
tags || jsonb_build_object('building:height', (CASE
WHEN tags ->> 'building:levels' ~ '^[0-9\\.]+$'
THEN tags ->> 'building:levels'
ELSE '1' END)::real * 3),
FROM osm_ways
WHERE tags ? 'building'
This property is then used in
the [style.json]( file to
extrude the buildings.
"layers": [
"id": "building",
"type": "fill-extrusion",
"source": "baremaps",
"source-layer": "building",
"paint": {
"fill-extrusion-color": "rgb(152, 174, 221)",
"fill-extrusion-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](
for a 100MB tile cache.
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.