Skip to main content

Building footprints - constricting zoom extents

Generally, for building footprints, we estimate that tilesets need to be generated between zoom 13 and zoom 15. We have chosen a value of 13 for minzoom based on the following considerations and assumptions:

  • It is reasonable to have about 50,000 features in a tile
  • A building lot is approximately 5,000 square feet
  • A single map tile at zoom 13 should be about 50,000 * 5,000, which is 250,000,000 square feet.

Thus, at zoom 13, it's likely that a tile could contain all building footprints without dropping any features. Any zoom level lower than that (z0-z12) would drop features because the density of data exceeds the feature capacity of a single tile.

We can conclude that an appropriate value for maxzoom is 15 because it is a one foot resolution on the ground.

Below is an ideal recipe for building footprints.

{
"version": 1,
"layers": {
"building_footprints": {
"source": "mapbox://tileset-source/{username}/building-footprints",
"minzoom": 13,
"maxzoom": 15
}
}
}

US Building Footprints

The US building footprints dataset from Microsoft data can be used to create a tileset that contains building footprints, in this example, we'll be pulling data from Rhode Island.

The map on the left is the building footprints tileset generated with a minzoom of 10 and maxzoom of 15. The map on the right is the building footprints tileset generated with the sample recipe above (minzoom of 13 and maxzoom of 15). If you zoom out, you'll see that the footprint data on the right disappears at zoom 13 and the building data on the left disappears at zoom 10. This is because of the differing minzoom values of the right versus left tileset. You can see that it is not beneficial to view the building footprint data at zoom 10, thus the optimal minzoom is 13.

Using the Tilesets CLI to generate a tileset

This section describes how to use the Tilesets CLI to generate a tileset.

  1. Download the data you'll use to create the tileset:
arrow-downDownload line-delimited GeoJSON
  1. Create a tileset source named building-footprints with the data you downloaded
tilesets upload-source username building-footprints ~/your/local/path/RhodeIsland.ldgeojson
  1. Create your recipe as a local JSON file (for example building-footprints-recipe.json) with your building-footprints tileset source
{
"version": 1,
"layers": {
"building_footprints": {
"source": "mapbox://tileset-source/username/building-footprints",
"minzoom": 13,
"maxzoom": 15
}
}
}
  1. Create a tileset with the id username.building-footprints-zoom using your recipe and name it "building footprints". This will be an empty tileset to start, until you publish it.
tilesets create username.building-footprints-zoom --recipe ~/your/local/path/building-footprints-recipe.json --name "building footprints"
  1. Now you're ready to publish your tileset and start processing your data
tilesets publish username.building-footprints-zoom

Preview your tileset

  1. You can now add your new tileset to a map style to visualize its data. Below is an example of how to add the username.building-footprints-zoom tileset as a vector tile source to a Mapbox GL JS map style.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building footprints - constricting zoom extents</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 14,
center: [-71.4935, 41.5852]
});

map.on('load', () => {
// Add a source using the tileset you created.
map.addSource('my-building-footprints', {
type: 'vector',
url: 'mapbox://examples.building-footprints-zoom'
});
// Use the source to add a layer to the map.
map.addLayer({
'id': 'buildings-i1',
'type': 'line',
'source': 'my-building-footprints',
'source-layer': 'building_footprints',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#ff69b4',
'line-width': 1
}
});
});
</script>

</body>
</html>

Recipe options used

FieldDescriptionData type
** source**The source data to use for this layer. Tileset sources are created with the Create a tileset source endpoint of Mapbox Tiling Service (MTS).String
minzoomSpecify the minimum zoom at which the data in your tileset will be available. A value of 13 here ensures that the buildings will be visible when a user has zoomed in significantly.Integer
maxzoomSpecify the maximum zoom at which the data your tileset will be tiled. Your map can be viewed past this zoom level because of overzooming, but the data at zoom levels greater than the maxzoom will be less precise. A value of 15 here ensures that the buildings will be visible when a user has zoomed in significantly.Integer
Was this example helpful?