SYS 01
Your colors
Start from one of ten themes, then set any of 22 color roles yourself: land, water, roads, labels, the pin and the buttons drawn over the map.
Open source Free website map
Put your map on any site. Skip the API key.
One folder, one div and one script tag put an OpenStreetMap map on your page, in your colors.
OpenPin draws the map in the visitor's browser from free OpenStreetMap data. You don't need a Google account, an API key, a billing setup or an npm install. Copy the folder to your site, paste the snippet, and the map loads when someone scrolls near it.
MIT license | No API key | No build step
Released October 2, 2026
784 KB ZIP
MIT license
Current build
v1.1.0
Price
Free · MIT
API key
None
Build step
None
Color roles
22
Theme builder Running on this page
Build your map right here.
This runs the same folder that's in the download. Pick a theme, set your place and change any of the 22 colors, then copy the code into your site. Hold Ctrl or Command while scrolling to zoom the map; on a phone, pan with two fingers.
Launch Complex 39A, Kennedy Space Center, Florida
<div
data-openpin
data-lat="28.60864"
data-lng="-80.60412"
data-zoom="14"
data-label="Launch Complex 39A"
data-home-label="Back to the pad"
style="height: 480px">
Launch Complex 39A, Kennedy Space Center, Florida
</div>
<script type="module" src="/openpin/openpin.js"></script>Copy the openpin folder from the download to your site root, then paste this code where the map belongs. All ten themes are built into OpenPin, so the code only names the theme plus any colors you change.
01
Installation
Three steps from download to map.
Copy the openpin folder into your site, add a div where the map belongs, and load the script once per page.
The script finds its CSS, map style, icons and MapLibre relative to its own location, so the folder can sit anywhere on the server. It works on hand-built HTML sites, WordPress, Webflow and static site generators, and in React, Vue or Svelte apps that serve the folder from public/.
- openpin folder
- Theme builder page
- Single and multi-pin examples
- README with every option
- AGENTS.md for AI assistants
- License and notices
<div
data-openpin
data-lat="28.60864"
data-lng="-80.60412"
data-zoom="14"
data-label="Launch Complex 39A"
data-home-label="Back to the pad"
style="height: 480px">
Launch Complex 39A, Kennedy Space Center, Florida
</div>
<script type="module" src="/openpin/openpin.js"></script>Systems check Six green lights
A small package with good manners.
A map should help visitors find you without slowing the page or hijacking the scroll wheel. OpenPin handles those details by default, and most of them can be changed with an attribute.
SYS 02
Loads when needed
MapLibre is roughly 300 KB with gzip and downloads only when a map comes near the screen. A page without a map loads none of it.
SYS 03
A fallback that helps
While the map loads, or if WebGL or the tiles are unavailable, visitors see your address and an Open in OpenStreetMap link.
SYS 04
Scrolling stays with the page
Visitors scroll past the map without getting stuck in it. Ctrl or Command plus scroll zooms, and touch screens pan with two fingers.
SYS 05
Several locations
Pass a list of pins and the map fits all of them on screen. The Back to button returns visitors to that starting view.
SYS 06
An API when you want one
Recolor a map live, listen for ready and error events, or take the full MapLibre map and build on it.
Build manifest Four systems online
Built on open tools you can inspect.
OpenPin's map style comes from the Heliport Atlas the studio built for HelicopterCharters.us, which runs MapLibre over VersaTiles tiles. OpenPin packages that setup so any site can use it.
Stack 01
Rendering
The map is drawn in the browser with WebGL. The OpenPin loader turns a plain div into a configured map.
- MapLibre GL JS 6.3.0 Vector map renderer, bundled in the folder (BSD-3-Clause)
- OpenPin loader ES module that reads data attributes, applies themes and exposes the JavaScript API (MIT)
Stack 02
Map data
Tiles come from a free public server, so there is no account to create and no key to protect.
- OpenStreetMap Streets, buildings, water and place names (ODbL, credited on the map)
- VersaTiles Public vector tiles and Noto Sans map fonts, no sign-up
Stack 03
Map style
Every color role owns one value in the style file, so a theme swaps all of them in a single pass.
- VersaTiles Shortbread style Adapted from the Heliport Atlas build (CC0)
- Icon sprite Point-of-interest icons recolored by the icon role (CC0)
Stack 04
Delivery
The whole package is one folder you copy to your server. No package manager or bundler is involved.
- One self-locating folder Script, CSS, style, sprites and MapLibre, found relative to the script
- AGENTS.md included Install rules for AI coding assistants, covering coordinates, attribution and common mistakes
02
Tiles and credit
Free tiles, shared fairly.
The tiles come from the free public VersaTiles server. It needs no key or sign-up.
It is a community service, so a high-traffic site should read the VersaTiles usage guide or host its own tiles. Switching servers means editing two URLs in style.json. OpenStreetMap's license asks for visible credit, and the small (i) button on the map provides it, along with a short OpenPin by SputnikFX link.
Tile server
VersaTiles
Map data
OpenStreetMap
Browser support
Any with WebGL
Launch window Payload ready
Download version 1.1.0.
The ZIP holds the complete release: the openpin folder, the theme builder, two examples, the README, AGENTS.md and the license files. The same code is on GitHub, where you can report issues or send changes.
OpenPin v1.1.0
Any modern browser · MIT license · 784 KB ZIP
Checksum
Compare your download with this SHA-256 hash. The ZIP matches commit ec90aaa on GitHub.
SHA-256 DF1E5E8F4A40225F090537287D9513537E942797305F6A62FA39EB36297DC53C
Mission briefing.
The README in the download lists every attribute, theme color and JavaScript option, with fixes for the common setup mistakes.
Read the READMEWhat is OpenPin?
OpenPin is a free, open-source JavaScript package that puts an OpenStreetMap map on a web page in colors you choose. It bundles MapLibre GL JS and loads free vector tiles from VersaTiles.
Do I need a Google account or an API key?
No. The map uses OpenStreetMap data from the public VersaTiles tile server, which needs no key or sign-up. You can still add plain directions links to Google Maps, Apple Maps or OpenStreetMap.
Can I use OpenPin on a commercial website?
Yes. The code is MIT licensed. Keep the map's (i) attribution visible, because the OpenStreetMap license requires credit. A busy site should read the VersaTiles usage guide or host its own tiles.
Does it work with WordPress?
Yes. Upload the openpin folder, then paste the snippet into a Custom HTML block with the full URL in the script src. Squarespace, Wix and Webflow work the same way with hosted files and an embed block.
What happens if the map cannot load?
Visitors see the address you put inside the map element and an Open in OpenStreetMap link. If the tiles arrive late, the map replaces that fallback on its own.
Need the website around the map?
We build fast, custom websites where details like this are already handled. Tell us what your site needs to do and we will map the build.