Agent-Skills.md

Agent Skills: maps

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

UncategorizedID: dave1010/tools/maps

Repository

dave1010/tools
dave1010License: MIT
7

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dave1010/tools/tree/HEAD/.agents/skills/maps

Skill Files

Browse the full folder contents for maps.

Download Skill

Loading file tree…

.agents/skills/maps/SKILL.md

Skill Metadata

Name
maps
Description
"Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns."

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.