Historical maps on your website
Display georeferenced maps with MapLibre, Leaflet or OpenLayers.
// Imports and worker setup · 7 lines
import { Map, setWorkerUrl } from 'maplibre-gl'
import { WarpedMapLayer } from '@allmaps/maplibre'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
setWorkerUrl(workerUrl)
const map = new Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
maxPitch: 0
})
const warpedMapLayer = new WarpedMapLayer()
const annotationUrl = 'https://annotations.allmaps.org/maps/f6b4464cc1690fc2@3845c52765326a07'
map.on('load', async () => {
map.addLayer(warpedMapLayer)
await warpedMapLayer.addGeoreferenceAnnotationByUrl(annotationUrl)
const bounds = warpedMapLayer.getBounds()
if (bounds) map.fitBounds(bounds, { padding: 30 })
})
Loading map…




