[OSM-dev] Some OpenLayers-based OSM hacking

Christopher Schmidt crschmidt at metacarta.com
Mon Oct 15 00:25:58 BST 2007

Hello Dev --

I've been doing some OSM hacking based on OpenLayers trying to figure
out what we need to put into OpenLayers for 2.6 to make OpenLayers a
more reasonable tool for working with OSM data.

To that end, here are a couple of the things I've been working on:


OSM data drawn in SVG over mapnik tiles. (These are mapnik only because 
reprojection support isn't in OpenLayers yet: I'm actively workin on
that, and it will be in 2.6 in some form, and may be in OpenLayers in
the next couple weeks.) 

This view has a couple interesting things about it:
 * You can click on any of the ways/nodes to see the attributes
   they have. 
 * Nodes are only displayed if they're not part of an existing way.
   This is something that will eventually be worked on, but for now, it
   makes it really easy to find nodes not attached to a way in this
   OpenLayers UI.

 * Adding a .osm file is as simple as: 
    gml = new OpenLayers.Layer.GML("OSM", "xml/cambridgeport.osm",
                                   {format: OpenLayers.Format.OSM});  
 * When you change the location of the map, you can download more OSM 
   data for a given area. This works directly from the OSM API -- no 
   transformation of any kind is made -- so the data is fully up to
   date. (This means you can go to an area where mapnik isn't covered,
   but there is new data, and view it by hitting 'download data').

 * The node/way 'view' has a link to two things: directly to the API
   object, and to my other project...

OSM JS Attribute Editing Interface


pass a type, and ID, and you can edit any attributes of a way or node,
or delete it. Loading the data will display the feature on an OpenLayers
Map, so that one can see what they are editing. 

Data is all sent directly from Javascript -- the only server side setup
is a mod_proxy to get around Same Origin restrictions in Javascript, so
this can be dropped in with no work into www.openstreetmap.org .

Note that authorization is performed directly by the OSM server, so this
isn't something where the user has to type in their password and give it
to me (except as a proxy: I promise I'm not keeping it) -- the 401 is
sent directly by osm.org, and the user has to type in their
username/password to update/delete. 

The code for this is in:


Anyone familiar with OpenLayers code should feel right at home with it.

There's a couple mods to OpenLayers for this, which I plan to pull into
2.6: Ajax.js improvements for better PUT support, and the Format.OSM
class for parsing OSM data.

I think the next step forward is to take these two UIs and tie them
closer together -- make them stop being two seperate pages, and make it
just a switch in mode which swaps things around when someone hits
a button. 

I think it would be cool to have something like the attribute editor
available on osm.org (once it's more complete), since it would let
anyone who is creating an OSM map easily able to put a 'update this
street!' click into their page without worrying about setting up
anything in the way of additional server side code -- they just generate
a link, and then the user gets sent to OSM.

Feedback on any parts of this welcome.

Christopher Schmidt

More information about the dev mailing list