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.