Quickstart

Create a map in Studio, copy its ID, and embed it. A non-technical user is live in under three minutes; a developer adds an interactive pinned map in under ten lines.

<!-- Paste anywhere you can paste HTML -->
<div data-tint="abc123" style="height:420px"></div>
<script src="https://embed.tintmap.dev/v1/embed.js" async></script>

AI agents & LLMs

Tint is built so an AI coding agent — Cursor, Claude, Copilot, v0 — can add a branded map to a site without a human reading these docs. Point your agent at tintmap.dev/llms.txt, a plain-text spec of everything below.

A map is designed and published in the Studio, where it gets a stable ID like m_ab12cd34 and is served from embed.tintmap.dev. To place it on a page, an agent needs only that ID and one snippet.

<!-- Paste anywhere you can paste HTML -->
<div data-tint="abc123" style="height:420px"></div>
<script src="https://embed.tintmap.dev/v1/embed.js" async></script>

An agent can also generate a brand-new map programmatically with POST /v1/maps and a secret API key — see REST API below.

Embeds

Two modes from one map ID. Both are domain-locked, lazy-loaded, and carry automatic OpenStreetMap attribution.

<!-- iframe: simplest, fully isolated -->
<iframe src="https://embed.tintmap.dev/m/abc123"
  width="100%" height="420" loading="lazy"
  style="border:0;border-radius:12px"></iframe>

JavaScript SDK

The SDK wraps MapLibre GL with a simpler, theme-aware API: pins, clustering, routes, popups, placeholders and events.

<!-- Embed the map, then drive its markers from your own JS (Starter plan & up) -->
<div data-tint="abc123" style="height:420px"></div>
<script src="https://embed.tintmap.dev/v1/embed.js"></script>

<script>
  Tint.ready("abc123", (map) => {
    // push markers from your data — e.g. after a search/filter
    map.setMarkers([
      { id: "hq", lat: 41.015, lng: 28.979, label: "HQ", address: "Open until 9pm" },
    ]);
    map.flyTo(41.015, 28.979, 13);
    map.on("markerClick", (m) => openDrawer(m.id));
  });
</script>

React

import { TintMap, Pin, Placeholder } from '@tint/react';

<TintMap theme="minimal-light" brandColor="#13A89E"
         center={[2.349, 48.864]} zoom={11}>
  {loading && <Placeholder variant="shimmer" />}
  {stores.map(s => <Pin key={s.id} lng={s.lng} lat={s.lat} />)}
</TintMap>

Web Component

<script type="module" src="https://embed.tintmap.dev/v1/tint-map.js"></script>
<tint-map key="pk_live_xxx" theme="blueprint" brand="#0B2545"
  center="13.405,52.520" zoom="11" style="height:400px">
</tint-map>

REST API

Create and publish maps from your own backend or an AI agent. Authenticate with a secret key (Authorization: Bearer sk_live_…) from the API Keys page — keep it server-side. Requires a Pro plan.

curl -X POST https://tintmap.dev/v1/maps \
  -H "Authorization: Bearer sk_live_xxx" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Our stores", "theme": "midnight",
    "center": [41.0289, 28.974], "zoom": 12,
    "markers": [{ "lat": 41.0289, "lng": 28.974, "label": "HQ" }]
  }'