From evidence-dev
Evidence.dev map components — AreaMap, BaseMap, BubbleMap, PointMap, USMap for geographic data visualization
How this skill is triggered — by the user, by Claude, or both
Slash command
/evidence-dev:evidence-mapsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Invoke when the user asks to:
Invoke when the user asks to:
Five map components for geographic data visualization. All are built on Leaflet (except USMap which uses ECharts). Maps auto-zoom to fit the data unless overridden.
Choropleth map — shades regions by a numeric or categorical value. Requires external GeoJSON to define region boundaries.
<AreaMap
data={my_query}
areaCol=region_id
geoJsonUrl='path/to/regions.geojson'
geoId=FEATURE_ID_PROPERTY
value=metric
/>
Container for composing multiple map layers (<Areas/>, <Points/>, <Bubbles/>). Use when you need overlapping layer types on one map.
<BaseMap>
<Areas data={areas_query} areaCol=zip geoJsonUrl='/geo/zips.geojson' geoId=ZCTA5CE10 value=sales/>
<Points data={points_query} lat=lat long=long color=#179917/>
</BaseMap>
Points sized proportionally to a numeric column. Size is easier to read than color for a primary metric — use size for the main metric and optionally value for color.
<BubbleMap
data={my_query}
lat=lat
long=long
size=revenue
pointName=location_name
/>
Fixed-size dots on a map, optionally color-coded by a metric. Use when all points are equally important and you just need location.
<PointMap
data={my_query}
lat=lat
long=long
pointName=location_name
/>
Flat choropleth of US states only. No GeoJSON required — built-in state boundaries. Uses ECharts renderer (not Leaflet).
<USMap
data={my_query}
state=state_name
value=metric
/>
AreaMap / Areas layer
-- Requires a column that matches values in the GeoJSON's geoId property
select zip_code, sum(sales) as sales from orders group by zip_code
-- zip_code values must match the GeoJSON feature property named in geoId=
PointMap / BubbleMap / Points / Bubbles layers
-- Requires numeric lat and long columns (decimal degrees, WGS84)
select
location_name,
latitude as lat, -- column name passed to lat= prop
longitude as long, -- column name passed to long= prop
revenue
from locations
USMap
-- state column must contain full state names OR two-letter abbreviations
-- Full names: 'California', 'New York', etc.
-- Abbreviations: 'CA', 'NY', etc. (requires abbreviations=true)
select state_name, sum(orders) as orders from sales group by state_name
GeoJSON requirement for AreaMap
The GeoJSON must be a FeatureCollection. Each Feature needs a properties object containing the field referenced by geoId. The areaCol in your data must match the values of that property.
GeoJSON feature: { "properties": { "ZCTA5CE10": "90210" } }
Data row: { "zip_code": "90210", "sales": 12345 }
Component props: geoId=ZCTA5CE10 areaCol=zip_code
select state, count(*) as orders
from orders
where state not in ('Alaska', 'Hawaii')
group by state
<AreaMap
data={orders_by_state}
areaCol=state
geoJsonUrl=https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson
geoId=name
value=orders
height=400
/>
select location_name, lat, long, revenue from locations
<BubbleMap
data={location_revenue}
lat=lat
long=long
size=revenue
sizeFmt=usd
value=revenue
valueFmt=usd
pointName=location_name
maxSize=30
/>
select state_name, population from state_data
<USMap
data={state_pop}
state=state_name
value=population
colorScale=info
legend=true
title="Population by State"
/>
| Prop | What it does | Example |
|---|---|---|
height | Map height in pixels (default 300) | height=450 |
startingLat / startingLong | Override auto-center | startingLat=37.7 |
startingZoom | Override auto-zoom (1–18) | startingZoom=10 |
basemap | Tile URL template | see Level 3 |
attribution | Attribution text on map | attribution='© OpenStreetMap' |
title | Title above the map | title="Sales Map" |
subtitle | Subtitle below title | subtitle="FY2024" |
Add a URL column to your query and pass the column name to link=. Clicking a point/area navigates to that URL.
select *, '/locations/' || id as detail_link from locations
<PointMap data={locations_with_links} lat=lat long=long link=detail_link/>
Set name= to expose the clicked row as {inputs.name}. Use in downstream queries or components.
<AreaMap
data={my_query}
areaCol=region
geoJsonUrl='/geo/regions.geojson'
geoId=region_id
value=sales
name=selected_region
/>
<!-- Use the selection -->
Selected: {inputs.selected_region.region}
select * from sales
where region = '${inputs.selected_region.region}'
OR '${inputs.selected_region.region}' = 'true'
| Prop | Type | Description |
|---|---|---|
data | query result | Query result in curly braces |
geoJsonUrl | URL or path | Path/URL to GeoJSON FeatureCollection. Files in static/ referenced as /filename.geojson |
areaCol | column name | Column whose values match the GeoJSON geoId property |
geoId | string | Property name in each GeoJSON feature that uniquely identifies it |
| Prop | Default | Description |
|---|---|---|
value | — | Column for color scale (numeric or categorical) |
valueFmt | — | Format string for the value (e.g. usd, pct, Excel format) |
colorPalette | theme default | Array of colors. For numeric: gradient stops. For categorical: one color per category. E.g. {['#C65D47','#4A8EBA']} |
min | min of data | Override minimum for color scale |
max | max of data | Override maximum for color scale |
color | — | Single flat color for all areas (overrides value-based coloring) |
| Prop | Default | Description |
|---|---|---|
legend | true | Show/hide legend |
legendType | auto | categorical or scalar |
legendPosition | bottomLeft | bottomLeft, topLeft, bottomRight, topRight |
| Prop | Default | Description |
|---|---|---|
opacity | 0.8 | Fill opacity (0–1) |
borderWidth | 0.75 | Border thickness in pixels |
borderColor | white | Border CSS color |
selectedColor | — | Fill color when area is selected |
selectedOpacity | 0.8 | Opacity when selected |
selectedBorderWidth | 0.75 | Border width when selected |
selectedBorderColor | white | Border color when selected |
| Prop | Default | Description |
|---|---|---|
showTooltip | true | Enable/disable tooltips |
tooltipType | hover | hover or click |
tooltipClass | — | Tailwind classes applied to tooltip container |
tooltip | — | Custom tooltip config array (see below) |
| Prop | Default | Description |
|---|---|---|
startingLat | auto | Center latitude |
startingLong | auto | Center longitude |
startingZoom | auto | Zoom level 1–18 |
height | 300 | Height in pixels |
basemap | Evidence default | Tile URL template — wrap in backtick+brace to escape {z}/{x}/{y} |
attribution | — | Attribution HTML string |
ignoreZoom | false | Prevent this layer from influencing auto-zoom |
| Prop | Description |
|---|---|
link | Column name containing navigation URLs |
name | Input name; exposes clicked row as {inputs.name} |
Same base map props as AreaMap. Additional bubble-specific props:
| Prop | Required | Default | Description |
|---|---|---|---|
lat | yes | — | Column with latitude values |
long | yes | — | Column with longitude values |
size | yes | — | Column driving bubble size |
sizeFmt | — | — | Format string for size value in tooltip |
maxSize | — | 20 | Maximum bubble radius in pixels |
value | — | — | Column for color scale |
valueFmt | — | — | Format string for color value |
pointName | — | — | Column for point label (tooltip title) |
Same base map props as AreaMap. Additional point-specific props:
| Prop | Required | Default | Description |
|---|---|---|---|
lat | yes | — | Column with latitude values |
long | yes | — | Column with longitude values |
value | — | — | Column for color scale |
valueFmt | — | — | Format string for value |
pointName | — | — | Column for point label (tooltip title) |
size | — | 5 | Fixed point radius in pixels |
| Prop | Required | Default | Description |
|---|---|---|---|
data | yes | — | Query result |
state | yes | — | Column with state names or abbreviations |
value | yes | — | Column driving state fill color |
abbreviations | — | false | Set true if state column uses two-letter codes (CA, NY, etc.) |
colorScale | — | info | Built-in scale: info, positive, negative |
colorPalette | — | — | Custom color array, overrides colorScale. E.g. {['maroon','white','#1c0d80']} |
min / max | — | data min/max | Clamp the color scale |
fmt | — | — | Value format string |
title | — | — | Title above map |
subtitle | — | — | Subtitle below title |
link | — | — | Column containing URLs for click navigation |
legend | — | false | Show legend |
filter | — | false | Add range filter to legend (requires legend=true) |
emptySet | — | error | error, warn, or pass for empty datasets |
emptyMessage | — | No records | Message shown on empty dataset |
renderer | — | canvas | ECharts renderer: canvas or svg |
echartsOptions | — | — | Raw ECharts config overrides |
seriesOptions | — | — | ECharts series-level overrides |
downloadableData | — | true | Show data download button |
downloadableImage | — | true | Show image save button |
Use <Areas/>, <Points/>, <Bubbles/> as children of <BaseMap>. Each layer accepts the same props as its standalone counterpart (minus the viewport/basemap props, which belong on <BaseMap> itself).
<BaseMap
basemap={`https://tile.openstreetmap.org/{z}/{x}/{y}.png`}
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
height=500
startingLat=34.05
startingLong=-118.25
startingZoom=9
>
<Areas
data={zip_sales}
areaCol=zip_code
geoJsonUrl='/geo/ca_zips.geojson'
geoId=ZCTA5CE10
value=sales
valueFmt=usd
opacity=0.6
/>
<Bubbles
data={locations}
lat=lat
long=long
size=revenue
sizeFmt=usd
pointName=name
opacity=0.5
/>
<Points
data={stores}
lat=lat
long=long
color=#cc0000
size=8
/>
</BaseMap>
Bubbles-only props (not in Points/Areas):
paneType — specifies the Leaflet pane type for renderingz — z-index for the pane (higher = on top; useful for layering)All Leaflet-based maps accept a tooltip array to define exactly what appears in the tooltip.
<PointMap
data={my_query}
lat=lat
long=long
tooltipType=hover
tooltip={[
{id: 'location_name', showColumnName: false, valueClass: 'text-xl font-semibold'},
{id: 'revenue', fmt: 'usd', fieldClass: 'text-[grey]', valueClass: 'text-[green]'},
{id: 'detail_url', showColumnName: false, contentType: 'link', linkLabel: 'View details', valueClass: 'font-bold mt-1'}
]}
/>
Tooltip item options:
| Key | Description |
|---|---|
id | Column name |
title | Custom label string (overrides column name) |
fmt | Format string for the value |
showColumnName | false to hide the label, showing only the value |
contentType | 'link' to render the value as a hyperlink |
linkLabel | Display text for the link (when contentType='link') |
formatColumnTitle | Auto-capitalize first letter of column name (only when title not set) |
valueClass | Tailwind classes for the value cell |
fieldClass | Tailwind classes for the label cell |
Wrap tile URLs in backtick+brace syntax to prevent Evidence from interpreting {z}, {x}, {y} as template variables.
<!-- OpenStreetMap (no API key) -->
<AreaMap ... basemap={`https://tile.openstreetmap.org/{z}/{x}/{y}.png`}
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'/>
<!-- Stadia Alidade Smooth Dark -->
<AreaMap ... basemap={`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}`}
attribution='© Stadia Maps'/>
Browse more providers and preview them at: https://leaflet-extras.github.io/leaflet-providers/preview/
Natural Earth (via geojson.xyz) — no API key needed:
https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojsonhttps://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojsonGeoJSON format reminder:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "YOUR_GEO_ID_FIELD": "match-value" },
"geometry": { "type": "Polygon", "coordinates": [...] }
}
]
}
Files stored in your project's static/ directory are referenced as /filename.geojson (absolute path from site root).
Numeric gradient (two stops = simple gradient):
colorPalette={['#C65D47', '#4A8EBA']}
Numeric gradient (multi-stop):
colorPalette={[['yellow','yellow'],['orange','orange'],['red','red'],['darkred','darkred']]}
Categorical (one color per category — match order to your categories):
colorPalette={['#C65D47', '#5BAF7A', '#4A8EBA', '#D35B85', '#E1C16D', '#6F5B9A', '#4E8D8D']}
Safe — writes only to .md page files. GeoJSON downloads are read-only side effects.
npx claudepluginhub devkindhq/agency-marketplace --plugin evidence-devProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.