I Am Here Map (with apologies to Simon)

I finally got fed up of hunting around for simple latitude/longitude tools when messing around with mapping APIs, so I built my own with a memorable URL.

— Simon Willison

Simon will be remembered for many things and I hope one of them is getlatlon.com. It's a remarkably simple site — you drag a map around and it displays the latitude and longitude of the center point — but it insanely useful for all kinds of things and no one, before Simon, had managed to put two and two together. It was definitely a Duh! moment for me.

I use it all the time, now, and I needed something like it for a side project I'm working on. My first thought was to clone Simon's work but when Tom, from Stamen, told me that they had been working on an (still) experimental Javascript branch of the ModestMaps code I decided to try that instead.

Most days I still haven't gotten over the initial shock and awe of seeing Google Maps for the first time but at a certain point All-Things-Google-All-The-Time starts to feel like walking on thin ice. They're doing just fine competing on features (a good thing!) but I think it's important we also continue build and support an infrastructure of tools that people can run and host themselves.

With that in mind, I set out to write my own getlatlon map tool last week. It's called I Am Here Map and on Sunday I finally pushed it out the door.

• It does basic getlatlon-style lookups
• It does geocoding using either the Google Maps or Flickr APIs. It's part of the plan to support a variety of other geocoding services soon.
• It does reverse geocoding, using the Flickr API.
• It will fetch and display the shapefile for associated with a point, assuming it's been reverse geocoded successfully.
• It does client-side geolocation/positioning (aka find my location) using a variety of third-party services.
• It allows for an arbitrary number of map tile providers and styles. At the moment, there is only one tile provider: CloudMade.
• The whole thing, including core dependencies, is bundled in a single Javascript file and loaded with a couple lines of code.

Like this:

(Map data CCBYSA 2009 OpenStreetMap.org contributors, because that's an early screenshot before I added proper attribution.)

This is what the code to generate that map looks like:

                        // as in <script src="iamheremap.js"></script>
                        // and   <div id="map"></div>

                        var args = {
                        	'modestmaps_provider' : 'CloudMade',
                        	'flickr_apikey' : 'YER_FLICKR_APIKEY',
                        	'cloudmade_apikey' : 'YER_CLOUDMADE_APIKEY',
                        	'map_style' : 999,
                                'map_height' : 480,
                                'map_width' : 640,
                        };

                        window.map = new info.aaronland.iamhere.Map('map', args);

You can see a live demo over here, using a different style, specifically Matt Jones' Image of the City tiles:

http://www.aaronland.info/iamhere#style=2241

The style= stuff isn't part of the default install but it's a simple example of the sort of thing you can do. At the moment there are no standard controls to toggle between n number of map views/tiles but that's obviously a good next step. It's also one of the things that ModestMaps makes really easy!

I am pleased and excited by all of this. One of the things I talked about at PaperCamp was the desire to get back to building some of the online tools for Papernet projects. That includes a generic list-map-store style interface for things like geotagging Twitter posts, a new and Moar Bettar version of deliciousmaps and the Other Thing (with the Stuff).

The I Am Here Map is not that toolkit but it's a building block, at least.

As usual, the code and a list of known-knowns (this has only been tested in Firefox and Safari, for example) is available over on Github:

http://github.com/straup/js-iamheremap/

Enjoy!