# Leaflet — Agent Skill 🍃🤖
[](https://www.skillsdirectory.com/skills/mapsnippets-leaflet)
[](https://agentskills.io/specification)
[](https://code.claude.com)
[](https://github.com/vercel-labs/skills)
[](https://leafletjs.com/)
[](./LICENSE.md)
> Open-source **Leaflet** AI skill for coding assistants (Claude Code, Cursor, Antigravity, GitHub Copilot, Windsurf, Roo Code, Gemini CLI). Built in accordance with the open **[Agent Skills Specification](https://agentskills.io/)**.
Maintained by **[MapSnippets](https://mapsnippets.org/)** — Open-source geospatial snippets, guides, and agent tools.
---
🌐 [Website](https://mapsnippets.org/) 📚 [Leaflet Documentation](https://leafletjs.com/reference.html) 📋 [Agent Skills Standard](https://agentskills.io/)
---
## 💡 Overview & Capabilities
An **Agent Skill** is on-demand domain expertise: AI assistants load it dynamically when a task requires specialized geospatial knowledge, replacing guesswork and hallucinated legacy APIs with verified patterns.
When activated for **Leaflet**, this skill guides the agent to:
- **Generate pure native Leaflet code** with robust container lifecycle handling, touch event compatibility, and `invalidateSize` responsive resize management.
- **Render modern vector tiles in Leaflet** using standard plugins like `@maplibre/maplibre-gl-leaflet` (`L.maplibreGL`) for high-DPI rendering and crisp vector typography.
- **Implement high-DPI raster tile layers** with `tileSize: 512`, `zoomOffset: -1`, and `@2x` retina scaling to prevent blurry pixelation.
- **Cluster high-density markers** cleanly using `leaflet.markercluster` with custom SVG cluster badges, spiderfy child expansions, and chunked loading.
- **Prevent coordinate order inversion bugs** — strictly enforces Leaflet's `[latitude, longitude]` API convention vs GeoJSON's `[longitude, latitude]`.
- **Manage custom map panes & z-indexes** (`createPane`) to keep interactive labels, highlight boundaries, and vector overlays ordered properly.
- **Integrate enterprise geospatial layers** — OGC WMS with `GetFeatureInfo` click inspections, Cloud-Optimized GeoTIFF raster layers (`georaster-layer-for-leaflet`), and Flat Cartesian maps (`L.CRS.Simple`).
<br>
## 🧠 How Agent Skills Work
This skill follows the **[Agent Skills open format](https://agentskills.io/)**, utilizing a **three-tier progressive disclosure model** to minimize context overhead:
1. **Discovery (Startup)**: The agent only inspects the YAML frontmatter `name` and `description` (~50 tokens).
2. **Activation (Task Identified)**: When your prompt mentions Leaflet, raster tiles, marker clusters, or Leaflet plugins, the agent loads `skills/leaflet/SKILL.md` (< 2,650 tokens).
3. **Execution (Deep Dive)**: The agent traverses targeted guides in `references/` or runnable recipes in `examples/` on demand, without polluting your context window.
<br>
## 🎯 Example Prompts That Trigger This Skill
You don't need special commands to use this skill. Any natural language request matching its capabilities will trigger it:
- *"How do I add sharp vector map tiles to a Leaflet map?"*
- *"Create a Leaflet marker cluster group with custom HTML icons that spiderfies on click."*
- *"Why does my Leaflet map render grey tiles when loaded inside a Bootstrap tab or modal, and how do I fix it?"*
- *"Add a GeoJSON layer with custom hover highlights, tooltips, and click-to-zoom in Leaflet."*
- *"Implement an interactive drawing toolbar in Leaflet so users can draw and edit polygons."*
<br>
## 📦 Installation
### Option 1: Universal — via Skills CLI (Recommended)
Works across Claude Code, Cursor, Windsurf, Gemini CLI, Antigravity, and dozens of other AI coding tools. The [Skills CLI](https://github.com/vercel-labs/skills) auto-detects your active environments:
```bash
npx skills add mapsnippets/leaflet-skill
```
<br>
### Option 2: Claude Code Plugin
Install directly via the Claude Code plugin marketplace:
```bash
/plugin marketplace add mapsnippets/leaflet-skill
/plugin install leaflet-skill@leaflet-skill
/reload-plugins
```
<br>
### Option 3: Manual Installation by Client
Copy or symlink the `skills/leaflet` directory into your agent's configured skills path:
| Agent / Tool | Target Directory | Install Command |
| :--- | :--- | :--- |
| **Cursor** | `.cursor/skills/leaflet` | `mkdir -p .cursor/skills && cp -r skills/leaflet .cursor/skills/` |
| **VS Code / Copilot** | `.agents/skills/leaflet` | `mkdir -p .agents/skills && cp -r skills/leaflet .agents/skills/` |
| **Gemini CLI / Antigravity** | `~/.gemini/skills/leaflet` | `mkdir -p ~/.gemini/skills && cp -r skills/leaflet ~/.gemini/skills/` |
| **Windsurf (Cascade)** | `.windsurf/skills/leaflet` | `mkdir -p .windsurf/skills && cp -r skills/leaflet .windsurf/skills/` |
| **Roo Code / Cline** | `.roo/skills/leaflet` | `mkdir -p .roo/skills && cp -r skills/leaflet .roo/skills/` |
| **OpenHands** | `.agents/skills/leaflet` | `mkdir -p .agents/skills && cp -r skills/leaflet .agents/skills/` |
<br>
## 📘 Repository Architecture
This repository strictly conforms to the [Agent Skills specification](https://agentskills.io/specification) (`dir_name == name`):
```text
mapsnippets/leaflet-skill/
├── .claude-plugin/
│ ├── marketplace.json — Claude Code marketplace catalog manifest
│ └── plugin.json — Claude Code plugin manifest & metadata
├── skills/
│ └── leaflet/
│ ├── SKILL.md — Entry point prompt & router (< 200 lines)
│ ├── evals/
│ │ └── evals.json — Machine-readable evaluation benchmarks
│ ├── examples/ — 28 standalone runnable recipes
│ │ ├── INDEX.md — Curated catalog of all recipes
│ │ └── ... — Vector tiles, clustering, GeoJSON, WMS
│ └── references/ — 21 deep technical reference guides & APIs
│ ├── INDEX.md — Searchable index of references
│ ├── versions.md — Release matrix & style endpoints
│ └── ... — Coordinate conventions, panes, plugins
├── README.md — Project documentation & setup guide
└── LICENSE.md — MIT License
```
<br>
## 🗺️ Quickstart Examples
### Vector Tiles in Leaflet (Recommended):
```javascript
import L from "leaflet";
import "@maplibre/maplibre-gl-leaflet";
import "leaflet/dist/leaflet.css";
// Center coordinates format: [latitude, longitude]
const map = L.map("map").setView([50.0755, 14.4378], 13);
L.maplibreGL({
style: "https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_API_KEY"
}).addTo(map);
```
<br>
### Raster Tiles Fallback via `L.tileLayer` (Only when specifically requested or for Satellite):
```javascript
import L from "leaflet";
import "leaflet/dist/leaflet.css";
// Center coordinates format: [latitude, longitude]
const map = L.map("map").setView([50.0755, 14.4378], 13);
L.tileLayer(
"https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=" +
"YOUR_API_KEY",
{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
maxZoom: 19,
attribution:
'<a href="https://www.maptiler.com/copyright/" ' +
'target="_blank">© MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" ' +
'target="_blank">© OpenStreetMap contributors</a>',
crossOrigin: true
}
).addTo(map);
```
<br>
## 🔑 Basemap API Keys
The examples and recipes in this skill utilize basemaps from **MapTiler**, which is free for use:
- Get a free API key at [MapTiler Cloud](https://docs.maptiler.com/cloud/api/authentication-key/) (the free tier includes 100,000 requests/month with no credit card required).
- Replace `YOUR_API_KEY` in the snippets with your active key to load live basemaps.
<br>
## 🧪 Evaluation & Validation
This skill includes an automated evaluation benchmark suite in `skills/leaflet/evals/evals.json` covering:
1. High-Resolution Web Map Quickstart (crisp 512px tiles, [lat, lng] ordering)
2. Interactive Demographic Choropleth Map (data-driven color ramps, legend box)
3. High-Density Marker Clustering with Popups (animated bubbles, spiderfy)
4. Animated Route Polyline (marching ants pulse animation along path)
5. Split-Screen Satellite Swipe Comparison (side-by-side draggable slider)
To validate compliance against the Agent Skills specification using the reference validator:
```bash
npx -y skills-ref validate skills/leaflet
```
<br>
## Links
- 🌐 [MapSnippets Community](https://mapsnippets.org/)
- 📚 [Leaflet Documentation](https://leafletjs.com/reference.html)
- 📋 [Agent Skills Specification](https://agentskills.io/)
- 🐙 [GitHub Repository](https://github.com/mapsnippets/leaflet-skill)
<br>
## 🍴 Forking & Customization
This repository is maintained by [MapSnippets](https://mapsnippets.org/) for automated distribution to AI coding agents. To keep maintenance lightweight and reliable, external pull requests and code contributions are not accepted.
However, you are completely free to fork, customize, and extend this skill for your own private agents, corporate workflows, or specialized mapping tools under the permissive [MIT License](./LICENSE.md).
<br>
## 📄 License
This project is licensed under the MIT License — see the [LICENSE](./LICENSE.md) file for details.
<br>
<p align="center">
Maintained with ❤️ by <a href="https://mapsnippets.org/">MapSnippets</a> — Open web mapping tools & agent skills.
</p>