Figure-ground map

Every building in black, and everything else, from streets and squares to courtyards and parks, in white. Architects call it a figure-ground map, and use it to see a city's open spaces as shapes of their own. Giambattista Nolli drew Rome this way in 1748, and this map starts where his did, around the Pantheon.

Build it yourself

The map uses a style of its own: a white background and one fill layer of the tiles' buildings, in black. It was tested with MapLibre GL JS 6.15 in Chromium.

What you need

Nothing but a web server to serve the page: the map tiles need no key.

Make the page

Make a folder, and in it index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Figure-ground map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/dist/maplibre-gl.css">
  </head>
  <body style="margin: 0">
    <div id="map" style="height: 100vh"></div>
    <script type="module">
      import * as maplibregl from "https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/+esm";

      const map = new maplibregl.Map({
        container: "map",
        style: {
          version: 8,
          sources: {
            protomaps: { type: "vector", url: "https://tiles.mapricot.com/planet.json" },
          },
          layers: [
            { id: "background", type: "background", paint: { "background-color": "#ffffff" } },
            {
              id: "buildings",
              type: "fill",
              source: "protomaps",
              "source-layer": "buildings",
              paint: { "fill-color": "#212529" },
            },
          ],
        },
        center: [12.4768, 41.8986],
        zoom: 15,
        minZoom: 13,
      });
      map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
    </script>
  </body>
</html>

• The style has one source, Mapricot's tiles, and two layers. Everything the buildings don't cover shows the white background.
• The tiles leave out small buildings when zoomed out, so minZoom stops the map at the scale of a neighborhood.

Open it

Serve the folder with npx serve or python3 -m http.server, and open the address it prints. Opened straight from the file, the map stays blank, as Open the page explains. You should see the streets and squares around the Pantheon, in white between black buildings.

To add the search box, copy the form and its script from Every road in a city. To raise the same buildings to their heights instead, see Skylines in 3D.

Data

• Buildings: OpenStreetMap contributors (ODbL), in Mapricot's map tiles
• Place search: Mapricot's geocoding, from OpenStreetMap, OpenAddresses, Who's On First, and GeoNames