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/maplibre-gl@6.9.0/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: '', compact: 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/maplibre-gl@6.9.0/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/maplibre-gl@6.9.0/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: '', compact: 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 it: the MaptoolkitLogoControl places the logo, and attributionControl: { customAttribution: '', compact: false } keeps the copyright line permanently expanded.

Removing, hiding, or obscuring the attribution is not allowed under the Community License. Note the compact: false setting above: without it the copyright line collapses into an information button when the map is dragged, which does not satisfy the requirement.

See Attribution for the full requirements, the logo asset, per-library instructions including mobile, and a checklist for verifying your own map.

Step 3: Choose a Style

The style URL decides how the map looks. The example above uses Summer, the default. Seven standard styles are available, and switching between them means changing that one URL:

StyleStyle URL
Summer (default)https://styles.maptoolkit.org/summer.json
Winterhttps://styles.maptoolkit.org/winter.json
Streethttps://styles.maptoolkit.org/street.json
Lighthttps://styles.maptoolkit.org/light.json
Darkhttps://styles.maptoolkit.org/dark.json
Cyclinghttps://styles.maptoolkit.org/cycling.json
Hikinghttps://styles.maptoolkit.org/hiking.json

To change the style after the map has loaded, call map.setStyle(url). See Change the Map Style for a working example.

Map Styles shows each style rendered, and covers the language versions that set label language and the 3D variants that add terrain relief. You can also build your own style with MapMaker.

Next Steps