OpenStreetMap

Possible improvements for the data browser pages

Posted by dankarran on 6 March 2010 in English (English)

I've been having a bit of a tinker with the changeset browser pages (e.g.) this evening, trying to improve them a little. It's great to have the browser as a reference, but it's not always easy to pick out objects that have tags on them unless they have a name tag, which would highlight them. For example, picking out nodes in a highway way that have traffic lights on them.

Demo version of icons

By getting rails to add some CSS classes, generated based on a subset of popular tag keys - such as amenity, shop, railway, highway, etc. - and their values to the links, a stylesheet could insert icons either as a generic icon for that tag key, or a more specific one for a particular key=value pair where available. The icons could be the same as the ones used in Mapnik for a bit of consistency, and would also allow for this same behaviour to be exposed in the data browser pane on the map.

The links would look something like:
<a href="/browse/node/296615763" class="node amenity restaurant">Gaucho Grill (296615763, v2)</a>

.. and the CSS something like:

a.node { padding-left: 20px; }
a.node.shop { background: transparent url(shop.png) no-repeat center left; }
a.node.amenity.restaurant { background: transparent url(restaurant.png) no-repeat center left; }

Is this something that people may be interested in seeing?

Comment from rurseekatze on 6 March 2010 at 08:00

Really good idea! It wasn't so user-friendly until now and I often was in a situation, where I first had to look into the details of each node to know which type it is. This feature would be very useful!

You should mention this on the wishlist for the new OSM main page!

Hide this comment

Comment from Gnonthgol on 6 March 2010 at 08:11

Wow, this looks amazing. Just make sure it does not hit performance to much.
Deploy asap.

Ideas for improvment:
Icons on ways as well.
It would be nice to see what way(s) a node belongs to on the same page.

Hide this comment

Comment from lyx on 6 March 2010 at 09:24

I really like it!

Hide this comment

Comment from rendle on 6 March 2010 at 12:52

Would be nice.

Hide this comment

Comment from Siren Torsvik Ornes on 6 March 2010 at 13:20

This would be really nice!

Hide this comment

Comment from robert on 6 March 2010 at 15:28

Any improvements to the changeset browsing are good.

Hide this comment

Comment from Skippern on 7 March 2010 at 19:27

This improvement looks good, both visually and technically. Hope that the RoR part is just as slick so we can have this up and running soon. It will be a great benefit for us who are trying to maintain large areas.

Hide this comment

Comment from dankarran on 7 March 2010 at 19:41

I don't actually have a working rails port site set up to hack on at the moment, so if anybody fancies implementing it, please feel free. Otherwise, I'll hopefully get it set up soon so I can do it :)

Hide this comment

Comment from Philip on 7 March 2010 at 20:50

Great idea :) Whilst you're in there adding the class attribute, it might be good to drop all the name/value pairs of all the node's tags into the 'title' attribute. Then they would show as you hovered over the link (which could then be progressively enhanced by a bit of js).

Hide this comment

Comment from dankarran on 9 March 2010 at 14:17

I got my test site up and running locally, and the ruby code is working. I need to do some more testing and finish adding the classes in, then I'll propose it as a patch to the site maintainers.

Hide this comment

Comment from Edgemaster on 16 March 2010 at 16:20

I only got a quick glance at wherecamp, how's it going?

Hide this comment

Comment from dankarran on 16 March 2010 at 19:13

It's about ready to go I think... The patch is on Trac ticket #2787 if you would like to try it out give any feedback?

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment