Skip to main content

Maps API

Overview#

The Protomaps Map API is a hosted, CDN-accelerated web service for interactive maps on the web. The Map API serves square Web Mercator tiles based on the MVT Vector Tiles specification : vector-tile-spec

Endpoints#

The Protomaps Map API is under heavy development.

  • Access requires an API key.
  • Requests made from a web browser are subject to Cross-Origin Resource Sharing (CORS) limitations. The list of allowed sites can be set per API key at the Dashboard.

The URL for accessing map tiles is:

https://api.protomaps.com/tiles/v1/{z}/{x}/{y}.pbf?key=<YOUR API KEY>

Other assets such as JavaScript Libraries, map styles, and fonts, can be included from the cdn.protomaps.com subdomain. These requests do not need an API key.

Examples:

https://cdn.protomaps.com/leaflet/1.7.1/leaflet.css
https://cdn.protomaps.com/leaflet/1.7.1/leaflet.js
https://cdn.protomaps.com/tangram/0.21.0/tangram.min.js
https://cdn.protomaps.com/styles/0.0.3/light.yml

Vector Tile Layers & Tags#

Protomaps vector tiles are organized into the following layers:

  • natural (polygon)
    • Physical features like forests, wetlands and glaciers
  • landuse (polygon)
    • Manmade physical features like parks as well as abstract designations such as residential areas.
  • water (polygon)
    • Lakes, oceans, wide rivers, man made bodies of water such as pools, reservoirs
  • buildings (polygon)
  • physical_line (line)
    • Embankments, waterway centerlines
  • transit (line)
  • roads (line)
    • includes a pmap:kind key, which is one of highway, major_road, medium_road, minor_road, other
  • admin (line)
    • Human-defined boundaries - countries and administrative divisions
  • physical_point (point)
    • Label points for seas, mountain peaks
  • place (point)
    • Human-defined label points for neighborhoods, cities, countries and neighborhoods
  • poi (point)
    • Zoom level 14 and above

Renderers#

A map rendering library is needed to display interactive maps on the web. The Protomaps Map API is designed to work with any renderer that supports MVT format tiles, including:

TangramJS#

To use TangramJS, embed on your page:

<link rel="stylesheet" href="https://cdn.protomaps.com/leaflet/1.7.1/leaflet.css" />
<script src="https://cdn.protomaps.com/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdn.protomaps.com/tangram/0.21.0/tangram.min.js"></script>

See light.yml for an example on how to style a Tangram map based on these layers. More documentation is forthcoming.

MapLibre GL#

To use MapLibre GL JS, embed on your page:

<link rel="stylesheet" href="https://cdn.protomaps.com/maplibre-gl-js/1.13.0pm1/mapbox-gl.css" crossorigin="anonymous">
<script src="https://cdn.protomaps.com/maplibre-gl-js/1.13.0pm1/mapbox-gl.js" crossorigin="anonymous"></script>

A library of styles for the MapboxGL renderer is coming soon. For an example of a "debug" map that renders each feature in its own color, see debug.json.

OpenLayers#

Coming soon