Quick Start

Stunning vector maps. Zero cost. No limits. See Maptoolkit.org.

Add a free Maptoolkit vector basemap to a web map in a few lines of code. You do not need an API key or an account.

This guide uses MapLibre GL JS, the recommended library for vector tiles. For other libraries, see SDKs and Libraries.

Step 1: Add a map

Load MapLibre GL JS, then point it at the Maptoolkit style URL. The style defines the look of the map, and the tiles load automatically.

const map = new maplibregl.Map({
      container: 'map',
      // Free community style URL - no API key
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [-122.33520, 37.71400],
      zoom: 10,
      attributionControl: { customAttribution: '' }
    });

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
  <script>
    const map = new maplibregl.Map({
      container: 'map',
      // Free community style URL - no API key
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [-122.33520, 37.71400],
      zoom: 10,
      attributionControl: { customAttribution: '' }
    });
  </script>
</body>
</html>

That is the whole setup. The style URL works the same way in every MapLibre-compatible library.

Step 2: Add attribution

Attribution is required on every map. Two elements must be present: the Maptoolkit logo and the copyright line. Both must remain clearly visible and unobstructed at every map size, screen orientation, and zoom level — including on high-density (Retina) displays.

Requirements

Maptoolkit logo

Displayed clearly on the map.
Minimum height: 24 px on the web, 24 pt/dp on mobile platforms.
Must not be hidden or obscured by custom UI controls or custom map layers.

Copyright line

Text: © Maptoolkit © OSM.
Position: bottom-right corner of the map.
Both Maptoolkit and OSM must be active, clickable hyperlinks:
- Maptoolkit → https://www.maptoolkit.com/copyright/
- OSM → https://www.openstreetmap.org/copyright
Must not be hidden or obscured by custom UI controls or custom map layers.

Recommended: official NPM packages

The easiest way to add the logo and copyright line is by using the official packages — they handle sizing, positioning, and links for you:

MapLibre: @maptoolkit/maplibre-gl-logo
Leaflet: @maptoolkit/leaflet-logo

Download logo file

If you cannot use the NPM packages (e.g. native mobile or custom implementations), use the official logo file:

Download logo file (PNG)

Removing, hiding, or obscuring the attribution is not allowed under the Community License.

How it looks

How the attribution looks in MapLibre GL JS

Next steps

Vector Tiles - available styles and how to use them
SDKs and Libraries - MapLibre, Leaflet, OpenLayers, and mobile