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		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		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		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		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		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		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		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		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		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		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		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		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		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		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		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		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		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		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 >>

Attribution

When you create a map with style.json, all the map attributions are automatically added to the bottom of your map.

When you hide or replace automatically added attribution, you need to take care of attributions by yourself.

The following attributions are required:

1. Geoapify attribution

The Free Pricing Plan requires the Geoapify attribution. The correct Geoapify attribution is:

Powered by <a href="https://www.geoapify.com/">Geoapify</a>

Geoapify paid packages include the "White label" option. So no Geoapify attribution is needed when you subscribed to Geoapify.

2. OpenStreetMap attribution

The Geoapify server generates place tiles based on OpenStreetMap data, which is licensed under ODbL 1.0. Using this service will require proper attribution:

<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>

Learn more

• OpenStreetMap Legal FAQ

3. OpenMapTiles attribution

We use the OpenMapTiles schema to generate map tiles (except the osm-carto map style). It requires the following attribution:

<a href="http://openmaptiles.org/" target="_blank">© OpenMapTiles</a>

Where to put it?

This credit needs to appear in a place that would be appropriate for the medium or means you are using. For example:

• For interactive maps and map pictures, the credit should typically appear in the corner of the map, as commonly seen with map APIs/libraries such as Leaflet, MapLibre, OpenLayers;
• For printed maps, the credit should appear beside a map if that's where other such credits appear, and/or in "acknowledgments" section of the publication.

Pricing

We use a universal currency called "credit" to calculate the cost of Geoapify API calls.

We've created different Pricing Plans that meet the unique needs of each customer. If you're just getting started and want to try our service for free, we offer a Free plan with 3000 credits per day. So start for free, and upgrade when you need to!

Here are some guidelines we use to calculate the cost of interactive maps:

How can I count how many map tiles I need?

The number of map tiles needed to render a map depends on the map size. Each map tile is 256px by 256px, so the 800x600px map is about 8-10 map tiles, and the 1200x800px map is about 15-20 map tiles.

Here's a formula you can use to estimate how many map tiles you'll need roughly:

MAP_WIDTH * MAP_HEIGHT / (256 *256) * NUMBER_OF_USERS * USER_ACTIVITY_COEFF

The USER_ACTIVITY_COEFF depends on the role of the map on your website or app. For example, it could be 1-2 when the map shows a location and 5-10 when you offer spatial analytics or search on the map.

More tiles are needed when you use a perspective view for a map. Therefore, the number of tiles will increase.

While this can be challenging, we recommend you start using the maps and collecting statistics instead. Start with the Free pricing plan to see how many map tiles you will need. Also, our limits are soft, so we don't block you even if you exceed the quota.