Docs

Quickstart

Everything below is a copy-paste away from a working map. Replace YOUR_TOKEN with your API token throughout.

1. Get an API token

Sign up and create a token. One token covers every product — tiles, geocoding, and static maps all meter against it.

2. MapLibre

Point MapLibre at a MoogleGaps style URL and you're done:

import maplibregl from "maplibre-gl";

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.mooglegaps.com/styles/streets.json?token=YOUR_TOKEN",
  center: [-74.006, 40.7128],
  zoom: 12,
});

3. Leaflet

Or use classic raster tiles with Leaflet:

import L from "leaflet";

const map = L.map("map").setView([40.7128, -74.006], 12);

// Attribution arrives with the tile metadata — no need to hardcode it.
L.tileLayer("https://api.mooglegaps.com/tiles/satellite/{z}/{x}/{y}.jpg?token=YOUR_TOKEN", {
  maxZoom: 19,
}).addTo(map);

4. Geocoding

Forward and reverse geocoding are plain GET requests:

# Forward geocoding
curl "https://api.mooglegaps.com/geocode?q=350+Fifth+Avenue,+New+York&token=YOUR_TOKEN"

# Reverse geocoding
curl "https://api.mooglegaps.com/geocode/reverse?lat=40.7484&lon=-73.9857&token=YOUR_TOKEN"

5. Static maps

One URL returns a rendered image — no JavaScript required:

https://api.mooglegaps.com/static/satellite/40.7128,-74.0060,12/800x500.png?token=YOUR_TOKEN

Attribution

You don't have to assemble credit strings yourself. Our responses carry the attribution metadata for whatever data you actually requested — satellite imagery, OpenStreetMap vector data, or both — and MapLibre and Leaflet read that metadata and display the credits on the map automatically. The credits change with the data, so letting the client render them is also the only way to keep them correct.

Caching

Responses are yours to keep. Cache tiles and geocoding results in your CDN, your database, or your app bundle for as long as you like — that's the point.

That's the whole integration.

Get a token and ship the map.