OsmAnd style override builder

OsmAnd styles are XML files full of colour attributes and rendering properties, and editing them by hand means changing a value, exporting, copying the file to a phone, and restarting the map to see what happened. This app closes that loop: a live preview across four map scenes, a sidebar of every editable field, and a click on the map to jump to the value behind it.

What can be edited

  • 138 colour attributes — the 85 attributes the standard OsmAnd recolor styles override, plus a curated set covering buildings, track and surface tinting, aeroway and maritime details, leisure, access restrictions, and winter extras. Attributes whose values depend on conditional logic are deliberately excluded, because editing only their fallback would be misleading.
  • 43 rendering properties — every UI-facing declaration in default.render.xml: app mode, road style, track colour, show/hide toggles, 3D building options, and so on.
  • The plan-a-route line — the attribute controlling the line OsmAnd draws while a route is being drawn or edited.

Each field can be filtered, reset individually, and is marked when it differs from the OsmAnd default. Hovering a field highlights the corresponding element on the map; clicking an element opens the field that controls it. Opacity has its own control, because many OsmAnd defaults are translucent and a native colour picker cannot express that.

Four scenes

The preview is not one map with everything switched on. Four hand-built scenes cover different scales: a coastal town with a full street grid, harbour, industry, and railway; a country-scale view with a motorway interchange and a ferry crossing; a block-scale street with buildings, driveways, parking, and a construction site; and a mountain trail with landcover, a track whose surface changes along its length, and a glacier.

They are drawn the way OsmAnd composes features rather than as generic shapes: road casings under fills, dashed lines over a thin base, label halos, italic water names, and connected geometry.

Practical details

The app starts from the stock OsmAnd default style; existing styles come in through Import. Undo and redo, save slots, and import/export are included. A separate check-styles script validates a .render.xml for the mistakes that make OsmAnd refuse to load it, most importantly reference order.

The baselines are baked into TypeScript tables, so the editor does not need the original XML at runtime.

Built with

  • React
  • TypeScript
  • Vite
  • SVG
  • OsmAnd rendering XML
← All projects