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.