Map tiles for digital maps

Openstreetmap tiles for Leaflet, Mapbox/MapLibre GL, OpenLayers

Vector and raster map tiles for beautiful interactive maps. Our map tiles are compatible with all popular map rendering libraries and technologies, including Leaflet, MapLibre GL (an open-source fork of Mapbox GL), and OpenLayers.

Our pricing plans start with a Free plan that allows you to make up to 12,000 map tile requests/day (or 360,000 requests/month) across the world. If you need more, you can choose between several pricing plans according to your needs.

>

OpenStreetMap-based map tiles

OpenSteetMap-based tiles

Six million contributors worldwide make OpenStreetMap the world’s biggest geodata source. So the OSM-based tiles are the most accurate, up-to-date, and feature-rich.

In addition, with open data sources, we can provide open tiles to you. So you can cache, store, and redistribute the generated tiles.

Raster map tiles

Raster map tiles

Raster maps are pre-rendered on our servers and provided in PNG format. So you get a set of map tiles which are simply assembled by a map library on an end-user device.

You can use raster map tiles as a base map layer for a Leaflet or OpenLayers map.

Vector map tiles

Vector map tiles

Vector map tiles are transferred as PBFs and rendered on an end-user device. You have complete control over vector-based maps. So you can change map language, map visualization settings, and styling, even dynamically.

Our OSM vector tiles format is compatible with Mapbox Vector Tiles natively supported by MapLibre GL map library.

Vector vs raster

Vector vs. raster map tiles

Vector and raster both have their advantages. The best one for you depends on what you're focusing on. From one side, raster tiles are optimized for fast rendering and browsing. On the other side, vector tiles are much more customizable.

To better understand the differences check our article "Raster vs. vector: pros and cons of both map tile types."

Static map

Interactive maps vs. map picture

In addition to map tiles for interactive maps, we provide a new API that generates map pictures - Static Map API. This makes it easy for a classic desktop application to add a map view.

To generate a map image, you only need to specify the map center, optionally add markers of your choice, and voila!

Quickstart: develop a map from scratch

Our code samples and documentation make developing a map as simple as possible

On the documentation page, you can find ready-to-use code samples for each map style. In addition, you can use our interactive Maps Playground to check available styles and options.

Below we provide code snippets showing how to add a map tile layer into Leaflet map and how to draw vector tiles with Mapbox GL (we use its community-driven fork MapLibre GL).

You'll need to get an API key to build a map with Geoapify. To get your API key, head over to the Getting Started with Maps API page.

Map tiles in Leaflet

STEP 1. Adding Leaflet to your project
  • Option 1: Use npm package manager to get a local copy of Leaflet:
npm install leaflet

In addition, for TypeScript project you can add types with:

npm install --save-dev @types/leaflet

Then you can import the Leaflet object in the code:

import { control, latLng, map, tileLayer, Browser, ... } from 'leaflet';
  • Option 2: Add links to Leaflet library in your HTML code:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
STEP 2. Pick a map style and add a map

Leaflet doesn’t support vector tiles natively. So use a raster map tile URL to create a tile layer:

HTML
<div id="my-map"></div>
CSS
html,
body,
#my-map {
  width: 100%;
  height: 100%;
  margin: 0;
}
JavaScript
// create a map
const map = L.map('my-map').setView([48.1500327, 11.5753989], 10);
   
// Retina displays require different mat tiles quality
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}";

// Add map tiles layer. Set 20 as the maximal zoom and provide map data attribution.
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>',
    apiKey: 'YOUR_API_KEY',
    maxZoom: 20,
    id: 'osm-bright',
}).addTo(map);

Vector tiles in Mapbox GL (MapLibre GL)

MapLibre GL is a community-supported fork of Mapbox GL under the BSD-3-Clause license which is safe for commercial projects and businesses.

STEP 1. Adding MapLibre GL to your project

Similar to Leaflet, MapLibre GL can be added in two different ways:

  • Option 1. With NPM package manager:
npm i maplibre-gl
  • Option 2. From one of CDN in your HTML code:
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/mapli[email protected]/dist/maplibre-gl.css">
STEP 2. Create a map

Set a link to map style to create a vector basemap layer in MapLibre. The style definition contains all required attribution, zoom settings, and other map options.

HTML
<div id="map"></div>
CSS
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
JavaScript
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());
Map project templates for React, VueJS and Angular

Map project templates

Ready to create the next big mapping project on GitHub? We've got you covered with Mapbox GL, Leaflet, and Open Layers templates. Just clone a GitHub repository and follow the instructions to create a map.

Still not sure how to start? If you’re facing any problems or have questions, we’re here to help! Contact us and we will be happy to assist.

FAQ

What are map tiles?

A map is organized in a number of smaller portions known as map tiles. These map tiles are transferred one by one to your device and combined there to form a complete and ready-to-use map. A map tile URL contains the information a map library needs to determine where to get required map tiles from. Check map tile URLs provided by Geoapify here >>

What are raster tiles?

Raster map tiles are parts of the map needed to assemble the complete map. They are server-rendered and provided in PNG or JPG formats to the end-user. They're small and fast, making them ideal for slow devices, such as older phones.

Why are vector tiles better than raster?

Vector tiles are newer than raster tiles and offer greater flexibility than raster tiles. For example, you can customize the styles of the map or localize the map to support multiple languages.

How can I modify map styles and create my map style?

Geoapify Map styles follow the Mapbox GL style specification. Therefore, you can create your own map style from scratch or derive it from existing styles. Here is a tutorial on how to style a map >>

Do I need to provide attribution to visualize an OpenStreetMap tiles?

Yes, OpenStreetMap attribution is required for all OSM-based map tiles. In addition, some map styles require attribution to OpenMapTiles. You also need to add Geoapify attribution for all Free plans. We add the attribution automatically when you create a map with a style.json link.

Are Geoapify maps compatible with my technology stack?

Our Map Tiles API follows the most widely supported ZXY tile format with 256x256 sized tiles. It works well with almost any software, library, SDK, or technology that supports tiled map sources. Older SDKs and GIS software like QGIS generally support only raster maps. For new applications, we recommend using Mapbox GL for Web and GL Native for Mobile development.

Can Geoapify maps work without an Internet connection?

Yes, this is possible. Geoapify Maps and Geoapify Location Platform in general can be configured and installed on-premise. Please contact the Geoapify team for details.

How often are map tiles updated?

The Geoapify team updates maps and underlying datasets once per month. Contact us if you need more frequent updates.

World map

Ready to get started?

Get an API key and develop a map!