Extrusion of vector tiles from OSM data

This example builds upon the OpenStreetMap example 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 (opens in a new tab) 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.

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 (opens in a new tab) 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": [
          "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 (opens in a new tab) 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

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.

Import Natural Earth data into PostGIS Create an IP to location web service