How to add MapTiler attribution to a map

Map design Custom data visualization

This collection of articles presents a suggested workflow for creating Custom data visualizations.

  1. Creating a custom vector dataset (GeoJSON)
  2. Data sources
  3. Replacing data sources
  4. Replacing name label
  5. Editing JSON
  6. Map data visualization with MapTiler Cloud
  7. Preparing gridded raster data for visualization
  8. How to add MapTiler attribution to a map

Every map created with MapTiler Cloud must include an appropriate copyright attribution. This article explains why and how you should do that when using our maps. 

MapTiler attribution is requested for every map you create with MapTiler Cloud. Please refer to our terms or contact us for more information.

What is the MapTiler attribution?

The MapTiler attribution is the copyright information to be included on every map using MapTiler map styles and data. It is usually located at the bottom right corner of the map container.

MapTiler text attribution

The MapTiler text attribution must be displayed on every map. It includes copyright mention with appropriate hyperlink for both MapTiler and OpenStreetMap, as follows:

© MapTiler© OpenStreetMap contributors

MapTiler logo attribution

The MapTiler logo attribution is a small image which links to MapTiler’s website. It is usually displayed at the bottom left corner of the map.

Where is the attribution needed?

We request the MapTiler text attribution to be visibly displayed on:

  • every dynamic map used on any kind of website or mobile application (please include both text and hyperlinks)
  • every static map image or printed map of any form (please include text on the image or next to it, as well as on cloth or on the item label at least)
  • every static or dynamic map used in video, game, 3d animation or any other media.  (please overlay it in a corner of the video, or on the video credentials at least).

The MapTiler logo attribution is requested on every map served with a MapTiler Cloud Free account.

The ©MapTiler mention can only be omitted in case an attribution exemption has been granted by our Sales team, please contact us.

How to add logo attribution to the map?

Most Javascript mapping libraries are showing the attribution control by default and the MapTiler attribution is usually automatically displayed on web maps (please do not hide it!). In case it is not showing, please add it using the following markup.

Using MapTiler SDK JS

The best way how to add and edit the MapTiler logo to your custom map is by using MapTiler SDK JS. You can get details in the reference documentation: https://docs.maptiler.com/sdk-js/api/map/

  • options.maptilerLogo
    (If true , the MapTiler logo will be shown. false will only work on premium accounts)
    Type: boolean
    Default: true
  • options.logoPosition
    (A string representing the position of the MapTiler wordmark on the map. Valid options aretop-left , top-right , bottom-left , bottom-right .
    Type: string
    Default: ‘bottom-left’

Using HTML

The text attribution can be simply added inside your map container div :

<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">&copy; OpenStreetMap contributors</a>
</div>

The logo attribution can be also added as follows:

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

Using 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
}));

See more information about MapLibre GL JS attribution here.

Using Leaflet

var attribution = L.control.attribution().addTo(map);
attribution.addAttribution('<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>’);

See more information about Leaflet attribution here.

Using OpenLayers

The attribution is associated to the map layer’s source by default in OpenLayers.

var layer = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    attributions: [new ol.Attribution({
      html: ‘<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>’
    })]
  })
});

See more information about OpenLayers attribution here.

Conclusion

The MapTiler attribution is requested on every map using our map styles and data, please respect this simple rule. Feel free to contact us if you have any questions.

Next steps

Continue to How to make custom map design in MapTiler Cloud to learn how to change the look of any map in MapTiler Cloud.

Add MapTiler Logo to a map with SDK JS
MapTiler Cloud Terms and Conditions
OpenStreetMap Copyright
MapTiler Copyright