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 Map Styles API and Tiles API.

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

Use an available map style

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

GET

https://api.mappinest.com/v1/styles/{styleId}/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/styles/streets/style.json?key=${apiKey}`,
  center: [15, 45],
  zoom: 6
});

The Map Styles API works with these map clients:

MapLibre GL JS
Mapbox GL JS
OpenLayers
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 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/styles/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/NATIONAL_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 as the tileset Id example, and uses mappinest.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).