Quickstart (5 min)

Base API endpoint

Step 1 - Create an account + get an API key

To get started, first you need to choose your username and create an account and sign in to the dashboard. A default public API key is created for you automatically, and you can view it on the API Keys page. You can add additional keys later if you need separate scopes or environments. The same ?key=YOUR_KEY query parameter works across both the Styles API, Tiles API and Dataset API.

Step 2 - Choose your path

From here, the next step depends on whether you need a ready map style or your own data on the map. Use the Styles API for the fastest setup with a ready map style, or switch to the Tiles API when you want to render an uploaded MBTiles or PMTiles dataset.

Option A - Use the Styles API

The Styles API is the fastest way to get a basemap on screen. Use a map styles such as streets. No upload is needed, only a style URL and your token.

• https://api.mappinest.com/styles/{styleId}/style.json
• key=YOUR_KEY

import maplibregl from "maplibre-gl";
const map = new maplibregl.Map({
  container: "map",
  style: "https://api.mappinest.com/styles/streets/style.json?key=YOUR_KEY",
  center: [15, 45],
  zoom: 6
});

The Styles API works across:

• MapLibre GL
• Mapbox GL JS
• Open Layers
• Leaflet

Option B - Use the Tiles API

The Tiles API is the path for your own data. Upload an .mbtiles or .pmtiles file, then reference it by dataset ID in tile URLs. For example, a vector dataset like NATIONAL_COUNTIES.mbtiles becomes a source you can load as NATIONAL_COUNTIES.

The same source can be served through TileJSON or direct XYZ tile URLs, and the code below shows the XYZ endpoint form.

• https://api.mappinest.com/tiles/{datasetId}/{z}/{x}/{y}.pbf
• key=YOUR_KEY

map.on("load", () => {
  // Add the source directly as XYZ vector tile URLs.
  // This example uses XYZ, not TileJSON.
  map.addSource("counties", {
    type: "vector",
    tiles: [
      "https://api.mappinest.com/tiles/NATIONAL_COUNTIES/{z}/{x}/{y}.pbf?key=YOUR_KEY"
    ]
  });

  // Add a fill layer for the counties polygons.
  map.addLayer({
    id: "counties-fill",
    type: "fill",
    source: "counties",
    "source-layer": "NATIONAL_COUNTIES",
    paint: {
      "fill-color": "#3b82f6",
      "fill-opacity": 0.2
    }
  });

  // Add an outline layer on top of the fill.
  map.addLayer({
    id: "counties-line",
    type: "line",
    source: "counties",
    "source-layer": "NATIONAL_COUNTIES",
    paint: {
      "line-color": "#1d4ed8",
      "line-width": 1.2
    }
  });
});