MCP server for MapLibre

Let AI agents check, render and show MapLibre styles

maplibre-mcp helps AI agents get MapLibre styles right. With it, an agent can check a style, look at the map it made, and show you an interactive map. It runs on your computer and needs no API key.

Get started See how it works

$claude mcp add maplibre -- npx -y maplibre-mcp

$codex mcp add maplibre -- npx -y maplibre-mcp

$gemini mcp add maplibre npx -- -y maplibre-mcp

$grok mcp add maplibre -- npx -y maplibre-mcp

$code --add-mcp '{"name": "maplibre", "command": "npx", "args": ["-y", "maplibre-mcp"]}'

Claude Desktop, Windsurf and most other clients read this JSON.

{
  "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.

Grep"id": "[^"]*motorway[^"]*" in style.json

557:   "id": "tunnel_motorway_link_casing",
894:   "id": "tunnel_motorway_casing",
1018:  "id": "tunnel_motorway_link",
… 9 more

Readstyle.json, 6 ranges

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.

maplibrevalidate_style{"path": "style.json"}

{"problems": []}

Step 4 of 8

It makes the change

It changes the motorway colors to red, in three places in the file.

Editstyle.json, 3 edits

- "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.

maplibrevalidate_style{"path": "style.json"}

{"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.

maplibrecompare_styles{"before": {"url": "https://tiles.openfreemap.org/styles/liberty"}, "after": {"path": "style.json"}, "center": [12.5, 55.68], "zoom": 10, "width": 600, "height": 450}

Left to right: Before, After, and the differences in red.
1.48% of the pixels differ (3986 of 270000).

Copenhagen at zoom 10, before and after, with the motorways turned from orange to red, and a third panel where only the motorways are marked as different

Step 7 of 8

It looks closer

It checks a second place, zoomed in on a motorway interchange.

maplibrecompare_styles{"before": {"url": "https://tiles.openfreemap.org/styles/liberty"}, "after": {"path": "style.json"}, "center": [12.54, 55.63], "zoom": 13, "width": 600, "height": 450}

Left to right: Before, After, and the differences in red.
1.75% of the pixels differ (4733 of 270000).

The E20 interchange on Amager at zoom 13, before and after, with the motorway and its ramps turned red

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 find layers that use a source layer or field the data does not have.

validate_style · describe_style_spec · describe_sources · format_style · migrate_style

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".

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.

render_style · compare_styles · compare_renderers

Copenhagen in 3D, drawn by MapLibre GL JS and by MapLibre Native, with a third panel marking the few pixels that differ — compare_renderers: GL JS and Native agree, apart from where a few labels land.

Show

Show you an interactive map with GeoJSON layers and markers, right in the chat, in clients that support MCP Apps.

show_map

The kind of map show_map puts in the chat. This one is live.