MCP server for MapLibre
Let AI agents check, render and show MapLibre styles
An AI agent can write a MapLibre style, but it can't see the map. With maplibre-mcp it renders the style, looks at the image and fixes what it sees, and you get a link to a live map that redraws as it edits. It runs on your computer and needs no API key.
claude mcp add maplibre -- npx -y maplibre-mcpcodex mcp add maplibre -- npx -y maplibre-mcpgemini mcp add maplibre npx -- -y maplibre-mcpgrok mcp add maplibre -- npx -y maplibre-mcpcode --add-mcp '{"name": "maplibre", "command": "npx", "args": ["-y", "maplibre-mcp"]}'{
"mcpServers": {
"maplibre": {
"command": "npx",
"args": ["-y", "maplibre-mcp"]
}
}
}Needs Node.js 22 or newer. Where each client keeps its settings
How it works
Coding agents like Claude Code, Codex and Cursor can edit a MapLibre style, but they can't see the map, and they can mix up MapLibre and Mapbox. MCP, the Model Context Protocol, lets an agent call tools, and maplibre-mcp gives it tools to check styles and look at maps. This is a real session, step by step.
Step 1 of 8
You ask for a change
The request, typed into Claude Code.
style.json is a copy of OpenFreeMap's Liberty style, https://tiles.openfreemap.org/styles/liberty. Make the motorways red in style.json. Then check that the style is still valid, and show me a before and after around Copenhagen.
Step 2 of 8
The agent finds the layers
It finds the motorway layers in the style and reads them.
I'll look at the motorway layers in style.json, load the MapLibre tools, then edit, validate, and render before/after around Copenhagen.
557: "id": "tunnel_motorway_link_casing", 894: "id": "tunnel_motorway_casing", 1018: "id": "tunnel_motorway_link", … 9 more
road_motorway, tunnel_motorway, bridge_motorway, road_motorway_link, tunnel_motorway_link, bridge_motorway_link
Step 3 of 8
It checks the style
Now it uses maplibre-mcp, whose tools have the maplibre label. validate_style checks the file against the MapLibre Style Specification, and finds no problems.
{"problems": []}Step 4 of 8
It makes the change
It changes the motorway colors to red, in three places in the file.
- "line-color": "#fc8", + "line-color": "#e53935", - "line-color": "#ffdaa6", + "line-color": "#f4a09c", - 5, "hsl(26,87%,62%)", 6, "#fc8" + 5, "#c62828", 6, "#e53935"
Step 5 of 8
It checks again
The edited style is still valid.
{"problems": []}Step 6 of 8
It looks at the map
An agent can't see a map by reading JSON. compare_styles draws the map before and after the change, and marks every pixel that changed in red. Only the motorways did.
Left to right: Before, After, and the differences in red. 1.48% of the pixels differ (3986 of 270000).
Step 7 of 8
It looks closer
It checks a second place, zoomed in on a motorway interchange.
Left to right: Before, After, and the differences in red. 1.75% of the pixels differ (4733 of 270000).
Step 8 of 8
It tells you what it did
It reports what changed and what the images showed.
Motorways in style.json are now red, the style still validates cleanly, and the before/after comparisons around Copenhagen show only the motorways changing.
Zoom 10 over greater Copenhagen: the M3 ring, the Motorring 4, E47 and E20 toward Amager all turn from orange to red, while trunk and primary roads stay orange.
The difference pane in each comparison highlights only motorway geometry, so nothing else in the style was affected.
What it does
The agent gets tools for three jobs, and decides by itself when to use them.
Check
Validate a style against the MapLibre Style Specification, look up any property or expression with the GL JS and Native versions that support it, and any GL JS method or option, find layers that use a source layer or field the data does not have, and read the values the tiles really hold.
validate_style · describe_style_spec · describe_gl_js_api · describe_sources · inspect_tile · debug_layers
validate_style
error: layers[0].paint.line-colour: unknown property "line-colour"
describe_style_spec {"name": "fill-colour"}
"fill-colour" is not in the MapLibre Style Specification. Did you mean: fill-color?
describe_sources
Layer "motorways" reads the field "kind", which "omt" does not list for "transportation".
inspect_tile {"layer": "transportation"}
class: "primary" (28), "secondary" (19), "motorway" (10), "rail" (5), ...
See
Render a style with MapLibre GL JS, MapLibre Native or a Martin server, and compare two versions of a style, or two renderers, with the differences in red.
Show
Give you a link to a live map of the style that follows the file as the agent edits it, or show you an interactive map with GeoJSON layers and markers right in the chat, in clients that support MCP Apps.