# Maps

> Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns.

- Skill: `majiayu000/maps` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/maps`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/maps/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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.