Skip to content
Home
Quick Start

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. Coding with AI? See How to Use with AI.

import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
    // Define Map
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [-122.33520, 37.71400],
      zoom: 10,
      // Disable default attribution.
      // MapLibre will now load attribution from the style's .json file.
      attributionControl: { customAttribution: '' }
    });

    // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
    maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);

    // Add Attribution
    import { MaptoolkitLogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-gl-logo/+esm';
    map.addControl(new MaptoolkitLogoControl());
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    html, body { margin: 0; padding: 0; }
    #map { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
  </style>
</head>

<body>
  <div id="map"></div>


  <script type="module">
    import * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
    // Define Map
    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://styles.maptoolkit.org/summer.json',
      center: [-122.33520, 37.71400],
      zoom: 10,
      // Disable default attribution.
      // MapLibre will now load attribution from the style's .json file.
      attributionControl: { customAttribution: '' }
    });

    // Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
    maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);

    // Add Attribution
    import { MaptoolkitLogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-gl-logo/+esm';
    map.addControl(new MaptoolkitLogoControl());
  </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. (The example above already includes attribution.) 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.

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

Attribution 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

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

Download Logo File

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

Maptoolkit attribution logo

How It Looks

Map with Maptoolkit logo in the bottom-left and the copyright line in the bottom-right
How the attribution looks in MapLibre GL JS

Next Steps