Create custom vector tiles from OpenStreetMap and other data sources with Postgis and Java.

Star Download

Extrusion Example

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.

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 rawly 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 \
  --database 'jdbc:postgresql://localhost:5432/baremaps?user=baremaps&password=baremaps' \
  --tileset 'tileset.json' \
  --style 'style.json'

Well done, a map of London with extruded buildings should now appear in your browser!

Tile viewer

Improve this page