Journal tags: geo

Remember when I wrote about adding travel maps to my site at the recent Indie Web Camp Brighton? I must confess that the last line I wrote was an attempt to catch a fish from the river of the lazy web:

It’s a shame that I can’t use the lovely Stamen watercolour tiles for these static maps though.

In the spirit of Cunningham’s Law, I was hoping that somebody was going to respond with “It’s totally possible to use Stamen’s watercolour tiles for static maps, dumbass—look!” (to which my response would have been “thank you very much!”).

Alas, no such response was forthcoming. The hoped-for schooling never forthcame.

Still, I couldn’t quite let go of the idea of using those lovely watercolour maps somewhere on my site. But I had decided that dynamic maps would have been overkill for my archive pages:

Sure, it looked good, but displaying the map required requests for a script, a style sheet, and multiple map tiles.

Then I had a thought. What if I keep the static maps on my archive pages, but make them clickable? Then, on the other end of that link, I can have the dynamic version. In other words, what if I had a separate URL just for the dynamic maps?

These seemed like a good plan to me, so while I was travelling by Eurostar—the only way to travel—back from the lovely city of Antwerp where I had been speaking at Full Stack Europe, I started hacking away on making the dynamic maps even more dynamic. After all, now that they were going to have their own pages, I could go all out with any fancy features I wanted.

I kept coming back to my original goal:

I was looking for something more like the maps in Indiana Jones films—a line drawn from place to place to show the movement over time.

I found a plug-in for Leaflet.js that animates polylines—thanks, Iván! With a bit of wrangling, I was able to get it to animate between the lat/lon points of whichever archive section the map was in. Rather than have it play out automatically, I also added a control so that you can start and stop the animation. While I was at it, I decided to make that “play/pause” button do something else too. Ahem.

If you’d like to see the maps in action, click the “play” button on any of these maps:

• Everything from this August.
• Links from June 2017.
• Photos from October 2014.
• The entirety of 2018—that might take a while.

You get the idea. It’s all very silly really. It’s right up there with the time I made my sparklines playable. But that’s kind of the point. It’s my website so I can do whatever I want with it, no matter how silly.

First of all, the research department for adactio.com (that’s me) came up with the idea. Then that had to be sold in to upper management (that’s me too). A team was spun up to handle design and development (consisting of me and me). Finally, the finished result went live thanks to the tireless efforts of the adactio.com ops group (that would be me). Any feedback should be directed at the marketing department (no idea who that is).

It was Indie Web Camp Brighton on the weekend. After a day of thought-provoking discussions, I thoroughly enjoyed spending the second day tinkering on my website.

For a while now, I’ve wanted to add maps to my monthly archive pages (to accompany the calendar heatmaps I added at a previous Indie Web Camp). Whenever I post anything to my site—a blog post, a note, a link—it’s timestamped and geotagged. I thought it would be fun to expose that in a glanceable way. A map seems like the right medium for that, but I wanted to avoid the obvious route of dropping a load of pins on a map. Instead I was looking for something more like the maps in Indiana Jones films—a line drawn from place to place to show the movement over time.

I talked to Aaron about this and his advice was that a client-side JavaScript embedded map would be the easiest option. But that seemed like overkill to me. This map didn’t need to be pannable or zoomable; just glanceable. So I decided to see if how far I could get with a static map. I timeboxed two hours for it.

After two hours, I admitted defeat.

I was able to find the kind of static maps I wanted from Mapbox—I’m already using them for my check-ins. I could even add a polyline, which is exactly what I wanted. But instead of passing latitude and longitude co-ordinates for the points on the polyline, the docs explain that I needed to provide …cur ominous thunder and lightning… The Encoded Polyline Algorithm Format.

Go to that link. I’ll wait.

Did you read through the eleven steps of instructions? Did you also think it was a piss take?

1. Take the initial signed value.
2. Multiply it by 1e5.
3. Convert that decimal value to binary.
4. Left-shift the binary value one bit.
5. If the original decimal value is negative, invert this encoding.
6. Break the binary value out into 5-bit chunks.
7. Place the 5-bit chunks into reverse order.
8. OR each value with 0x20 if another bit chunk follows.
9. Convert each value to decimal.
10. Add 63 to each value.
11. Convert each value to its ASCII equivalent.

This was way beyond my brain’s pay grade. But surely someone else had written the code I needed? I did some Duck Duck Going and found a piece of PHP code to do the encoding. It didn’t work. I Ducked Ducked and Went some more. I found a different piece of PHP code. That didn’t work either.

At this point, my allotted time was up. If I wanted to have something to demo by the end of the day, I needed to switch gears. So I did.

I used Leaflet.js to create the maps I wanted using client-side JavaScript. Here’s the JavaScript code I wrote.

It waits until the page has finished loading, then it searches for any instances of the h-geo microformat (a way of encoding latitude and longitude coordinates in HTML). If there are three or more, it generates a script element to pull in the Leaflet library, and a corresponding style element. Then it draws the map with the polyline on it. I ended up using Stamen’s beautiful watercolour map tiles.

That’s what I demoed at the end of the day.

But I wasn’t happy with it.

Sure, it looked good, but displaying the map required requests for a script, a style sheet, and multiple map tiles. I made sure that it didn’t hold up the loading of the rest of the page, but it still felt wasteful.

So after Indie Web Camp, I went back to investigate static maps again. This time I did finally manage to find some PHP code for encoding lat/lon coordinates into a polyline that worked. Finally I was able to construct URLs for a static map image that displays a line connecting multiple points with a line.

I’ve put this maps on any of the archive pages that also have calendar heat maps. Some examples:

• Everything from August 2019
• Notes from July 2018
• Links from June 2017
• Photos from October 2014
• Journal entries from December 2012

If you go back much further than that, the maps start to trail off. That’s because I wasn’t geotagging everything from the start.

I’m pretty happy with the final results. It’s certainly far more responsible from a performance point of view. Oh, and I’ve also got the maps inside a picture element so that I can swap out the tiles if you switch to dark mode.

It’s a shame that I can’t use the lovely Stamen watercolour tiles for these static maps though.

It’s been just a week since Clearleft unveiled the Map Tales project that we built at Hackfarm and there have already been some great stories told with the site.

Paul documented his 2009 road trip to South by Southwest.

Alessio put together a photographic guide to his adopted home, showing the secrets of Barcelona.

Andy told two tales of two different trips: wine-tasting in California’s Dry Creek Valley and hanging with the hipsters in East London.

Fellow Brightonian Tom Prior has recreated the story of the famous Stirling Moss victory at the 1955 Mille Miglia, the legendary open-road endurance race in Northern Italy.

I love the simplicity of Oliver and Peter Walk to School that Peter Ruk has embedded on his site—beautifully simple psychogeography.

I’ve made a map tale of the voyage of The Beagle with material fromAboutDarwin.com.

Meanwhile Anna is putting together the tale of the Terra Nova expedition to the South Pole because—get this—a relative of hers was part of Scott’s team!

There’s plenty of room for improvement with Map Tales. It would be nice to have customisation options at some point—colours, fonts, maybe even map tiles. Some narratives would probably work better with aerial imagery, for example. In fact, that’s something that Andy has been tirelessly tinkering with. To get a taste of how that looks, check out Britain From Above, the epic map tale of the 2008 BBC documentary series.

It’s hard to believe that it’s been half a decade since The Show from Ze Frank graced our tubes with its daily updates. Five years ago to the day, he recorded the greatest three minutes of speech ever committed to video.

In the midst of his challenge to find the ugliest MySpace page ever, he received this comment:

Having an ugly Myspace contest is like having a contest to see who can eat the most cheeseburgers in 24 hours… You’re mocking people who, for the most part, have no taste or artistic training.

Ze’s response is a manifesto to the democratic transformative disruptive power of the web. It is magnificent.

In Myspace, millions of people have opted out of pre-made templates that “work” in exchange for ugly. Ugly when compared to pre-existing notions of taste is a bummer. But ugly as a representation of mass experimentation and learning is pretty damn cool.

Regardless of what you might think, the actions you take to make your Myspace page ugly are pretty sophisticated. Over time as consumer-created media engulfs the other kind, it’s possible that completely new norms develop around the notions of talent and artistic ability.

Spot on.

That’s one of the reasons why I dread the inevitable GeoCities-style shutdown of MySpace. Let’s face it, it’s only a matter of time. And when it does get shut down, we will forever lose a treasure trove of self-expression on a scale never seen before in the history of the planet. That’s so much more important than whether it’s ugly or not. As Phil wrote about the ugly and neglected fragments of Geocities:

GeoCities is an awful, ugly, decrepit mess. And this is why it will be sorely missed. It’s not only a fine example of the amateur web vernacular but much of it is an increasingly rare example of a period web vernacular. GeoCities sites show what normal, non-designer, people will create if given the tools available around the turn of the millennium.

Substitute MySpace for GeoCities and you get an idea of the loss we are facing.

Let’s not make the same mistake twice.

When I first heard that Yahoo were planning to bulldoze Geocities, I was livid. After I blogged in anger, I was taken to task for jumping the gun. Give ‘em a chance, I was told. They may yet do something to save all that history.

They did fuck all. They told Archive.org what URLs to spider and left it up to them to do the best they could with preserving internet history. Meanwhile, Jason Scott continued his crusade to save as much as he could:

This is fifteen years and decades of man-hours of work that you’re destroying, blowing away because it looks better on the bottom line.

We are losing a piece of internet history. We are losing the destinations of millions of inbound links. But most importantly we are losing people’s dreams and memories.

Geocities dies today. This is a bad day for the internet. This is a bad day for our collective culture. In my opinion, this is also a bad day for Yahoo. I, for one, will find it a lot harder to trust a company that finds this to be acceptable behaviour …despite the very cool and powerful APIs produced by the very smart and passionate developers within the same company.

I hope that my friends who work at Yahoo understand that when I pour vitriol upon their company, I am not aiming at them. Yahoo has no shortage of clever people. But clearly they are down in the trenches doing development, not in the upper echelons making the decision to butcher Geocities. It’s those people, the decision makers, that I refer to as twunts. Fuckwits. Cockbadgers. Pisstards.

We have some new location-centric toys to play with. Let the hacking commence.

Flickr has released its shapefiles dataset for free (as in beer, as in it would be nice if you mentioned where you got the free beer). These shapefiles are bounding boxes that have been generated by the action of humans correcting suggested place names for geotagged photos. Tom put this data to good use with his neighbourhood boundaries app.

Speaking of excellent location-driven creations by Tom, be sure to check out Clarke; a little OS X app that updates your FireEagle location every five minutes by triangulating your position with Skyhook.

Meanwhile, in another part of Yahoo, Placemaker has been released in Beta form. It looks very nifty indeed. Pass it some human-readable text and it will try to figure out what physical locations are mentioned in the text. You can help it along by using structured data like the geo and adr microformats, but it seems to be pretty good at natural language parsing. Christian has put together some good examples to illustrate his JavaScript Placemaker/YQL mashup.

Slowly but surely we’re heading towards a future where everything is geotagged.

They’re trying to keep it quiet but Yahoo are planning to destroy their Geocities property. All those URLs, all that content, all those memories will be lost …like tears in the rain.

Jason Scott is mobilising but he needs help:

I can’t do this alone. I’m going to be pulling data from these twitching, blood-in-mouth websites for weeks, in the background. I could use help, even if we end up being redundant. More is better. We’re in #archiveteam on EFnet. Stop by. Bring bandwidth and disks. Help me save Geocities. Not because we love it. We hate it. But if you only save the things you love, your archive is a very poor reflection indeed.

I’m seething with anger. I hope I can tap into that anger to do something productive. This situation cannot stand. It reinforces my previously-stated opinion that Yahoo is behaving like a dribbling moronic company.

You may not care about Geocities. Keep in mind that this is the same company that owns Flickr, Upcoming, Delicious and Fire Eagle. It is no longer clear to me why I should entrust my data to silos owned by a company behaving in such an irresponsible, callous, cold-hearted way.

What would Steven Pemberton do?

Update: As numerous Yahoo employees are pointing out on Twitter, no data has been destroyed yet; no links have rotted. My toys-from-pram-throwage may yet prove to be completely unfounded. Jim invokes Hanlon’s razor, seeing parallels with amazonfail, so overblown is my moral outrage. Fair point. I should give Yahoo time to prove themselves worthy guardians. As a customer of Yahoo’s other services, and as someone who cares about online history, I’ll be watching to see how Yahoo deals with this situation and I hope they deal with it well (archiving data, redirecting links).

Like I said above, I hope I can turn my anger into something productive. Clearly I’m not doing a very good job of that right now.

There’s been some really interesting stuff coming out of Mozilla Labs lately. The latest toy is a plugin called Geode.

It’s based on the W3C editor’s draft geolocation API. In a nutshell, it allows you to provide your location to a website at the click of a button. You can try it for yourself on Pownce.

Now, I have no idea where it’s getting the location data from—probably a mixture of WiFi and network information a la Plazes—but I don’t need to know or care. What’s important is that it works. It works to such an extent that it’s close to being indistinguishable from magic. Sitting in the Clearleft office at 28 Kensington Street in Brighton, Geode updated my Pownce location as 9 Kensington Street in Brighton. That’s pretty damn close.

Little by little, we’re getting there:

I look forward to the day when geostamps are as ubiquitous as timestamps. If every image, every blog post, every video, every sound file had a longitude and latitude as well as a date and time… I can’t even begin to imagine the possibilities that would open up.

A couple of months ago I wrote:

Jessica speculated a while back about reverse Google Maps. Suppose that when you entered an address, instead of just showing you the top-down view of that point on the planet, you also got to see how the sky would look from that point. Enter a postcode; view the corresponding starmap.

It isn’t in Google Maps yet but it is in Google Earth. The newest version features a button labeled “Switch between Sky and Earth”. This new Sky feature allows you to navigate photographs of space taken from the Palomar observatory and the Hubble telescope. It’s just one more example of what you can do with geodata.

Location information is the basis for a lot of the mashups out there—of which, Overplot remains my favourite. The possibilities in mashing up geodata with timestamps are almost limitless.

Getting datetime information is relatively easy. Every file created on a computer has a timestamp. Almost everything published on the Web is also timestamped: that’s the basis of lifestreams.

I look forward to the day when geostamps are as ubiquitous as timestamps. If every image, every blog post, every video, every sound file had a longitude and latitude as well as a date and time… I can’t even begin to imagine the possibilities that would open up.

I’m not the only one thinking about this. Responding to the question, what parts of the Web need to be improved or fixed in order for the Web of today to evolve into the Web of the future?, Jeff Veen writes:

I wish every device that was capable of talking to the network could send its geolocation. I’d like this to be fundamental—let’s send longitude and latitude in the HTTP header of every request. Let’s make it as ubiquitous and accessible as the time stamp, user agent, and referring URL.

This doesn’t necessarily mean that every electronic device needs to be geo-aware. As long as devices can communicate easily, you may ever only need one location-aware device. Suppose my phone has GPS or some other way of pinpointing location. As long as that device can communicate with my computer, perhaps using Bluetooth, then my computer can know my location: a very short string of two numbers. Once my computer has that data, my location can be broadcast and a whole ecosystem of services can be enhanced. Sites built around travel or events are the obvious winners but I can imagine huge benefits for music sites, photo sharing or any kind of social networking site that boils down to real-world activity.

The technology isn’t quite ubiquitous enough yet and there are privacy concerns (though the granularity of geodata negates a lot of the worst fears) but I hope that as the usefulness of geodata becomes clearer, location enhanced services can really begin to bloom.

When Eric and Tantek where in Sydney for Web Essentials 2005 they went off on a little jaunt that Eric dubbed urban spelunking. They went in search of locations from The Matrix, which was filmed in Sydney, donchyaknow.

“That looks like fun”, I thought. When I found myself in Sydney for Web Directions South, I resolved to follow in the footsteps of the futuristic hero dressed in black… no, not Neo; Tantek. I used location information gathered from Tantek's photos to find some street addresses. I also managed to find a couple of locations of my own.

Off I went with Jessica in tow and camera in hand. The resultant photos are up on Flickr. Evidently, I'm not the only one who got a kick out of this: the pictures have been dugg, sending their viewing figures into five digits.

For anyone else who wants to do a Matrix tour of Sydney, here's a list of locations and time stamps from the movie. They're all geotagged and encoded in hCard so you can go ahead and extract that data.

Upcoming.org has rolled out some changes. The visual design has been tweaked, particularly on the events pages.

The colours and typography are looking very good indeed. The change to the way attendees are listed inline doesn’t work quite as well. I’m not the only one who thinks so. But instead of just bitching about it like me, others have provided mockups as part of their constructive criticism.

While this latest update is one of the biggest changes that has been rolled out on the site, it certainly isn’t the first. In fact, Upcoming seems to be in a constant state of gradual change and improvement.

There’s a lot of talk these days about iterative design, but Upcoming is one of the few places where I’ve noticed it in action. The design has been improving gradually and almost imperceptibly. Did anyone notice when the top banner changed from being a solid colour to a gradient? I wish now that I had taken screenshots of Upcoming every few weeks. They would make for an interesting time-lapse movie.

The Yahooiness of Upcoming is beginning to make itself felt. You can now migrate your Flickr buddy icon over to Upcoming. Also, if you tag photos on Flickr with “upcoming:event={event id}”, they will show up on the corresponding event page. Then there’s the maps integration.

Both Upcoming and Flickr are now making use of Yahoo maps. The Flickr map exploration page is, like so many things on Flickr, a real time-sink. It’s fun browsing photos with the added context of location.

But — and it’s a big but — Yahoo’s mapping data for Europe is particularly poor. So don’t expect too much detail when you’re browsing holiday snapshots from Brighton. I blame crown copyright myself (though I do wonder how Google has managed to get such detailed data).

As part of this latest iteration, Flickr are moving away from using tags for geocoding:

As a bonus there will be no more need for the unsightly “geotagged/geo:lat/geo:long” tags cluttering up your photos - we’ll offer an automated way to remove them all once the development community has had a chance to make the necessary changes to their code.

I’m not sure that’s such a good idea. There’s nothing wrong with using visible geographical co-ordinates. I’d prefer to keep my meta-data visible, thank you very much.

Back in March, during South by Southwest, Tantek asked me if I’d like to sit in on his microformats panel alongside Chris Messina and Norm! The audio recording of the panel is now available through the conference podcast.

I’ve taken the liberty of having the recording transcribed (using castingWords.com) and I’ve posted a tidied up version of the transcript to the articles section: Microformats: Evolving the Web. You can listen along through the articles RSS feed which doubles up as a podcast.

I’ve also posted the transcript on the microformats wiki so that others can edit it if they catch any glaring mistakes in the transcription.

During the panel I talked about Adactio Austin, a fairly trivial use of microformats but one that I’ve been building upon. I’d like to provide some cut’n’paste JavaScript that would allow people to get some added value from using microformats. Supposing you have a bunch of locations marked up in hCard with geotags, you could drop in a script and have a map appear showing those locations.

Perhaps the geotagging won’t even be necessary. Google added a geocoder to their mapping API two weeks ago. The UK, alas, is not yet supported (probably because the Post Office won’t let go of its monopoly that easily… Postman Pat, your money-grabbing days are numbered).

Unfortunately, Google Maps isn’t very suited to the cut’n’paste idea: you have to register a different API key for each domain where you want to use the mapping API.

The Yahoo maps API is less draconian about registration but its lack of detailed UK maps makes it a non-starter for me.

Maybe I should step away from maps and concentrate on events instead. It probably wouldn’t be too hard too write a script to create a calendar based on any hCalendar data found in a document. Perhaps I’ll investigate the calendar widget from Yahoo.

Ultimately I’d like to create something like Chris’s Mapendar idea. If only there were enough hours in the day.

At the risk of becoming API-watch Central, I feel I must point out some nifty new features that have been added to Upcoming.org.

Andy and the gang have been diligently geotagging events using Yahoo’s geocoder API. Best of all, these latitude and longitude co-ordinates are now also being exposed through the API. Methinks Adactio Austin won’t be the last mashing up of event and map data I’ll be doing.

On the Upcoming site itself, you can now limit the number of attendees for an event, edit any venues you’ve added and edit your comments. This comes just a few days after Brian Suda mentioned in a chat that he would like to have the option to edit this comment later (right now he’s looking for somewhere to stay during XTech).

Feature wished for; feature added. This is exactly the kind of iterative, evolutionary growth that goes a long way towards what Kathy Sierra calls creating passionate users. By all accounts, her panel at South by Southwest was nothing short of outstanding. Everyone I spoke to who attended was raving about it for days. Muggins here missed it but I have a good excuse. I was busy signing freshly-purchased books, so I can’t complain.