@tintmap/react

Official React component for Tint — drop a branded, on-brand map into any React app with one component.

It's a thin wrapper over the framework-agnostic <tint-map> web component served from the Tint embed CDN. MapLibre runs inside the embed iframe, so nothing heavy lands in your bundle and the map looks exactly like the Studio preview.

Install

npm install @tintmap/react

react >= 17 is a peer dependency.

Usage

Create and publish a map in the Tint Studio, copy its ID (e.g. m_ab12cd34), then:

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

export default function StoreLocator() {
  return <TintMap id="m_ab12cd34" height={420} />;
}

Runtime markers (Starter plan and up)

Push pins from your own data and react to clicks:

<TintMap
  id="m_ab12cd34"
  height={480}
  markers={stores.map((s) => ({ id: s.id, lat: s.lat, lng: s.lng, label: s.name, address: s.address }))}
  onMarkerClick={(m) => openDrawer(m.id)}
  onReady={({ jsApi }) => console.log('map ready', jsApi)}
/>

Props

| Prop | Type | Default | Notes | |------|------|---------|-------| | id / mapId | string | — | Published map ID (required) | | height | number \| string | 420 | px number or any CSS length | | radius | number \| string | 12 | corner radius | | markers | TintMarker[] | — | runtime pins; needs Starter+ | | onMarkerClick | (marker) => void | — | runtime marker click | | onReady | ({ jsApi }) => void | — | fired when the map loads | | origin | string | https://embed.tintmap.dev | embed origin override |

Without React

The same map works anywhere via the web component this package wraps:

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

Notes

• The site's domain must be added to the map's allow-list in the Tint dashboard, or the embed refuses to render.
• OpenStreetMap attribution must stay visible.

Docs · llms.txt