Accueil

Map Tiles

Lorem ipsum dolor sit amet consectetur. Magna felis ut vitae bibendum viverra.

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 & redistribute the generated 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 & redistribute the generated tiles.

Open Street Map Based Tiles

Raster Map Tiles

Vector Map Tiles

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

Interactive Maps Vs Map Picture

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 1Add the Leaflet to Your Project

Option 1Use 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 2Add links to Leaflet library in your HTML code

STEP 2Pick a Map Style & 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

CSS

html,body, #my-map { width: 100%; height: 100%; margin: 0; }

Javascript

// create a mapconst map = L.map('my-map').setView([48.1500327, 11.5753989], 10);// Retina displays require different mat tiles qualityconst 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)

STEP 1Add the Leaflet to Your Project

Option 1With 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 2From one of CDN in your HTML code

STEP 2Create 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

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

QUESTIONS GÉNÉRALES

Questions Souvent Demandées

N'avez-vous pas réussi à trouver ce que vous cherchez?

Contactez-nous:contact@api.tmaps.tn

How does Tmaps differ from other mapping platforms?

Is Tmaps available on mobile devices?

Can I contribute to Tmaps by adding information?

Does Tmaps require internet connection for navigation?

Tmaps est-il disponible sur les appareils mobiles ?

Puis-je contribuer à Tmaps en ajoutant des informations ?

Tmaps nécessite-t-il une connexion Internet pour la navigation ?

Créez des cartes vectorielles et raster que vous pouvez utiliser comme couche de base pour Leaflet, MapLibre GL, OpenLayers, QGIS et autres bibliothèques de cartes et SIG. Ou utilisez notre API de cartes statiques pour générer des images de carte et des marqueurs de carte. Choisissez entre différents styles de carte et couleurs pour correspondre à la conception de votre application et de votre site web.

Map Tiles

Map Tiles

Open Street Map Based Tiles

Raster Map Tiles

Vector Map Tiles

Vector vs. Raster Map Tiles

Interactive Maps Vs Map Picture

Getting Started

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

Map Tiles In Leaflet

HTML

CSS

Javascript

Vector Tiles In Mapbox GL (Maplibre GL)

HTML

CSS

Javascript

Questions Souvent Demandées

How does Tmaps differ from other mapping platforms?

Is Tmaps available on mobile devices?

Can I contribute to Tmaps by adding information?

Does Tmaps require internet connection for navigation?

Tmaps est-il disponible sur les appareils mobiles ?

Puis-je contribuer à Tmaps en ajoutant des informations ?

Tmaps nécessite-t-il une connexion Internet pour la navigation ?

Products & Services

Quick Links

Solutions