# syncfusion-react-maps

Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 702 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-maps/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-maps

## What it does

The skill covers the Syncfusion React Maps component: rendering geographic data as SVG, binding GeoJSON, layers and sublayers, markers with clustering, bubbles sized by value, data labels, legends and color mapping for choropleth maps. Map providers get their own section — Bing, OpenStreetMap, Azure — plus the hybrid route where your own shapes sit on top of provider tiles.

Inside is a set of reference files: the component API, getting started, layers, markers, data visualization, legend, color mapping, navigation lines, map providers and user interactions. The agent reads the one that matches the task instead of the whole thing. Bing and Azure need an API key; OpenStreetMap does not.

Modules are injected per feature. Skip the injection for markers or legend and they will not render — that is the usual first stumble. Projections switch between Mercator, Miller and others.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-maps/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-maps/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-maps/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-maps/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-maps
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-maps/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-maps
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-maps/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-maps -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-maps/SKILL.md

## When to use it
- show sales or metrics by region on a map
- plot locations by latitude and longitude
- color regions by a data value
- draw routes between cities as navigation lines
- add zoom, panning and hover tooltips

## Example prompts
- Build a US map from GeoJSON, color states by order count and add a legend
- Add warehouse markers with coordinates and hover tooltips to the map
- Use OpenStreetMap as the base layer and overlay my own GeoJSON shapes

## Similar
- [mapbox-google-maps-migration](https://affpapa.org/en/nevibecode/skills/mapbox-google-maps-migration.md) — skill · 1400 installs
- [mapbox-data-visualization-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-data-visualization-patterns.md) — skill · 2100 installs
- [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill · 13 installs
- [seo-maps](https://affpapa.org/en/nevibecode/skills/seo-maps.md) — skill · 6300 installs
- [globe-gl](https://affpapa.org/en/nevibecode/skills/globe-gl.md) — skill · 1500 installs
- [bklit-ui](https://affpapa.org/en/nevibecode/skills/bklit-ui.md) — skill · 1200 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md