Map styles

Geoapify offers OpenStreetMap tiles for your maps. You can choose between different OpenStreetMap styles and colors. In the table below, you can find map tile server links for your projects.

OpenStreetMap styles URLs

You can create a map using a ZXY-link of a tile server or by providing the map style file:

  • The style.json file is compatible with the Mapbox style specification so that you can use it in all modern map libraries, for example, in MapLibre GL.
  • On the other hand, the ZYX-links are a more conventional and standard way to create map tile layers. This way, you can create raster map tile layers, for example for Leaflet map or QGIS.

To use Geoapify map tile servers, you will need an API key. You can start for Free and extend when you grow. Learn how to get an API key on Getting Started page.

Map Style ID Type Preview URLs
osm-carto Raster OSM Carto map style preview Map style.json:
https://maps.geoapify.com/v1/styles/osm-carto/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/osm-carto/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/osm-carto/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
osm-bright Vector, Raster OSM Bright map style preview Map style.json:
https://maps.geoapify.com/v1/styles/osm-bright/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
osm-bright-grey Vector, Raster OSM Bright Grey map style preview Map style.json:
https://maps.geoapify.com/v1/styles/osm-bright-grey/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/osm-bright-grey/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/osm-bright-grey/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
osm-bright-smooth Vector, Raster OSM Bright Smooth map style preview Map style.json:
https://maps.geoapify.com/v1/styles/osm-bright-smooth/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/osm-bright-smooth/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/osm-bright-smooth/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
klokantech-basic Vector, Raster Klokantech map style preview Map style.json:
https://maps.geoapify.com/v1/styles/klokantech-basic/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/klokantech-basic/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/klokantech-basic/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
osm-liberty Vector, Raster OSM Liberty map style preview Map style.json:
https://maps.geoapify.com/v1/styles/osm-liberty/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/osm-liberty/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/osm-liberty/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
maptiler-3d Vector, Raster Maptiler 3D map style preview Map style.json:
https://maps.geoapify.com/v1/styles/maptiler-3d/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/maptiler-3d/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/maptiler-3d/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
toner Vector, Raster Toner map style preview Map style.json:
https://maps.geoapify.com/v1/styles/toner/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/toner/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/toner/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
toner-grey Vector, Raster Toner Grey map style preview Map style.json:
https://maps.geoapify.com/v1/styles/toner-grey/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/toner-grey/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/toner-grey/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
positron Vector, Raster Positron map style preview Map style.json:
https://maps.geoapify.com/v1/styles/positron/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/positron/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/positron/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
positron-blue Vector, Raster Positron Blue map style preview Map style.json:
https://maps.geoapify.com/v1/styles/positron-blue/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/positron-blue/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/positron-blue/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
positron-red Vector, Raster Positron Red map style preview Map style.json:
https://maps.geoapify.com/v1/styles/positron-red/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/positron-red/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/positron-red/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter Vector, Raster Dark Matter map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter-brown Vector, Raster Dark Matter Brown Blue map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter-brown/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter-brown/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter-brown/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter-dark-grey Vector, Raster Dark Matter Grey map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter-dark-grey/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter-dark-grey/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter-dark-grey/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter-dark-purple Vector, Raster Dark Matter Purple map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter-dark-purple/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter-dark-purple/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter-dark-purple/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter-purple-roads Vector, Raster Rark matter purple roads map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter-purple-roads/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter-purple-roads/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter-purple-roads/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY
dark-matter-yellow-roads Vector, Raster Dark Matter Yellow roads map style preview Map style.json:
https://maps.geoapify.com/v1/styles/dark-matter-yellow-roads/style.json?apiKey=YOUR_API_KEY

ZXY-links:
https://maps.geoapify.com/v1/tile/dark-matter-yellow-roads/{z}/{x}/{y}.png?apiKey=YOUR_API_KEY

https://maps.geoapify.com/v1/tile/dark-matter-yellow-roads/{z}/{x}/{y}@2x.png?apiKey=YOUR_API_KEY

OpenStreetMap maps examples

Let's see how to create maps using OpenStreetMap tiles by Geoapify. We provide a code sample for Leaflet to demonstrate how to create a base map layer with ZYX-link and an example with MapLibre GL (a community-driven fork of Mapbox GL) to show how to use style.json links.

Leaflet map layers

When you create raster maps with ZXY tile server links, your map library works with separate map pieces but doesn't know about the conditions and restrictions of the map service.

So you should consider several things:

  • maxZoom - the maximal zoom level for map tiles. We provide osm map tiles up to 20th zoom level.
  • attribution - required mentions that should be shown together with the map. OpenStreetMap maps should include a reference to the people who built the data. Plus, you should attribute OpenMapTiles except for the osm-carto map style. Geaopify attribution is required when you use our map tiles servers for Free.
  • high-resolution maps - you need to use a different tile URL when you create a map on a high-resolution or retina display. Use '@2x' in the tile URL for retina displays.
const map = L.map('my-map').setView([48.1500327, 11.5753989], 10);
const isRetina = L.Browser.retina;
const baseUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey}";
const retinaUrl = "https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}@2x.png?apiKey={apiKey}";
L.tileLayer(isRetina ? retinaUrl : baseUrl, {
    attribution: 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors',
    apiKey: myAPIKey, 
    maxZoom: 20, 
    id: 'osm-bright'
}).addTo(map);

Here is a JSFiddle live demo >>

MapLibre GL map layers

The style.json contains map style specifications all the details needed for the base map layer including maximal zoom level and attributions. In addition, a map library takes care of high-resolution screens. So that's how it works:

const map = new maplibregl.Map({
  container: 'my-map',
  style: `https://maps.geoapify.com/v1/styles/klokantech-basic/style.json?apiKey=YOUR_API_KEY`,
});
map.addControl(new maplibregl.NavigationControl());

Here is a JSFiddle live demo >>