Instant MapImage, no JavaScript yetLive map, drag it
The map is on the page before your JavaScript is.
Instant Map sends a finished image of your map first, then turns it into a smooth, clickable map the moment someone reaches for it.
- First image on screen, this visit
- …
- Your browser had the image cached on this visit.
- JavaScript before the map shows
- 0 KB
- Interactive
- on your first touch
npm install instantmap-jsMIT licence · v0.1.0 · Every framework · Source on GitHub
What runs where
On the server
The first image is a JPEG drawn from OpenStreetMap data and your markers, then cached. Use the hosted service or deploy the Worker to your own Cloudflare account.
In the HTML
Your page carries that image as a plain <img>, so it shows with the first HTML, before fonts or scripts.
In the browser
A 7.5 KB loader waits for the first touch, then brings in the 11.4 KB engine: drag, zoom, clusters, keyboard and cards.
See what it does
- SpeedTime a map on your own connection and see what is loaded, and when.
- Styling and brand coloursBuild a map from your style guide's colours, or set every colour yourself.
- CardsThe card that opens on a marker: layouts, your colours, or your own markup.
- FrameworksGuides and example apps for ten stacks, from plain HTML to Next.js.
- AI agentsA prompt and Markdown docs so a coding agent can add the map for you.
- Self-hostingRun the renderer on your own Cloudflare account with your own tiles.
Questions and answers
What is Instant Map?
Instant Map is an open-source map for websites. The first view is one finished image drawn on a server, so it shows with the page's HTML. A small web component turns that image into a map you can drag, zoom and click as soon as someone reaches for it.
How much JavaScript does it load?
None before the map is visible. The loader is about 7.5 KB gzipped and loads after the image is on screen. The interactive engine, about 11.4 KB gzipped, loads the first time someone points at, touches or focuses the map.
Which frameworks does it work with?
Any of them. Instant Map is a standard custom element, <instant-map>, so it works in plain HTML and in every framework. There is a React component, a server helper for building the first image, and step-by-step guides for Next.js, React Router, Astro, Vue, Nuxt, SvelteKit, Angular and Solid.
Can the map match my brand?
Yes. Give brandTheme() the colours from your style guide (a primary colour is enough) and it returns a full map palette with readable labels and markers. You can also set any of the 36 map colours yourself, or start from one of four built-in themes.
Can I change the card that opens on a marker?
Yes. The built-in card takes a title, subtitle, price, image, badge and link, and is restyled with CSS custom properties. For your own markup, put a <template data-card> inside the element or pass a function that returns the card.
Where does the map data come from?
Map data is from OpenStreetMap contributors, in the Protomaps tile schema. Maps must show the OpenStreetMap attribution, which the element adds for you.
Can I host it myself?
Yes. The renderer is a Cloudflare Worker in the repository. Deploy it to your own account, point it at a vector tile source, and set the src attribute to your address.
What does it not do?
Instant Map draws flat, north-up maps with markers, clusters and cards. It does not do 3D, rotation, tilt, or drawing and editing shapes.
What does it cost?
The code is free under the MIT licence. You can also run the renderer on your own Cloudflare account, where you pay Cloudflare for what you use.
Put a map on your page in a minute
npm install instantmap-js