Map 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 parts

MapTiler attribution consists of a text part (bottom right) and a logo (bottom left).

MapTiler attribution example

Text attribution (required)

The text attribution must appear on every map. It includes copyright notices with links for MapTiler and also for 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.

If you need a map without attribution, learn here how to remove it.

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;">
     &copy; MapTiler
  </a> 
  <a href="https://www.openstreetmap.org/copyright" target="_blank"
     style="position:absolute;left:10px;bottom:10px;z-index:999;">
     &copy; 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">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; 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">&copy;MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  })

For more details, see the OpenLayers reference.