Mappinest icon|Docs
Loading account...

Quickstart (5 min)

Get a map running in under 5 minutes. Create an API key, then load an available map style inside your app, an uploaded tileset, or an editable dataset with Mappinest.

Base URL

All requests go to:

https://api.mappinest.com

Get your API key

Create an account, log in to the Console, and open the API Keys page. A default public API key is created for you automatically. You can add more keys later for separate scopes or environments. The same ?key=YOUR_KEY query parameter works for Maps API, Tiles API, and Dataset API reads.

Treat API keys like passwords. Do not hardcode them in public repos.

Use an available map style

The Maps API is the fastest way to get a map on screen without uploading your own data. Pick a map such as streets, add your API key, and use the StyleJSON URL directly in your map client.

GET
https://api.mappinest.com/v1/maps/{mapId}/style.json?key=YOUR_KEY
Loading globe preview...
JavaScript
import maplibregl from "maplibre-gl";

const apiKey = "YOUR_MAPPINEST_KEY";

const map = new maplibregl.Map({
  container: "map",
  style: `https://api.mappinest.com/v1/maps/streets/style.json?key=${apiKey}`,
  center: [15, 45],
  zoom: 6
});

The Maps API works with these map clients:

  • MapLibre GL JS
  • Mapbox GL JS
  • OpenLayers
  • Leaflet

Use your own tileset

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

The same source can be used in map clients such as MapLibre GL JS, Mapbox GL JS, OpenLayers, or Leaflet through TileJSON or direct XYZ tile URLs. The quickstart below uses the TileJSON form because it keeps the metadata for your uploaded tileset behind one URL.

GET
https://api.mappinest.com/v1/tiles/{tilesetId}.json?key=YOUR_KEY
JavaScript
import maplibregl from "maplibre-gl";

const apiKey = "YOUR_MAPPINEST_KEY";

const map = new maplibregl.Map({
  container: "map",
  style: `https://api.mappinest.com/v1/maps/light/style.json?key=${apiKey}`,
  center: [-98.5795, 39.8283],
  zoom: 3.6
});

// Add the vector source through its TileJSON endpoint.
// TileJSON keeps tile URLs, zoom limits and bounds behind one source URL.
const tileJsonUrl = `https://api.mappinest.com/v1/tiles/mappinest.COUNTIES.json?key=${apiKey}`;

map.on("load", () => {
  map.addSource("counties", {
    type: "vector",
    url: tileJsonUrl
  });

  // Use the layer id shown in your TileJSON metadata (vector_layers[].id).
  map.addLayer({
    id: "counties-fill",
    type: "fill",
    source: "counties",
    "source-layer": "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": "COUNTIES",
    paint: {
      "line-color": "#1d4ed8",
      "line-width": 1.2
    }
  });
});

This Tiles API example uses the TileJSON endpoint for mappinest.COUNTIES, a public sample tileset that any valid API key can read. It uses COUNTIES as the example source-layer. When adapting it for your own data, replace the tileset ID and set source-layer to the layer id shown in your TileJSON metadata (vector_layers[].id).

Use editable datasets

Use the Dataset API when your data should remain editable and be returned as GeoJSON. Upload a GeoJSON or JSON file, or draw a blank dataset in Dataset Studio, then load the published revision as a complete GeoJSON FeatureCollection.

GET
https://api.mappinest.com/v1/datasets/{datasetId}.geojson?key=YOUR_KEY
Load a Dataset API source in MapLibre GL JS
import maplibregl from "maplibre-gl";

const apiKey = "YOUR_MAPPINEST_KEY";

const map = new maplibregl.Map({
  container: "map",
  style: `https://api.mappinest.com/v1/maps/light/style.json?key=${apiKey}`,
  center: [0, 20],
  zoom: 2
});

map.on("load", async () => {
  const response = await fetch(
    `https://api.mappinest.com/v1/datasets/mappinest.world-cities.geojson?key=${apiKey}`
  );

  if (!response.ok) {
    throw new Error("Dataset GeoJSON request failed.");
  }

  map.addSource("world-cities", {
    type: "geojson",
    data: await response.json(),
    attribution: "<a href='https://www.mappinest.com'>Mappinest</a>"
  });

  map.addLayer({
    id: "world-cities",
    type: "circle",
    source: "world-cities",
    paint: {
      "circle-color": "#2563eb",
      "circle-radius": 5
    }
  });
});

This example uses the public mappinest.world-cities sample, which any valid API key can read. Replace it with the exact Dataset ID from the console under Data → Datasets when working with your own data. If the API key has explicit scopes, add datasets:read for the Dataset request and maps:read for the background map style.

What to read next

Last updated: October 24, 2026

PreviousOverviewNextUpload Data