Modules

Starter modules

Map

prefab-map@0.1.6

Embeddable vector map: markers, popups, GeoJSON overlays, light/dark/grayscale themes, click/fly-to/pan-and-zoom. Real OpenStreetMap-derived roads, water, and towns worldwide, up to zoom 10 anywhere on Earth - no external tile host or API key, no CSP change, mandatory OSM/Protomaps attribution. The basemap is served on demand over ranged CDN fetches, like a shared image or model asset, not downloaded in full by every prototype that uses it.

Version
0.1.6
License
MIT
Size
3640.0 MB on the CDN, streamed as needed
Brings along
maplibre-gl
Runs on
Desktop and mobile browsers with WebGL. Worldwide coverage up to zoom 10; tiles stream from the Prototir CDN as the player explores.

Add it

Declare it in prototir.json at the root of your ZIP. Prototir checks the version at upload and adds it to the page's import map, with what it brings along.

prototir.json 
{
  "modules": [
    "prefab-map@0.1.6"
  ]
}

Then import it by name, from 'prefab-map', as you would from npm.

Smallest example

Example 
import { createMap } from 'prefab-map';

const map = await createMap({
  theme: 'dark',
  markers: [{ lngLat: [-0.1278, 51.5074], popup: 'London' }]
});

API

createMap(options)

container, mount = document.body
Your own element, or a new one added to mount.
center = [10, 25], zoom = 1.6, maxZoom = 10
Starting view as [longitude, latitude]. Zoom is capped at the basemap detail, 10.
theme: 'light' | 'dark' | 'grayscale'
Basemap style.
markers: [{ lngLat, color?, popup?, id? }]
Markers added when the map loads. popup is HTML.
geojson: [{ id?, data, type = 'fill', paint?, filter? }]
GeoJSON overlays drawn as MapLibre layers.
onLoad(map), onClick(event), onMoveEnd({ center, zoom })
Map events.

The returned map

addMarker(marker) / removeMarker(id)
Returns the marker id.
addGeoJSON(overlay)
Adds or updates an overlay by id.
setTheme(theme)
Switches style and keeps your overlays.
map
The MapLibre map, for anything else.
destroy()
Removes the map.

Good to know

  • Place and road names are not drawn yet. OpenStreetMap and Protomaps attribution is always shown.

Versions

Every version stays available, so a prototype keeps working exactly as published. Declare the one you tested with.

  • prefab-map@0.1.6
  • prefab-map@0.1.5
  • prefab-map@0.1.4
  • prefab-map@0.1.3
  • prefab-map@0.1.2
  • prefab-map@0.1.1
  • prefab-map@0.1.0

As JSON: /modules/prefab-map.json. Source: prototir.