Opened 9 years ago

Closed 9 years ago

#2787 closed enhancement (fixed)

Add icons to browser pages

Reported by: Dan Karran Owned by: Tom Hughes
Priority: minor Milestone:
Component: website Version:
Keywords: browser, icons, ux Cc:

Description

To try and help provide more at-a-glance information on the browser pages, I've added some CSS rules to add icons to a number of tag value pairs. See http://www.openstreetmap.org/user/dankarran/diary/9770 for more information.

This is an initial patch suggestion, and I'd welcome feedback on things that could be tweaked and improved. In particular, the way we choose which tag keys we choose to pull out, and how that list is maintained over time (the tag value part is all then maintained in the CSS file, so it's easy to add new icons without changing any rails code).

The node icons are based on the mapnik icons, so we'd need to create a copy of them or add them as an svn external or something. The way icons are based on the icons from the key. I think the way icons are a little larger than desired, so perhaps we should look to cut those down when we are displaying them so they don't interrupt the flow too much?

Attachments (10)

browser-icons.1.patch (12.4 KB) - added by Dan Karran 9 years ago.
Picture 103.png (30.2 KB) - added by Dan Karran 9 years ago.
Snapshot of node list on changeset browser
Picture 104.png (42.0 KB) - added by Dan Karran 9 years ago.
Snapshot of node list on way browser
Picture 106.png (16.4 KB) - added by Dan Karran 9 years ago.
Snapshot of way list on node browser
browser-icons.1.2.patch (12.4 KB) - added by Dan Karran 9 years ago.
browser-icons.2.patch (12.3 KB) - added by Dan Karran 9 years ago.
browser-icons.zip (27.4 KB) - added by Dan Karran 9 years ago.
browser-icons.4.patch (15.1 KB) - added by Dan Karran 9 years ago.
browser-icons.css (8.6 KB) - added by Dan Karran 9 years ago.
browser-icons.2.zip (48.3 KB) - added by Dan Karran 9 years ago.

Download all attachments as: .zip

Change History (20)

Changed 9 years ago by Dan Karran

Attachment: browser-icons.1.patch added

Changed 9 years ago by Dan Karran

Attachment: Picture 103.png added

Snapshot of node list on changeset browser

Changed 9 years ago by Dan Karran

Attachment: Picture 104.png added

Snapshot of node list on way browser

Changed 9 years ago by Dan Karran

Attachment: Picture 106.png added

Snapshot of way list on node browser

Changed 9 years ago by Dan Karran

Attachment: browser-icons.1.2.patch added

comment:1 Changed 9 years ago by Dan Karran

Ignore the first patch file, I had a typo in it.

comment:2 Changed 9 years ago by Tom Hughes

The rails code looks broadly ok from a quick look (only a read through - I haven't tried it live) but the main issue that needs to be resolved before we can do anything with this is producing a consistent set of icons that are all the same size.

comment:3 Changed 9 years ago by Dan Karran

When you say consistent, do you mean in terms of size, or also look and feel? The POI icons are mostly the same size (to within a few pixels), but the way icons can differ quite widely.

If it's mostly the way icons that are the issue, could we go just with the node icons for now and then introduce the way icons later, once I've had a chance to make the necessary alterations to them all?

Regarding the rails code, can you spot why it's only giving the first of the matched tags, and not all of them, as I had originally expected the find_all method to do?

comment:4 Changed 9 years ago by Tom Hughes

It was mostly size I was thinking about.

comment:5 Changed 9 years ago by Tom Hughes

Oh, and the multiple tag stuff seems to work for me - try http://osm.compton.nu/browse/node/8 and look at "Hörgárbraut (1)".

Changed 9 years ago by Dan Karran

Attachment: browser-icons.2.patch added

comment:6 Changed 9 years ago by Dan Karran

I've standardised the size of the way icons so they're all 20px to fit in with the node icons, and the column is now the same size for both nodes and ways at 25px. I think this feels better than it did, though not perfect still. I'd rather avoid tweaking the node icons for now so that we can just reuse the Mapnik ones, but I could do that at some point potentially.

I see the multiple tag thing working for me as well now. I've stripped it out for now though - limiting the number of way keys that we look for - as they're only really useful if we can combine icons somehow.

Changed 9 years ago by Dan Karran

Attachment: browser-icons.zip added

Changed 9 years ago by Dan Karran

Attachment: browser-icons.4.patch added

comment:7 Changed 9 years ago by Dan Karran

I've updated the patch and icons to standardise them a bit further, simplified the rails code a little (partly so we only have one list of tag keys to maintain), made the title attributes work for multiple tags (and at the same time include all tags rather than just the pre-selected keys), and added icons to relation members as well.

Does this look like it's at a good enough point that it can be included on the site?

comment:8 Changed 9 years ago by Dan Karran

It's a while since I've done anything with this, but I'm attaching an updated directory of browser icons and the stylesheet. All of the icons are now in the same directory so we don't have to rely on pulling them from different places.

Changed 9 years ago by Dan Karran

Attachment: browser-icons.css added

Changed 9 years ago by Dan Karran

Attachment: browser-icons.2.zip added

comment:9 Changed 9 years ago by Tom Hughes

This has been committed and will be deployed shortly.

comment:10 Changed 9 years ago by Tom Hughes

Resolution: fixed
Status: newclosed
Note: See TracTickets for help on using tickets.