Geoapify

Map Tiles

OpenStreetMap tiles for Leaflet, Mapbox/MapLibre GL, OpenLayers

Vector and raster Map Tiles for beautiful interactive maps. Our Map Tiles are suitable for base-map layers in map rendering libraries and frameworks, including Leaflet, MapLibre GL (an open-source fork of Mapbox GL), and OpenLayers.

Geoapify 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 a map library assembles 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 an 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 style, map center, optionally add markers of your choice, and voila!

Getting Started

Here are some code samples that help you develop a map from scratch

You can find ready-to-use code samples for each map style on the documentation page. 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. Head over to the Getting Started with Maps API page to get your API key.

Map tiles in Leaflet

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

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

npm install --save-dev @types/leaflet

Then you can import the Leaflet objects 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>

Visit Leaflet's Unpkg page to find the freshest links.

STEP 2. Pick a map style and create a map

You'll need to use a raster map tile URL to create a map with Leaflet. To add a new layer of tiles to a map, you first create a map container and then add the 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);

Please see the Leaflet's documentation for more information about its functionality.

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.

MapLibre GL works with vector map tiles and allows you to customize map styles for your project - change colors and fonts, localize maps, add/hide information on a map.

STEP 1. Add the MapLibre GL to your project

Similar to Leaflet, you can add MapLibre GL in two different ways:

  • Option 1. With NPM package manager:
npm i maplibre-gl

The library package includes types, so there is no need to install them separately for TypeScript projects. You can import MapLibre GL's typings in you files this way:

import { LngLatBounds, Map, Marker, Popup } from '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/[email protected]/dist/maplibre-gl.css">
STEP 2. Create a map

Use the Map style link to create a vector basemap layer in MapLibre GL. 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());

More Map Tile tutorials

Here are more tutorials to help you create custom maps

Add a cycleways layer to an OSM Bright map

Customize a Map Style: adding cycleways layer

This tutorial demonstrates how to style an OpenStreetMap map, customize colors, fonts, show/hide map details
Leaflet, Mapbox GL/MapLibre GL, OpenLayers in ReactJS

Adding OpenStreetMaps-based Maps to ReactJS app

Learn how to use Leaflet, Mapbox/MapLibre GL, OpenLayers, and create an OpenStreetMap map in ReactJS applications
Leaflet, Mapbox GL/MapLibre GL, OpenLayers in Angular

How to use Map Libraries in Angular

Learn how to create a Map Component with Leaflet, Mapbox/MapLibre GL, OpenLayers without the use of additional wrapper libraries

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!