Docs

1. Design a map

Open the editor, search for a place, pick a preset, and adjust terrain, colors, roads and labels — every change is live. Click Publish to get a map ID like map_x7K92dsA.

2. Install the SDK

npm install @topolyne/react

3. Render it

import { Map } from "@topolyne/react";

export default function Page() {
  return <Map mapId="map_x7K92dsA" className="h-[500px] w-full" />;
}

That's the whole integration. No MapLibre setup, no vector tile schema, no style JSON — the component fetches your published design and renders it.

Overrides

The saved design is the default. Override the view per-instance when useful:

<Map
  mapId="map_x7K92dsA"
  center={[-5.93, 54.597]}
  zoom={13}
  interactive
/>

Markers

import { Map, MapMarker } from "@topolyne/react";

<Map mapId="map_x7K92dsA">
  <MapMarker latitude={54.597} longitude={-5.93}>
    <MyPin />
  </MapMarker>
</Map>

Updates without a redeploy

Change the design in the dashboard and click Publish again. Every app rendering that mapId picks up the new version on its next fetch — no rebuild, no redeploy.