Map tiles

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

Setting Up a MapLibre GL Map

MapLibre GL is an open-source mapping library that allows developers to integrate customizable and interactive maps into their web applications. To enhance your map's visual appeal and functionality, you can add custom map tiles as a base layer.

The Map Tile's style.json file contains all the necessary specifications for the base map layer, including details such as the maximal zoom level, attributions, and other style parameters. Additionally, the MapLibre GL library is optimized to handle high-resolution screens, ensuring your map looks crisp and clear on all devices.

Here’s how you can set up your map using MapLibre GL:

const map = new maplibregl.Map({
  container: 'my-map', // The ID of the HTML element to initialize the map in
  style: `https://maps.geoapify.com/v1/styles/klokantech-basic/style.json?apiKey=YOUR_API_KEY`,
});
map.addControl(new maplibregl.NavigationControl());

For a live demonstration, check out this JSFiddle live demo >>

Customizing MapLibre GL Map

When using vector map styles with MapLibre GL (i.e., all except "osm-carto"), you can customize the map's look and feel to suit your specific needs. These styles offer a flexible foundation that allows you to modify various visual elements, including colors, labels, and layers, to create a map that aligns with your project's aesthetic and functional requirements.

To make the customization process easier, you can use the Map Tiles Playground. This tool provides a user-friendly interface to explore available map layers and generate the necessary customization code. By adjusting settings in the playground, you can see real-time changes and fine-tune the appearance of your map before applying the modifications to your MapLibre GL implementation.

Here is an example of customization code that you might generate using the Map Tiles Playground. This code snippet demonstrates how to change the color of water bodies and modify the visibility of certain layers:

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

map.on('load', () => {
  // Change the color of water bodies
  map.setPaintProperty('water', 'fill-color', '#1133ff');

  // Hide certain layers
  map.setLayoutProperty('poi-label', 'visibility', 'none');
  map.setLayoutProperty('road-label', 'visibility', 'none');
});

// Add navigation controls (zoom and rotation) to the map
map.addControl(new maplibregl.NavigationControl());

By customizing your MapLibre GL map with specific styles and configurations, you can create a unique and engaging user experience. Whether you want to highlight certain geographic features or simplify the map's design for better readability, these customizations provide the flexibility to tailor your map exactly as needed.

Setting Up a Leaflet Map

Leaflet is a lightweight, open-source JavaScript library for creating interactive maps. It is designed with simplicity, performance, and usability in mind.

When you create raster maps using ZXY tile server links, your map library interacts with individual map tiles without being aware of the specific conditions and restrictions of the map service. Therefore, it's crucial to consider several factors to ensure proper map functionality and compliance with service requirements:

• maxZoom: The maximum zoom level for the map tiles. For example, osm map tiles provided by Geoapify are available up to the 20th zoom level.
• attribution: Required mentions that should be displayed with the map. For OpenStreetMap maps, it's necessary to credit the contributors who created the data. Additionally, you need to attribute OpenMapTiles (except for the osm-carto map style) and Geoapify when using their map tile servers for free.
• high-resolution maps: When displaying maps on high-resolution or retina displays, you should use a different tile URL that includes '@2x' to ensure the map appears crisp and clear.

Here is an example of how to set up a Leaflet map considering these factors:

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

In this example, L.map initializes the map centered at the specified coordinates and zoom level. The L.tileLayer function sets up the tile layer, selecting the appropriate tile URL based on whether the display is high-resolution or not. The attribution property ensures that all required credits are included, while the maxZoom property specifies the maximum zoom level available for the tiles.

For a live demonstration, check out this JSFiddle live demo >>

By considering these key aspects, you can effectively set up and customize your Leaflet map, ensuring it works seamlessly across different devices and adheres to the necessary usage guidelines.

Setting Up an OpenLayers Map

OpenLayers is a powerful, open-source JavaScript library for displaying and interacting with maps in web applications. It supports a wide range of map types and features, making it a versatile choice for developers. With the ol-mapbox-style plugin, OpenLayers can effectively handle vector maps, offering smooth and interactive map visualizations.

Here is an example of how to set up an OpenLayers map using a style.json file with the ol-mapbox-style plugin:

// Install ol-mapbox-style plugin
import olms from 'ol-mapbox-style';

// Initialize the map with the given style.json URL
olms('my-map', 'https://maps.geoapify.com/v1/styles/osm-bright/style.json?apiKey=YOUR_API_KEY').then((map) => {
  // You get an ol.Map instance here

  // Optional: You can access and modify the map instance if needed
  map.getView().setCenter([11.5753989, 48.1500327]);
  map.getView().setZoom(10);
});

In this example, the olms function from the ol-mapbox-style plugin is used to initialize the map with a specified style.json URL. The map is displayed in the HTML element with the ID my-map, and the style is applied from the provided URL, which includes your API key. The optional code within the then block demonstrates how you can further manipulate the map instance, such as setting the initial center and zoom level.

For a live demonstration, check out this 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.