maps
Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install dave1010-tools-maps
Repository
Skill path: .agents/skills/maps
Use when building interactive map tools - Explains MapLibre setup, tiles, and common UI patterns.
Open repositoryBest for
Primary workflow: Ship Full Stack.
Technical facets: Full Stack, Frontend.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: dave1010.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install maps into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/dave1010/tools before adding maps to shared team environments
- Use maps for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
--- 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/[email protected]/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.