Driving: clear roads,
fuel and charging.
Wide roads in strong colours with motorway numbers, fuel stations, charging stations and car parks, on a calm background. One style URL for MapLibre GL JS, for delivery, fleet, travel and car apps, and for routes drawn on top.
- 100'000 map tiles a month free
- Fewer tiles: no terrain
- Labels in 41 languages
What the map shows
- Motorways, main roads and links wider than in the other styles, in orange and yellow, with motorway and road numbers.
- Fuel stations and charging stations from zoom 12, car parks from zoom 14.
- Tunnels, bridges, one-way arrows, railways, places and water.
- Land use in pale colours, so that roads and your own routes stand out.
The data comes from OpenStreetMap and is updated every week. The style has no terrain, so it loads only vector tiles: the first view of Zurich at zoom 11.3, 1280 × 720 pixels, loaded 6 tiles.
Add it to your page
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css">
<div id="map"></div>
<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.mjs";
const map = new maplibregl.Map({
container: "map",
style: "https://api.overpass.ch/v1/YOUR_KEY/maps/styles/driving.json",
center: [8.5, 47.41],
zoom: 11
});
map.addControl(new maplibregl.NavigationControl());
// a route from your routing service, as a GeoJSON line
map.on("load", () => {
map.addSource("route", { type: "geojson", data: route });
map.addLayer({ id: "route", type: "line", source: "route",
layout: { "line-cap": "round", "line-join": "round" },
paint: { "line-color": "#1f5fbf", "line-width": 6, "line-opacity": 0.8 } });
});
</script>
?lang=desets the label language; 41 languages are available, and places without a name in that language show their local name.- Give the
#mapelement a height in your stylesheet. - overpass.ch has no routing API. Draw the routes of your routing service on top, as above.
Moving from Mapbox? See from Mapbox GL JS to MapLibre GL JS. In React: react-map-gl with MapLibre. Endpoints are in the documentation.
What to expect
- The vector tiles go up to zoom 14 and are enlarged closer in. House numbers and most shops are missing at street level; fuel, charging and parking are there.
- The map has no traffic layer, speed limits or satellite view.
- The style uses a second set of icons and needs MapLibre GL JS; other libraries may show the map without them.
Maps plans
Every account includes 100'000 map tiles a month, for every style. Maps Small has 2 million for CHF 9 a month. How that compares.
Maps Free
- Map tiles / month100'000
- Map tiles / minute1'200
- Elevation lookups / month1 million
- Commercial use
- World map, updated weekly
- Our outdoor, marine, relief and driving styles
- 5 Protomaps styles, labels in 41 languages
- 3D terrain, hillshading, contour lines
- Elevation API included
- No e-mail support
Maps Small
- Map tiles / month2 million
- Map tiles / minuteUnlimited
- Elevation lookups / month50 million
- Commercial use
- World map, updated weekly
- Our outdoor, marine, relief and driving styles
- 5 Protomaps styles, labels in 41 languages
- 3D terrain, hillshading, contour lines
- Elevation API included
- E-mail support
Maps Medium
- Map tiles / month10 million
- Map tiles / minuteUnlimited
- Elevation lookups / month200 million
- Commercial use
- World map, updated weekly
- Our outdoor, marine, relief and driving styles
- 5 Protomaps styles, labels in 41 languages
- 3D terrain, hillshading, contour lines
- Elevation API included
- Priority e-mail support
Maps Large
- Map tiles / month40 million
- Map tiles / minuteUnlimited
- Elevation lookups / month500 million
- Commercial use
- World map, updated weekly
- Our outdoor, marine, relief and driving styles
- 5 Protomaps styles, labels in 41 languages
- 3D terrain, hillshading, contour lines
- Elevation API included
- Priority support
Our four styles
Outdoor
Trails by SAC grade in the Swiss colours, huts, stops, drinking water, peaks with their height and contour lines.
Marine
The sea coloured by depth, depth contours, lighthouses, buoys and beacons in their colours, harbours and ferry routes.
Relief
The land coloured by height, from green lowlands to rock and snow, with hillshading and contour lines.
Driving
Wide, clear roads with motorway numbers, fuel stations, charging stations and car parks.
Pictures: © OpenStreetMap contributors · Protomaps · Copernicus WorldDEM™-90 © DLR, Airbus · GEBCO
Map data © OpenStreetMap contributors. Style based on Protomaps. The style shows these credits in a corner of the map; keep them visible.