A web standard icon for geotagging at bioneural.net

A web standard icon for geotagging

Published by Bruce on February 21, 2008 in Internet. 32 responses Tags: flickr, geotagging, google, gps, icons, Internet, metadata, microformats, omnigraffle, opml, rss, Travel, webdev.

Geotagging (or geocoding if you prefer) is the act of associating your content (blog posts, photos, feeds, etc.) with a geographic location (e.g. via latitude and longitude co-ordinates). Thus tagged authors can "mash" their content together with the likes of Google Maps, or the Flickr Map if photography is your thing. However, co-ordinates are typically encoded within metadata (or microformat) tags making them visible to machines but hidden from people. We have de facto web standard icons to help identify feeds, OPML, and sharing—so why not for geotagged content?

Update 29.02.08: Thanks to everyone who gave feedback or otherwise contributed to the process of taking this proposal forward. Comments are now closed and further feedback should now be directed to geotagicons.com, where you can now download the new community-designed geotag icon.

The goods

I propose a web standard Geotag Icon, to be used freely by any geotagger or geotagging service. Here is what it looks like at 128px:

At 32px:

And at 16px:

Important: These images are not final; this is a proposal. Please do not hotlink to these images. You can download them individually by right-clicking the one you want, or as part of the draft Geotag Icon Development Kit here.

Family line-up

The family resemblance is obvious:

Why not complete the set? Grab the Feed icon, the OPML icon, and the Open Share icon.

Update 27.03.08: The Open Share Icon Project offers a free, open, community-driven alternative to the trademarked and brand-linked ShareThis.com icon.

Icon specification

It should be similar in style to existing de facto web standard icons (hereafter known as "the Three");
It should be distinctive in colour from the Three;
The colour should in some way represent it's purpose (although this is not a feature of the Three);
It has to be recognizable at 16px yet not look dull at larger sizes;
It should be format-agnostic (it doesn't matter what geotagging method is used);
It should not be closely aligned with iconography from an existing service (e.g. people shouldn't say "Ah, that's the default Google Maps marker!"). That is, it should be service-agnostic.

Inspirations

Words or objects you might associate with geotagging abound. For example, map, compass, navigation, co-ordinates, gridlines, waypoints, pins, markers, X marks the spot, GPS satellites, etc. A Google Image search turns up some rather beautiful yet overly detailed (for our purposes) icon examples, such as Magrathea, geoXtract, RouteBuddy, and HoudahGeo. Some are less delicate (e.g. the button used by the geo microformat or the Geocaching.com logo) but closer to the simplicity we are looking for.

The visual essence of geotagging is marking a point with a pointed object (physical or virtual). In the days before the Internet when I dreamed of travelling the world I had a National Geographic world map on my wall into which I placed pins or tacks to indicate places I'd like to visit. I dug around in my wife's stationery draw and found a few examples:

I think we can all relate to the middle one; it's user-friendly, iconic, and best of all it doesn't get stuck into your heel as easily as the drawing pin when scattered on the floor!

Anatomy of an icon

It might not be an obvious choice, but lacking Illustrator or the skills to use it, I often use OmniGraffle as a drawing tool. The interface is world-class and it can export to a number of formats, including PDF, giving me the option to supply a vector version. Here is the recipe I used if you want to bake your own version, or try out a variation of your own design:

The tack itself is white (with no stroke) to match the central elements of the Three (and it so happens that my model pin was white!). As you increase size, greater detail becomes visible. Crucially the detail degrades gracefully at smaller sizes (16px and 32px shown magnified):

Brown is an oft maligned colour although—as David observed—a tinge of bronze prevents it looking too "dirty". Brown of course is the colour of earth—unless you live in Australia's Red Centre. If you do hail from the Land of Oz don't panic, as the devkit allows you to change the tone (e.g. a red dust effect!) in Photoshop. See the included readme.pdf for details.

Usage examples

It's up to you how you use it, but bear in mind it's not intended as a marker replacement (markers with points are generally more appropriate for that). The idea is to add a visual identifier to your content (blog post, photo, etc.) indicating associated geodata. The image doesn't have to link anywhere, but hyperlinks should be used if it makes sense to do so.

For example, I'm using the Geo Mashup plugin for WordPress and display it in several locations. It appears as an overlay on category images (itself a plugin) that have associated geodata, so you know at a glance that the post pertains to a particular location:

Clicking on the icon transports you to that location on my Google Map (see my Travel category for live examples). The relevant template code is:

<div class="catimage">
	<?php c2c_the_category_image(); ?>
	<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag-overlay">'; GeoMashup::show_on_map_link('<img src="../geotag-16px.png" alt="geotag" />'); echo '</span>'; } ?>
</div>

The class .geotag-overlay is styled in CSS with:

.geotag-overlay { width: 16px; height: 16px; position: absolute; margin-top: 16px; margin-left: -16px; }

The Geotag Icon also appears in the actions box at the foot of an entry, adjacent to the coded co-ordinates and direct link to the location on my Google Map:

The relevant template code is:

<?php $coordinates = GeoMashup::post_coordinates(); if ($coordinates) { echo '<span class="geotag">Geotagged at lat ' . $coordinates['lat'] . ', lng ' . $coordinates['lng'] . ' ('; GeoMashup::show_on_map_link('View'); echo ' on map)</span>'; } ?>

The CSS for such inline use is:

.geotag { padding: 2px 0 2px 20px; background: url('geotag-16px.png') left center no-repeat; }

Finally, it appears in the info window when you click on a map marker next to the post title:

This is done in CSS only, like so (.locationinfo is a styling hook provided by the Geo Mashup plugin):

.locationinfo h2 { font-size: 1.2em; font-weight: bold; background: url('geotag-16px.png') left center no-repeat; text-align: left; padding: 2px 0 2px 20px !important; }

Credits

Thanks to David for getting me interested in geotagging again, and for early feedback on the proposed icon. Matt Brett, Ken Rossi, and Alex King are responsible for promoting the Three.

Your opinion counts

I am not opposed to change, colour or otherwise, if that is what folk ask for. My interest is in helping the semantic web become more visible to people, and the proposal is here to stimulate discussion and hopefully arrive at some form of consensus (to the extent that is possible on the Internet!).

If you have an opinion, please share it here or participate in the discussion on Flickr.

Last modified August 24th, 2008.

Actions Send this article link by e-mail Print this article without other content Follow responses to this article (comments feed) Translate this page: DE | ES | FR Follow tag feeds: flickr, geotagging, google, gps, icons, Internet, metadata, microformats, omnigraffle, opml, rss, Travel, webdev.

32 responses to A web standard icon for geotagging

1 icerabbit
Feb 22nd, 2008 at 2:32 pm

Icon & idea certainly approved. Nice and clean.

I like the design & color. Brown also ties in with official markers of historic & natural sites.

Maybe the white pin could be a bit whiter on the smallest one?
2 Bruce
Feb 22nd, 2008 at 3:04 pm

Brown also ties in with official markers of historic & natural sites.

Good point. In a behind-the-scenes e-mail exchange it has been suggested that red would be a "more typical" alternative pin colour (or a symbolically similar white pin on a red background). I did make a red version (gradient is #990000 fading to #cc3333—also the colour of the inner stroke; the outer stroke is #993333):

It is possible to edit the icon pixel-by-pixel at 16px to stop the brown pin from looking as "muddy" as has been noted (the current version is simply resized in Photoshop). Here I applied the same whitening to the brown icon as to the red icon at 16px:

This makes it very clear that the contrast is better for the red version; it does stand out better at this size (which will likely be the most often used). My original choice of an earthy colour was of course in reference to the Earth. As such I felt the colour could also act as an additional visual cue as to the meaning of the tag. What meaning would red have? In fact I had discarded red on two counts. Firstly there are a number of other red icons; brown doesn't seem so popular. Secondly red invokes a sense of something critical e.g. a warning or a stop sign. We wouldn't want people to think "Is that an error/ warning icon?"

I felt that a red pin with a white background was a non-starter since it won't mimic the "standard" design for the feed/ OMPL/ Share icons and because most people have white page backgrounds, so at 16px especially the icon will become lost on the page.

Note: The icons on this page are .jpg versions; most folk will probably choose to use 8-bit .png, which I'll provide in the dev kit once we've gathered a bit more feedback.

I am coming around the to red version if only because it looks better at 16px as Ken said it would. Any other opinions on this?
3 Ken Rossi
Feb 22nd, 2008 at 3:19 pm

I definitely think the red is the way to go. Works better small and it also stands out amongst all the colors.
4 David
Feb 22nd, 2008 at 4:31 pm

Have to admit that when in use (as above) the red icon is the better.

I guess we now have the rgb gamut (geo/share/opml) range! Oh yes and an orange one. At least it isn't competing for colour like microformats and share.
5 iTagger
Feb 22nd, 2008 at 8:40 pm

I really like the idea of a standard geotag icon and also the reasoning behind the brown colour.

I would use it in this scenario.
Note how the bottom right photo has a globe to indicate the photo is geocoded.

I do agree though that the brown 16px is not quite there yet - but the version in the 2nd post is much better with the improved contrast. Could the pin point be a little sharper to make it look more like a pin? In the 16px version the handle seems too long for the actual pin part - so its not quite as recognisable as a tack as the 32px version (imho).
6 Stephen Paul Weber
Feb 22nd, 2008 at 9:03 pm

Interesting idea -- pin doesn't scream 'location' at me though... isn't a globe/map sort of the more universally recognized icon for location data/functions?
7 Bruce
Feb 22nd, 2008 at 9:07 pm

Thanks Anon. iTagger #5. The vote at Digg is in favour of red—so far. While I do prefer the rationale of brown we have to be practical about what actually works on screen. We could go halfway, as it were, and make the icon reddish-brown. But we don't want people referring to "that funny-coloured icon". We want them to associate orange = feed; blue = ompl; green = share; and .... red = geotagged. Besides, burgundy is harder to spell and some folk might think we're referring to wine regions ;-)

At 16px the sharp end of the pin really needs to be 2px in width to be visible. Besides, we can't have multiple variations on a design that are a function of image size; that would only increase confusion. The design should ideally scale with no editing, but the reality of icons at 16px is that they don't scale down perfectly from 512px originals. Changing a pixel here or a pixel there at 16px is a compromise I think we'll have to make, but I'd be loath to start re-editing the other sizes (which IMHO look fine as they are). You're not seeing it here but the first version had no horizontal shadows; the pin looked Ok at 16px but plain boring at larger sizes.
8 Bruce
Feb 22nd, 2008 at 9:11 pm

isn't a globe/map sort of the more universally recognized

A globe at 128px yes, like some of the examples I linked to under "Inspirations". Probably at 32px if you don't cram in too much detail. But not at 16px. At that small size, which is likely to see the most use, it could be a beach ball, a cauliflower, or an overfed bullet point.
9 icerabbit
Feb 22nd, 2008 at 9:27 pm

I know first hand it can be tough to deal with 16px icons. You can't "tack" down a 1px wide center line so in this case you're forced to make the pin line 2px wide.

One thing I have done in the past is changing proportions, making the subject bigger vs the background (in this case a 1 px border instead of 2). Not sure if that could help with the pin proportion mentioned. Could be that it flat out looks out of proportion. Actually ... see email :)

As a primary the red of course does stand out more than the light brown. Maybe the brown could be a bit darker? To increase the contrast between the pin and background.
10 David
Feb 22nd, 2008 at 9:51 pm

Good to see you here icerabbit (off-topic alert) - any life left in iBlog?

I think if the colour was darker you'd be up against a black blob when reduced (I know I've tried it!) and then there is the added problem of adjusting colour for reduced sizes.

After trial and error and seeing what Bruce was outputting - I changed from an initial liking of brown, to the primary red. As far as globes go, there are plenty around in the menus of Mac applications, .Mac itself and I see your favicon icerabbit ;)
11 Dave Wild
Feb 23rd, 2008 at 6:46 pm

Thanks so much for posting this. The icon is nice, and all of this information has helped me do something I've been wanting to do for ages, but thought it'd be too difficult and cumbersome. Cheers!
12 Hugh Buzacott
Feb 24th, 2008 at 10:11 am

I just threw together an icon with a 'globe' to stick the pin into. I have it in the topic on Flickr, here.

Could you throw up an SVG of the icon; I had to piece together my own.

Thanks,
HBuz
13 Bruce
Feb 24th, 2008 at 12:06 pm

Could you throw up an SVG of the icon

Hugh, here is the most recent iteration as an SVG. I think the pin-stuck-in-globe that you/ Mullenkedheim suggest has definite merit and more opinions on this would be great.
14 Bruce
Feb 24th, 2008 at 10:36 pm

Here's an update on the evolving design. We're still working on the colours but think that this version gives us the "tag" (pushpin) and the "geo" (globe) while scaling pretty well.

What do you think (colour aside)?
15 Ricardo
Feb 25th, 2008 at 2:53 pm

This is me little change version:
http://unicko.deviantart.com/art/Geotagging-78393454

I think this is better, or not?
16 Bruce
Feb 25th, 2008 at 3:18 pm

Hi Ricardo; good work! Those rounded corners are definitely in line with the rounding in the other icons (although the effect is lost at 16px). Our little working group is in agreement with the feedback from the discussion on Flickr that the pushpin alone doesn't pay homage to the "geo" part (as I mention in my previous comment). I happen to like the brown because of the "earth" connection and my association of red with "warnings", but the majority prefer the primary red. Here is the .svg of the latest version (differs from the above in colour, pin placement, and pin-point length). Care to have a go rounding this one?
17 Ricardo
Feb 25th, 2008 at 5:40 pm

Another revision:
18 Bruce
Feb 25th, 2008 at 6:08 pm

Thanks Ricardo. It think the way you detached the globe from the inner stroke works; I'd not considered that. I also like how you've overcome the problem of the pin shaft overlapping the globe without resorting to dividing it into two colours. This visual effect depends upon the globe and the base of the handle being in close proximity; resized to 16px the pin is clear but the curve of the globe is lost to some extent. Nevertheless I happen to like it. Would you do a red version please, using these colours?
19 Sean
Feb 26th, 2008 at 12:34 am

Great work here guys - cant wait to see the babies everywhere!

love the collaboration that ended up designing the much better red push pin with the tilt and the globe.

can't wait to see the finished version with the tilt and the red!
20 David
Feb 26th, 2008 at 2:51 am

I've put some new (second variety!) variants up on a mock-up GeoTagIcon site - based on these:
21 Ricardo
Feb 26th, 2008 at 10:02 am

Ok this is the last revision, i think all is ok.

http://unicko.deviantart.com/art/GEOtag-78471048
22 Ricardo
Feb 26th, 2008 at 12:00 pm

Well this is the final release i made.

http://unicko.deviantart.com/art/GEOtag-final-release-78474984
23 Ricardo
Feb 26th, 2008 at 12:27 pm

Sorry but i made a little diference of the white draw scale.

http://unicko.deviantart.com/art/GEOtag-final-release-78474984

This is the last release.