Map styles / Navigator

Navigator map style

Navigation-first with strong road hierarchy. Pan and zoom the live map below.

About Navigator

A warm cream base, bright blue water, bold motorways and trunk roads, and points of interest where they help wayfinding. Road labels and shields are prioritised over everything else.

Best for: Directions, delivery tracking and logistics apps.

Like every ExpressMaps style, Navigator is served as vector tiles built from OpenStreetMap data, so it stays crisp on high-density screens, supports rotation and tilt, and works with MapLibre GL JS, Mapbox GL JS, OpenLayers and Leaflet. The style is a standard MapLibre style document, so you can also download it, change the colours and host your own variant.

Use this style on your site

Paste this into your page and replace YOUR_API_KEY with a key from your console. New accounts get 100,000 map loads a month free, no card required.

<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
  var map = new maplibregl.Map({
    container: 'map',
    style: 'https://tiles.expressmaps.com/styles/navigator.json?key=YOUR_API_KEY',
    center: [-118.2437, 34.0522],
    zoom: 12
  });
  map.addControl(new maplibregl.NavigationControl());
</script>

Style URL: https://tiles.expressmaps.com/styles/navigator.json?key=YOUR_API_KEY

Open in the embed generator Get a free API key

At three zoom levels

Street level

Navigator map style, Street level

City

Navigator map style, City

Region

Navigator map style, Region