MapTiler attribution and how to add it
Map attribution is the copyright and licensing information that appears on a map, typically in the bottom corner. It gives credit to the map data providers and is required by their licenses.
When you implement a MapTiler map using our SDKs or popular mapping libraries, it will usually have attribution added automatically. However, in some cases you may need to add it manually, and this page explains how.
Attribution types
MapTiler attribution consists of a text part (bottom right) and a logo (bottom left).
Text attribution (required)
The text attribution must appear on every map. It includes copyright notices with links for MapTiler and OpenStreetMap, which is the underlying data source:
© MapTiler © OpenStreetMap contributors
Logo attribution (free accounts only)
If you’re using a MapTiler Free account, you also need to display the MapTiler logo linking to our website, www.maptiler.com.
When you need attribution
You need to include MapTiler attribution on:
- Dynamic maps in websites or mobile apps (include both text and link)
- Static map images or printed maps (include text on or next to the image)
- Maps in videos, games, or animations (overlay in a corner or include in credits)
For complete details, see our Terms and Conditions.
How to add attribution
Most JavaScript mapping libraries show attribution by default, so you usually won’t need to add it manually. If the attribution is missing from your map, here’s how to add it.
MapTiler SDK JS
Configure the MapTiler logo and its position using these options:
// Logo display (setting to false only works with premium accounts)
maptilerLogo: true // default: true
// Logo position
logoPosition: 'bottom-left' // options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'
For more details, see the MapTiler SDK JS reference.
HTML
Add text attribution directly to your map container:
<div id="map">
<a href="https://www.maptiler.com/copyright/" target="_blank"
style="position:absolute;left:10px;bottom:10px;z-index:999;">
© MapTiler
</a>
<a href="https://www.openstreetmap.org/copyright" target="_blank"
style="position:absolute;left:10px;bottom:10px;z-index:999;">
© OpenStreetMap contributors
</a>
</div>
Add logo attribution:
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;">
<img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo">
</a>
MapLibre GL JS
map.addControl(new maplibregl.AttributionControl({
customAttribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
compact: false
}));
For more details, see the MapLibre GL JS reference.
Leaflet
L.tileLayer(`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${key}`, { //style URL
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
For more details, see the Leaflet reference.
OpenLayers
Attribution is associated with the map layer’s source by default:
const source = new ol.source.TileJSON({
url: https://api.maptiler.com/maps/streets-v2/tiles.json?key=${key}, // source URL
tileSize: 512, //we recommend to use 512 instead of 256
attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">©MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
})
For more details, see the OpenLayers reference.