Instant Map / Frameworks

Works where you already work.

Instant Map is a standard web component with a React component and a server helper for the first image. Every guide is written from a working example app in the repository.

npm install instantmap-js

Pick your stack

Example apps on GitHub

The whole integration

Any page

<script type="module"
  src="https://instantmap.org/instant-map.js"></script>

<instant-map
  center="-122.42,37.77"
  zoom="12"
  style="height:480px">
</instant-map>

<script type="module">
  const map = document.querySelector("instant-map");
  map.markers = await fetch("/api/listings")
    .then((response) => response.json());
</script>

React and Next.js

import { InstantMap } from "instantmap-js/react";

export function ListingsMap({ listings }) {
  return (
    <InstantMap
      center={[-122.42, 37.77]}
      zoom={12}
      markers={listings}
      style={{ height: 480 }}
      onMarkerClick={(marker) => router.push(marker.href)}
    />
  );
}

First image from any server

Where your pages are rendered on a server, put the map image in the HTML so it shows before any script. The helper runs in Node, Bun, Deno and edge runtimes. For other languages, the image address is a plain URL you can build by hand.

HTTP API reference

Server

import { staticUrl } from "instantmap-js/server";

// Any server: build the address of the first image
// and put it in the HTML as a plain <img>.
const poster = staticUrl({
  center: [-122.42, 37.77],
  zoom: 12,
  width: 960,
  height: 480,
  ratio: 2,
  markers: listings,
});

What is in the package

Import	What it is
`instantmap-js`	The element, types and helpers
`instantmap-js/react`	The React component
`instantmap-js/server`	First-image addresses and palettes, no DOM needed
`instantmap-js/brand`	Map colours from brand colours
`instantmap-js/card`	The built-in card, to reuse or extend
`instantmap-js/instant-map.js`	The script-tag build

TypeScript types are included. The package has no dependencies; React is an optional peer for the React component.