Docs: Web Maps API OSM Express
Index

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-lite/0.0.5/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-lite/0.0.5/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