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

Embed the map with the script tag, then drive its markers from your own data at runtime. Once embed.js loads, the global Tint object exposes setMarkers, addMarker, clearMarkers, flyTo, plus markerClick / ready events. Requires a Starter plan or higher.

<!-- 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

A thin React wrapper over the <tint-map> web component. Install @tintmap/react and pass a published map ID; pass markers to drive runtime pins and onMarkerClick to handle clicks.

import { TintMap } from '@tintmap/react';

export default function StoreMap() {
  return (
    <TintMap id="m_ab12cd34" height={420}
      markers={stores}
      onMarkerClick={(m) => openDrawer(m.id)} />
  );
}

Web Component

Framework-agnostic — works in plain HTML, Vue, Svelte, Webflow, or anywhere you can add a script. Load the module once, then use the <tint-map> element with a published map ID.

<script type="module" src="https://embed.tintmap.dev/v1/tint-map.js"></script>
<tint-map id="m_ab12cd34" style="height:420px"></tint-map>

Location features

Optional touches for store, venue and office maps — set them visually in the Studio, or pass them to POST /v1/maps.

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" }]
  }'