Simple Map Editor

From OpenStreetMap Wiki
Jump to navigation Jump to search


The editor is a web page which displays editable map features as an overlay over the regular OSM map or the satellite imagery. Clicking on a map feature displays information about that feature, which can be edited. Also, new features can be added.




  • Overlay display of existing editable features (updates as map is dragged)
  • Method for positioning new features (points of interest)
  • Popup display of feature information
  • Saving of changes to the API


The existing editors are fairly complex and are useful tools for more complex edits. An easy tool for making simple edits will allow new users to quickly gain facility and confidence with contributing to the project. Also, a simple tool for doing small edits would benefit more experienced users who want to make quick corrections and additions.


The editor will focus on simpler edits. Contributors will be able to change such things as names and highway and amenity tags, and add points of interest with basic information. The editor will allow contributors to add information with requiring a lot of understanding of the underlying data model, but will provide gentle guidance to understanding it.


The editor will show a map similar to the one on the main page, but with an overlay of editable features and an area with simple instructions. The overlay will appear when the user is zoomed in far enough for editing; otherwise, a message will be displayed explaining that the map must be zoomed in further to make edits. Editable features will be loaded as the map is panned. Panning and zooming will be done in the same way as the map on the main page.

Clicking on an editable feature will display a popup, the contents of which will depend on the type of feature clicked. For example, clicking on a road could display the road's name and the type of road. The feature's name and other information about it will be editable. For example, the name of a road would be in an editable text box. There will be some way to save changes and some way to dismiss the popup and cancel making changes. Upon saving, there will be some confirmation that the changes have been saved.

HTML mockups of the methods for displaying map feature information can be found at (BROKEN LINK)

Some method will exist for placing new features. New features will be limited to single nodes; way drawing will not be possible. The method for adding new features will be either a "pin drop" method, where clicking a button places a marker on the map, which can be dragged to adjust its position, or a "crosshairs" method, where an indicator for the position of new features is shown.


  +-----------+          +----------+        +--------------+
  |           |   HTTP   |          |   JS   |              |
  |  OSM API  | <------> |  Editor  | <----> |  OpenLayers  |
  |           |          |          |        |              |
  +-----------+          +----------+        +--------------+

Moving the map

  1. OpenLayers notifies the editor of new position
  2. If necessary, editor calls the API to ask for map data
  3. Editor asks OpenLayers to draw the new map data

Editing a feature

  1. OpenLayers notifies the editor that a feature has been clicked on
  2. Editor asks OpenLayers to display a popup
  3. Edits made with the popup are confirmed or cancelled
  4. If the edits are confirmed, the editor calls the API to make the edits

Adding a feature

  1. Editor asks OpenLayers to place a marker
  2. OpenLayers tells the editor about changes to the marker's position
  3. Editor tells OpenLayers to display a popup
  4. The addition is confirmed or cancelled
  5. If the addition is confirmed, the editor calls the API to make the addition

Personal Data/Authentication

HTTP Basic authentication will be used for initial development. After this, the editor will either be "standalone" and OAuth will be used, or it will be built in to the OSM Rails app and the token authentication method Potlatch uses will be used.

Interpretation of data

Because of the free-form nature of the tagging data model, the editor will be required to make decisions about how to interpret the data it receives from the API. First of all, the editor will need to decide which features to draw on the overlay as editable. Second, for any specific feature, the editor will need to decide how to interpret the data and display it in a form for editing.

The editor will have a list of rules, available as a configuration file, for determining what to do. Development will start with a simple case, such as editing street names. For this example, the "highway" tag would be used to determine what features to display. As the project progresses, more complex cases will be developed as need dictates.


Translated versions of tags will be shown, along with user interface copy and other text. Translations for tags will come from the existing translations in the Rails app. Locale will be determined with the API. Translations will use a system similar to that which the Rails app uses: a collection of locale files with translations and a helper function for translating strings. Either a translation file will be downloaded by the editor or several localized versions of the editor (as HTML files) will be produced by a script.


For each of the following editing tasks, 2-4 weeks:

  • Editing points of interest (Problems: How are points of interest selected for editing? What data should be exposed for editing and how should it be manipulated? Is it possible to move points of interest?)
  • Editing street names (Problems: Similar to editing points of interest. How are streets selected? What data is available to edit and how?)
  • Adding points of interest (Problems: How to position a new point of interest?)

To bring the tasks the editor performs together in a single interface, 1 week.

To hook up the editor to the real OpenStreetMap API and develop a patch to the current website or produce standalone OAuth version, 1-2 weeks.

For each of the editing tasks above, the following milestones:

  • Produce HTML mockup and refine with the help of mentor
  • Produce initial working version, which communicates with the development API
  • Test and refine with the help of mentor and the community

Mid-term milestone

By the mid-term evaluation data, it will (at least) be possible for the editor to show relevant map features, allow the user to select a feature, and to change the name of that feature. The editor will run against the development API.