I’ve also noticed that Flickr seems to be making use of microformats. If you look at a photo which has geo data added to it via the Flickr Organizer and you’ve got a microformats plugin in your browser, you’ll notice you’ll be able to look up the location on Google Maps (or similar depending on which plugin you’re using). This is good news. Microformats are very lightweight and easy to implement, but obviousy the big players are going to need to buy in to them for them to really start to have any impact. Nice one Flickr, and hopefully a right move in the direction of greater interoperability between Web2.0 applications.
Archive for the ‘web2.0’ Category
KML and microformats in Flickr
Wednesday, August 15th, 2007
Just noticed that you can now export Flickr photo data in two new formats: as a GeoRSS feed and as KML so you can view your photos within Google Maps. I’m not sure why Flickr (which is owned by Yahoo) would be that bothered providing a Google export format, but it’s welcome all the same.
KML overlays in Google Maps in two minutes
Saturday, June 23rd, 2007
Following on from the Google Developer Day a few weeks back, in which we were all encouraged to encode our geographical data in KML format (Google can index data encoded in KML), I thought I’d have a play around with KML overlays in Google Maps. KML is used mainly to mark up overlays in Google Earth, but a subset of it is available for use in Google Maps.
The title of this post is a little misleading — show me anything you can do in Google Maps in two minutes and I’ll buy you a bun. By the time you’ve worked out the longitude and latitude references for your map and its placemarks you’ve probably lost a couple of hours at least but we’ll brush over that for now.
However, using KML overlays for maps can save you a bit of time fiddling around with the API when creating your markers and setting the event listeners and the like. Encode your data in a KML file, point your maps script at it and much of the work is done. It’s not quite as flexible as using the API, but for a basic map it will save you some time. What’s more, you can use your KML file on the Google Maps site, export it for use in Google Earth and get your data indexed on Google.
I’ve created a basic example which plots three points of interest in Greenwich, London. The references may not be very accurate but I don’t care, it’s a demonstration. First create your KML file. This is a XML file with a .kml extension:
<kml xmlns="http://earth.google.com/kml/2.1"> <Document> <name>A small map of Greenwich</name> <description>A very basic map of Greenwich, SE10 made to demonstrate KML overlays</description> <placemark> <name>The National Maritime Museum</name> <description> <!--[CDATA[ <!-- html code goes in here --> ]]--> </description> </placemark> <point> <coordinates> -0.003747,51.481154,-1 </coordinates> </point> </Document> </kml>
Then create your Javascript file. Create an instance of GGeoXML and give it the location of your KML file. Then use the overlay method of GMap2 to overlay it on your map. Be warned that your KML files will be cached by Google Maps which can be a tad frustrating when you’re trying to debug your file. To avoid caching, add a query string parameter to your file name with a value of the date and time (this will change every second which should be enough for you). E.g.
url_end = "?nocache=" + (new Date()).valueOf();
myKML = "http://www.myserver.com/kml.file" + url_end
var map = new GMap2(document.getElementById("map"));
// Add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
geoxml = new GGeoXml(myKML);
map.addOverlay(geoxml);
That’s about it.
If you want to play with the code yourself, don’t forget you’ll need to substitute my maps API key for yours.
A couple of things to look out for
Make sure you keep the CDATA sections in the placemark description tag, otherwise you’ll need to escape your html with entities.
Don’t bother putting class names into the HTML in your KML file’s description tags as these will be stripped by Google Maps. Google Maps uses inline styles instead. Ouch. To get round this problem you can build some styles in your map page stylesheet. As a default Firefox will display the text of the name element of your placemark in bold, although Internet Explorer 7 won’t. I got round this problem thus:
#map div { font-weight:bold;}
#map #iwsw p { font-weight:normal !important;}
The iwsw id is what appears to be generated around your placemark window, so you can use this to cascade your styles down.
If you make a syntax error in your KML file, you won’t get any warnings — it just won’t display. It may be best to edit your file as .xml file in your editor of choice and then save it out as .kml.
Web2.0 for grown ups
Wednesday, June 20th, 2007
Hmm, Web2.0. A means to realise previously untapped creative potential or another forum for the socially inept to talk about themselves? Well, everyone must have their own tag-enabled, social networking loves and hates. For me, Flickr is the stand-out site. A good simple idea with loads of cool functionality and a great looking user interface. Share your photos with friends and actually learn something about photography, great. In the other corner is of course MySpace. As far as I can see it’s only true purpose is to to set back web design by ten years.
A relative newcomer to the Web2.0 marketplace, Revish.com aims to be a place where “people can share their reading experiences”. Basically, it’s a site where users can post reviews of books they have read and rate them. It also has the usual trappings of a Web2.0 site: tagging, the ability to add contacts and join groups, all glued together by a nice bit of Ajax. Revish is aiming higher than some sites: reviews must be over 250 words long (but shorter than 1000) and there are guidelines for submitting them. Is this Web.20 for grown ups?
It’s early days yet for Revish, so it’s hard to tell how this will go, but so far the reviews I’ve read on the site have been well-thought out and largely well-written. One obvious problem it might encounter is that it takes considerably longer to read a book and write a considered review of it than it does to say, take a photo and upload it. Looking at the number of recent reviews it doesn’t look like they’ll be facing a storage space crisis soon but having said that, reviews are being added at a consistent rate. Having a critical mass of content is obviously vital for a site like this, so let’s hope it keeps going.
Visitors to Revish can browse the latest reviews or search the catalogue, which defaults to Amazon.co.uk, although this can be changed once you’ve registered. They can also search for book reviews. The fun really begins when you’ve registered however. Once you’ve set up your profile, you can create lists of books that you’re reading or plan to read, and rate or review the books you’ve read. You can also add other users as contacts should you feel like it.
The user interface is clean and unfussy with not a rounded corner in site. More exciting for standardistas is that the site is built to XHTML 1.0 strict. The little green tick on my Firefox HTML validator stays proudly displayed on every page from the site. It’s a shame that this should be news, but how many other Web2.0 sites make any decent stab at standards compliance?
Staying with technical build, another notable feature is the site’s use of microformats. I’m still to be convinced of the practical applications of these, but I haven’t really read the books and the blogs so maybe I’ll see the light yet. Having installed Operator, the Firefox microformats plugin I’m invited to find similarly-tagged bookmarks on Del.icio.us and photos on Flickr when opening a review page. Revish also pulls in photos from Flickr that have been tagged with the appropriate machine tags, e.g. book:isbn, book:author and book:title. These features may appear superficially gimmicky, but they do indicate Revish’s intention to play nicely with other web apps; as do the links following each review inviting you to add the page to your app of choice: Digg, Del.icio.us, Furl and the like.
Integration with other applications does appear to be at the heart of Revish. As mentioned, the site’s catalogue is pulled from Amazon, and when you register, you can enter your Flickr Id and pull your icon and details over from Flickr. You can also enter details of your pages on other applications like Last.fm and Del.icio.us. This is a nice touch; and I can only imagine the fun the developers must have had with all the various APIs.
I’d like to see a couple of new features added. I think there’s a real need for some basic content management functionality when writing reviews. At present a review is live as soon as you’ve clicked the save button; the ability to save reviews as drafts and then publish them would be a great help. Otherwise, you’re at the mercy of copying and pasting from other programs — no doubt contributing to the problem of itinerant escaped nbsps turning up in reviews. I’d also like to see a Flickr-style ability to see how many times your review has been read by people other than yourself. At present every time I want to check this, I bump up the viewing statistics by one. Considering how many times I had to edit one of the reviews after it went live, the number of views is probably as much of a work of fiction as the book itself.
Revish’s relatively small size means it has a friendly community feel to it, and the team seem genuinely keen to hear from users. I hope this bodes well for the future of the site, and that the momentum can be sustained.