The OSM Editor

The iD editor is a new Javascript map editor initiated by Richard Fairhurst, the author of Potlatch 2, the current default editing experience for OpenStreetMap. One of OSM’s clearest needs is a good map editor - it’s the difference between new users becoming consistent contributors or being scared away by the complexity of mapping.

The idea of a new editor is a much-discussed topic - Potlatch 2 is built on Flash, and the advanced editor option, JOSM, can be intimidating even to the tech-savvy.


iD is exciting because it’s a smart approach to building the future - for the most part, it’s taking knowledge from Richard’s and others’ work with Potlatch to make a stable, modular layer for OSM data model. From there, we’re working on building a great user interface that’s intuitive and simple, but not limiting.

The initial work on iD used the dojo framework as a library and source of structure. I’ve been working in the past week to limit this dependency - it now uses underscore.js for functional programming mechanisms and jQuery for DOM & AJAX.

The biggest change recently is moving to d3 for data-binding and graphics. We’re using d3.geo.mercator as the map projection, d3.behavior.zoom for navigating the map, and d3.behavior.drag for dragging handle points for ways and points for POIs.

The map tiling component is extremely minimal - less than 100 lines of javascript. The emphasis of the project will really be on keeping rendering fast & light and then focusing on the functionality of the editor, which will require extensive work with the OSM object model, an undo system, and the various APIs.

Currently the MapCSS backend dependency has been removed, and replaced with a simpler system that operates by simple CSS classes added to path elements and styling functions for deriving icons from points. This seems to work well, and basic d3 functionality like sorting selections works well to replicate OSM’s layer and bridge rendering priorities.

For instance, here’s the current sorting function:

function waystack(a, b) {
    if (!a || !b) return 0;
    if (a.tags.layer !== undefined && b.tags.layer !== undefined) {
        return a.tags.layer - b.tags.layer;
    if (a.tags.bridge) return 1;
    if (b.tags.bridge) return -1;
    var as = 0, bs = 0;
    if (a.tags.highway && b.tags.highway) {
        as -= highway_stack.indexOf(a.tags.highway);
        bs -= highway_stack.indexOf(b.tags.highway);
    return as - bs;

I’ve started on basic testing using Jasmine, though test coverage needs a lot of improvement.

The really cool thing is that iD has iD.Node, iD.Way, and iD.Relation - Javascript wrappers for basic bits of OSM that we can reason about. So, in the course of building an editor it’s handy to have shortcuts like activeWay.isClosed(), and combine these with ‘actions’ - essentially stock operations, like adding nodes to ways.

Immediate Future Plans

Creating an editor can be fraught: you can make a system in which people unknowingly duplicate, delete, or corrupt OpenStreetMap data. So it’s important that iD is being built with previous experience and lots of tests - and ideally this process will lead to thorough documentation on how to do things the right way, as well.

Right now text labels are turned off due to an apparent limitation of SVG’s textPath element. This is a top priority to get back. On the bright side, the refactor allows us to use use and defs elements to reduce the duplication of paths for lines.

I’ve also started to rebuild UI elements, like a tag editor with the new system and with lightweight HTML+CSS that can be styled nicely. These bits are a bit tricky, and are intertwined with the issue of whether to keep multiple versions of objects or to store transformations between versions.


If you’d like to help out, or just git clone and kick the tires, see the GitHub repository for iD. Right now there’s a lot moving - so pardon the dust - but it’s a fun early look at a really big change for OSM.

Devlogging work on the OpenStreetMap project by the MapBox team.

Much of this work is currently focused on improvements to OpenStreetMap funded by the Knight Foundation

Follow our work here on this blog or subscribe to our Twitter feed. You can subscribe to this blog’s feed or follow us at