My-Tumblr-Map Sep19

Tags

Related Posts

Share This

My-Tumblr-Map

Live Map

For the past 2 months my wife and I have been travelling through Latin America in our slow move from lovely London to sunny California. In the process we have been documenting our trip on a Tumblr page. Being a map guy, it was only a matter of time before I decided to make a map to show our trip geographically. You can see the end result here.Tumblr Maps

I wanted the map to be dynamic so that if new posts were added to the blog or new images added to a post that they would automatically update in the map as well. This way, any updates would only need to be done in one location, Tumblr, and once the map is set up, it shouldn’t need to be touched again.

Initially it would seem that I needed to use the Tumblr API for such a task, which requires registering an app. This would not be too much of a problem except that if other people wanted to do the same, it would be a bit more work and people may loose interest before getting their map off the ground.

Luckily, there is another option: RSS. Tumblr displays all posts in RSS form (unless you turn it off I believe). To find the RSS page for a website, simply write the website’s address and then add ’/RSS’. For instance, the RSS page for mine is ‘natandsaz.tumblr.com/rss’. So, by calling the RSS feed via AJAX, the user gets access to all data relating to the post, images, text, video urls, hashtags and whatever else. So, someone can take any of their own blog posts (or anyone else’s for that matter) and use it however they want.

So there needs to be a way to also feed a geographic point to associate with the post. What I have done is inserted a hashtag ‘#’ for each of my posts that I want to display on the map. By putting it in the #, my latlon will be hidden from the reader, but is still accessible via RSS feed.   I have written mine in the format of ‘latlon10.419397__-75.545754’ where ‘latlon’ is used to tell the JavaScript that I am giving it coordinates to put on a map and ignore all other #’s. I take the string, split it by ‘__’ and I have a new map coordinate.

Obviously, I could have done something clever like try to read the text and try to geocode by geographic location, but I didn’t want markers showing up in the wrong place for my map. For this I decided to do it by hand with a simple right click on Google Maps >> “What’s here” and then get the lat lon info from there. But yes, this does take a bit more time for each blog post.

Once I had the coordinates, it was pretty easy to add them to a map. I especially like using MapBox for this because they have great examples and AMAZINGLY beautiful base maps.

Another aspect worth mentioning is that the AJAX call has to be done a few times if you have more posts than can fit on to one page. For instance, I have my page designed so that only the first 10 posts display. To see older ones, you have to scroll to open ‘Older’ posts which takes you to ‘/pages/2’. In order get all posts, I have created a loop which rolls through all extra pages until no more results are returned. This can be seen on the GitHub page.

Lastly, I have added the map to my tumblr page by inserting it as an iframe. I created mine as a new page so that it is always accessible. This can be done by navigating to “Edit Theme” and then selecting “+ Add a Page”. If you select the “<html>” tag you can go ahead and insert the iframe straight into the text box provided. The iframe code that I used is

“<iframe class=’iframe’ width=’700’ height=’500‘ src=’http://natsmaps.com/My-Tumblr-Map/’ frameborder=’0’ allowfullscreen></iframe>”

Note that this works for the simple theme that we are using for our blog, but I have not tested it out on any other Tumblr pages. So there may be some tweaking require for your particular blog.

All code is available on my GitHub page. Feel Free to contribute.  and check out the full size map.