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

commencer maintenant contactez-nous
Hills
Hills
Hills
Hills

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

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.

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

RASTER
Vector

VInteractive 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

STEP1 :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/leaflet@1.7.1/dist/leaflet.css " />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js "></script>

STEP2 :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.tmaps.tn/v1/tile/osm-bright/{z}/{x}/{y}.png?apiKey={apiKey} ";
const retinaUrl = "https://maps.tmaps.tn/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.tmaps.tn/ " target="_blank ">Geoapify</a> | <a href="https://openmaptil>

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.

STEP1 :Add the MapLibre GL to your project

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:

npm install --save-dev @types/leaflet

Then you can import the Leaflet objects in the code:

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/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css">

STEP2 :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="my-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.tmaps.tn/v1/styles/klokantech-basic/style.json?apiKey=YOUR_API_KEY`,
});

map.addControl(new maplibregl.NavigationControl());

FAQ

  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.
  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.

  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.
  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.

  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.
  • Create vector and raster maps you can use as a base-map layer for Leaflet, MapLibre GL, OpenLayers, QGIS, and other map libraries and GIS. Or use our Static Maps API to generate map images and map markers. Choose between different map styles and colors to match your app and website design.