The hobomap is here, and in the pages menu. Try it out!
I’m very excited about this. For a long time I’ve wanted a good way to map my outings and adventures. The WordPress Geo Plugin provides a way to map a single post, which I’ve made use of for some time, but I always wanted to be able to see the post locations all together. When Google Maps released their mapping engine to the non-profit-seeking public, the door opened. I still have to go back to and put coordinates in for my Pacific Crest Trail hike, but almost all my other travels are there together on one map at last! It starts by default at the most recent geocoded post.
WordPress Users
I’ve created a Geo Mashup WordPress Plugin that enables the creation of a similar map on any WordPress site.
Technical Details
I gather that this kind of thing is called a Google Maps Mashup. The key piece is the Google Maps API. I had to supply to post locations, which I did by writing a small PHP server to query posts by their geo metadata and return the results in XML. The hobomap calls this to create the markers at the post locations within the current map view. When a marker is clicked, it calls the WordPress RSS server (wp-rss2.php) to get XML for each post at that location, combines them, and displays the combination in an info window above the marker.
I had to brush up on my JavaScript and learn about AJAX, the XML DOM, and XSLT.
13 responses to “Introducing the hobomap!”
Wow! That map is amazing. I loved it. I’m thinking you could do this for anything, like a memoir. Just click on the pin and you get a story for that place. I’m inspired.
Thanks! People are thinking of all sorts of uses for maps like this, as evidenced at Google Maps Mania. I think we’ll be seeing lots more of them.
This would be great for you and Ann’s honeymoon trip too! How cool. Is it a lot of extra work to encorporate the text to the pins?
It’s there! Zoom out so you can see the whole US – the bike tour and CDT pins are pretty obvious.
All I have to do is enter the latitude and longitude in my posts. When you click on a pin, it looks up the text of the post.
Hey, neat idea
This is awesome!!! I can’t wait to try and implement this into my own website. Thanks for laying out how you did it!
Weird. The plugin works fairly well for me in IE, yet it zooms improperly to an island north of Hudson Bay, Canada in FF. That happens in any theme.
Works for me in both, I go straight to New Orleans. There is a stylesheet problem – I use the h2 tag in the infowindow, which isn’t very good with your stylesheet. If you add something like
.locationinfo h2 {
margin:0;
width:100%;
text-aligin:left;
}
things will start to shape up.
I really can’t imagine why I would start in the correct location but not you. I’m thinking…
-dylan-
Dylan, thanks for the help; Geomashup Mardi Gras is running smoothly. I edited the post.xsl and posts.xsl files like you suggested, and the infowindow’s title position defaulted left, a good thing.
To recap in one place, the other problems I had were a)ampersands don’t behave properly in the textwindows (a script keeps running and FF and IE slow way down or freeze), b)I had to flush my cache and site cookies to see how the plugin was working, and c) if you set a post to be published in the future, it shows up on the map as a blank infowindow until it actually gets published. That’s more of a cool feature than a criticism, though ;).
It would be extremely nice if geomashup could run for different maps; I’d like to write a different page that orients to Yosemite to track several hikes. Maybe I’m missing something, but it seems the plugin only handles a single page.
Again, awesome work, and thanks!
Thank you for the feedback – it should help make the next version better!
Hi, I’m using this over at my website, a great tool. Thanks!
However, in this post, http://googlefact.blogspot.com/2006/04/gmap-v2-resizemap.html
google say “all API users would be forced to upgrade from v1 in approximately a month (5/03/2006)”.
Is this going to cause much pain? Are you planning to release a version to take account of this?
There is a similar site doing this with phone calls:
http://streetstory.org/
using audio, instead of text…
i wonder – how do you put multiple posts on 1 spot ???
I just list the post titles, dates, and categories in the infowindow, without the summary.