maps

MapLibre basics

• •Include MapLibre's CSS before your styles and load the script from https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js.
• •Keep the map container absolutely positioned to fill the viewport (see #map styles in tools/map-explorer/index.html).
• •Use the OpenFreeMap Liberty style (https://tiles.openfreemap.org/styles/liberty) unless a different basemap is required.
• •Add navigation controls with map.addControl(new maplibregl.NavigationControl(), 'top-right');.
• •Guard against missing globals: if typeof maplibregl === 'undefined', disable map-dependent UI and show an error.

Geolocation pattern

• •Provide a dedicated button for navigator.geolocation.getCurrentPosition.
• •Disable the button while locating, apply a loading state, and reset it in success/error callbacks.
• •On success, create or update a maplibregl.Marker and map.easeTo the new center.
• •On errors, surface user-friendly messages for permission, availability, and timeout cases.

Overlay & interaction tips

• •Keep status text in small, unobtrusive elements and update it via helper functions.

Accessibility & layout

• •Generally prefer maps that take up the whole viewport, with UI controls and panels overlayed
• •Footer links in an overlay too.