Web 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.6.0/leaflet.css
https://cdn.protomaps.com/leaflet/1.6.0/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, majorroad, mediumroad, 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.6.0/leaflet.css" />
<script src="https://cdn.protomaps.com/leaflet/1.6.0/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.

MapboxGL

To use MapboxGL, embed on your page:

<link rel="stylesheet" href="https://cdn.protomaps.com/mapbox-gl-js/1.8.0/mapbox-gl.css" integrity="sha384-hA8DiLlBPc66p22tExfBNlfvPjhPR7uLymTlWBr9tlH5mqWYJDerJpGUNlqU3ne6" crossorigin="anonymous">
<script src="https://cdn.protomaps.com/mapbox-gl-js/1.8.0/mapbox-gl.js" integrity="sha384-+OoYp/YzRKWaa9wH3YadmXwczp/YB8E+l8ekdzF7KqXX5bm9pMmkJYgDiZj/2WSd" 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