Quickstart: Show a Map in 5 Minutes

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 across the Styles API, Tiles API, and Dataset API.

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

Use a ready basemap

The Styles API is the fastest way to get a basemap on screen. Pick a style such as streets, add your API key, and use the style URL directly in your map client. No upload is needed, only a style URL and your token.

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

JavaScript

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

Use your own data

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 NATIONAL_COUNTIES.mbtiles becomes a source you can load as NATIONAL_COUNTIES.

The same source can be used in map clients such as MapLibre, 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.

https://api.mappinest.com/tiles/{tilesetId}.json
key=YOUR_KEY

JavaScript

import maplibregl from "maplibre-gl";

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.mappinest.com/styles/light/style.json?key=YOUR_KEY",
  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/tiles/NATIONAL_COUNTIES.json?key=YOUR_KEY";

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": "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
    }
  });
});

This Tiles API example uses the TileJSON endpoint for NATIONAL_COUNTIES and uses NATIONAL_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).