Blogger Mapping Options

1/17/2010 Update: Blogger's Geotagging method is still only available in draft mode after over a year. It has been broken a couple of times and there is still no Blogger supported method for geotagging posts via email.

Note: This post was originally posted on BlogsMapr (our BlurbBits Blogger playground). We wanted to test/support the new Blogger-in-Draft geotagging editor and answer some questions about why you'd want to geotagged posts (can you believe they asked?). We continue to use BlurbBits in our Sailing Blog (via standard Blogger) because it supports remote blogging, has more configurability AND you can specify a locations zoom level on a post by post basis. We have a documented migration path for when the editor becomes more mainstream (and by then we'll be sure to have a utility).

Now What?

You've defined post locations via Blogger-in-Draft, our position text input (for Mail-to-blogger) or by adding stand alone BlurbBits to your posts (to add routes and photos etc).. So now what?

Well we've been GeoBlogging for 3.5 years, using Blogger to track our 5 year 30,000 mile sailing trip, so we've got some ideas and some tools. Here are some cool things you can do with BlurbBits and related utilities.

• Blogger Popup maps and a Dynamic GeoBlog Summary map
  Each post with a defined location will have a popup map within your Blog. In addition, a GeoBlogs on this Page summary map is dynamically created based on the posts on each page. If posts are filtered by searching, labels or selecting an archive month or year, the map will automatically change to show only the relevant geoblog posts. It's a great way to visualize blogs locations for a year or specific area (via label).
  
  
  
  Open our Sailing Blog (standard Blogger) or BlurbBits Playground (Blogger-in-draft) and notice the View map links. They were automatically added via our gadget.
  
  Click on the link to display a quick Google Static Map of the location directly within Blogger (no new page to open). An additional click, in the map, will display the zoomed out view. Try selecting a Blog Archive month and watch the Geo-Blogs map change.
  
• Navigate your blog via an interactive map
  
  
  
  Not only do you get to see your blog locations on an interactive map, we also extract a summary of each post and the first photo for a preview. We maintain the map and open your blog pages directly in the window below (select from the list on the top right or click the [more] link in the preview). The map stays persistent allowing the user to smoothly navigate your geoblog posts.
  
  
  
  On the Add Page Element page click Edit Content and adjust YOURBLOG to the correct location (ie. YOURBLOG.blogspot.com .. blogsmapr for this Blog). If you use FTP posted blogs change blogger=YOURBLOG to bloggerid=BLOGID (blogID=XXX in the post editor URL). Click here for more BlurbsViewr details and options.
• Extract a map for selected Blog posts to embed or email. Maps can be customized based on the desired number of posts and/or filtered by categories/labels. Click the i Info button to select various publishing options. The BlurbBits in the sidebar were extracted from other blogs. Learn how to adjust the widget size for sidebar vs post installs.
  
• Create a "Where Blog map" to embed or email showing the latest geoblog location with a link to the latest post. Same as above using &mv=where and &mi=in.
• Create a GeoBlog photo album. This method extracts the first photo (so make it good) and the post location to create a photo album for the blog. Posts which are geotagged will appear with a Location map button. A short blog summary can be previewed by selecting the notes button. Add &bp=1 to the extract a map example.
  
  Photos stored online with Picasa or Flickr can be displayed in the same album BlurbBit format, examples are scattered throughout all our blogs.
  

Check out our BlurbBits basics section for more details. Most of our sailing blogs were created using Mail-to-Blogger and updated once we got to port and an internet connection.

To see all of our online Sailing content including our Webpage journals and photos, Youtube videos, Blogger posts and KML GPS tracks click here. This data was entered in the BlurbsBits Mapr scratchpad which can be uploaded to the web via Google Spreadsheets.

Blogger Gadget Overload

You may have seen this banner after you've published a Blogger blog. When you click on the link you literally get thousands of gadgets that are available to add to your Blog sidebar. I've seen plenty of blogs slowed down with too many sidebar gadgets; remember it says choose from thousands, not add them all.

What's the Problem?

The sidebar gets loaded for each and every blog post/page that is viewed. This is fine for some gadgets that change dynamically or load quickly, but for others it just slows down your page load times. Maps and Photos are the perfect example. Once a user has seen the map or looked at the photos they are done. They don't need to see them over and over again, yet they will continue to pay the performance hit EVERY time they visit ANY post/page on your site. Also, the sidebar gadgets are only available within the Blogger environment and are not viewable to followers and those who use your Blogger RSS feed (blog posts are). You wouldn't put a blog post in the sidebar, so why do people put too many gadgets in the sidebar? .. because gadgets make it easy!!

BlurbBits can easily be added to either the side bar or the blog post, just think of them as gadgets that can be published in posts!!

Performance Matters

Even if you are "just" a simple blogger, you have entered the world of website design and the constant balance between performance and visual content. Surveys suggest that if your page doesn't load in 8 seconds, you'll lose up to a 1/3 of your visitors.. but photos, maps and gadgets all enhance the attractiveness of the site, so it's a fine balance. Some bloggers add as many gadgets, photos, and wizbang features they can think of, hoping to increase the chance that something will catch someones eye, but instead end up losing viewers who aren't willing to wait.

If you have a "global" blog you also need to think about users who use older/slower computers with slow internet connections. We frequently get bogged down and frustrated with slow pages during our round the world sailing trip.

Add a Post

Our solution for complex/slow loading or one time use features is to add them to a separate blog post. The slow loading code gets loaded once, and only after the user has chosen to view it. We've also tried to make it just as easy to add a BlurbBit to a blog post as it is to add a sidebar gadget (via publishing options). Update with the new additions to our Dynamic GeoBlog maps you can increase your performance even more by adding slower loading items in the expanded post section and/or adding BlurbBits as links (to posts or the sidebar).

Another reason people add a sidebar gadget is to highlight/feature specific content. You can still highlight posts using a link or HTML/JavaScript gadget which points to your post URLs. Make sure you get the correct URL by clicking on the Title of the post you want to link to (the format should be BLOGURL/YEAR/MONTH/title.html). We use the HTML/Javascript gadget because it is the most flexible. You can have simple links (like the getting started links on the top right) or image links (like svbillabong). See Blogger's guide to basic HTML or this page for more details.

BlurbBits-Sidebar vs Post

We've optimized the performance of BlurbBits for both sidebar and in post use. When BlurbBits are used with online photos the photos are not loaded until the user selects a photo viewing option (improving load times). Most embedded slideshows load the photos and degrade performance during the critical initial page display (including those with autoplay disabled) even if they are way down on the page or sidebar and are not even viewable to the reader.

We use Google static maps in our BlurbBit maps to enhance performance for both in post and sidebar maps. We don't force our slower loading interactive map on everyone, but instead allow users to chose it through our sidebar link gadget. And once we open our interactive map we keep it open (and persistent), changing your blog posts instead of rebuilding the map on every page (as a standard sidebar map does).

We also offer Dynamic GeoBlog maps which are perfect for the sidebar. The map changes automatically based on your blog pages content. Your latest location will appear highlighted on your blogs home page, while an archive or label selection will show your mapped locations for the selected period or label. We even add a popup map within Blogger to highlight a post location for those that were emailed remotely or end up hidden by partial post methods.

We are not suggesting you get rid of all your sidebar gadgets, just suggesting that you think about the usage model and decide whether or not to add a BlurbBit as a sidebar gadget or in a post (see publishing options). Here are a some good sidebar uses:

• Picasa Albums SideBar
  Since this BlurbBit opens each album (via Open Link) in a medium BlurbBit popup, the user can see photos for all your albums quickly. New albums or changes to existing albums will automatically be updated. An individual album can also be published to a sidebar BlurbBit but it is much nicer in a post size BlurbBit. See Online Photos for more details. Note: you can hide the top BlurbBit menu with the far right arrow button.
• Travel Blog Tracking
  The Blogger extract parameters can be used to a quick blog history map or another blogs Where map. The BlurbBits will be automatically updated when changes to the blogs are made.
• Travel Route
  Use the BlurbBits Mapr utility to quickly draw you travel route (planned or actual). Then load it into a route map sidebar gadget.
• Extracted data
  We can also extract data from various sources including winlink, Google Spreadsheets, GeoRSS feeds and moblog photo maps.
  

Keeping up with the changes

As you start adding BlurbBits to posts it can be hard to keep your readers informed of the changes. The good news is all of your new BlurbBit post will appear at the top of your page (and in your feed) so those are covered. If you add BlurbBits to older posts or change a post date (to make the travel track work) the blog order can get jumbled and it's hard for existing readers to keep track of your updates (but better than miss-dating a post).

When we add major new features to our blog sidebar (like interactive maps) we usually write a "news release" post just to keep people in the loop (and focus them). You can also use a Blogger feed to get a list of changes. Just like BlurbBits, your Blogger feed can be configured via Url Parameters (see Blogger example and Full parameter descriptions).

You can use the orderby=updated parameter to see the recent changes you've made to your blogs (by date is the default) but this will show ANY updates you've made including small typo fixes etc. You can also search for blogs with a certain labels using the category=label parameter. If you label blogs with featupd (or anything else) you can combine the two parameters to get a feed for your featured updates. Then you can label/unlabel posts based on those changes you wish to highlight. See our example for BlurbBits latest Blogger updates. You can add this as a feed as a link in your sidebar. We are already prototyping some enhanced functionality for BlurbBit links!!

Picasa - Remote Photo Editing

We love traveling to remote places, taking lots of pictures and sharing our experiences through our Blogs. One of our main issues is the lack of internet access because most photo sharing sites force you to make collections and albums online.

Picasa is great because you can add captions and tags, edit and organize your photos into albums all without internet access. You can even Geotag your Picasa photos in Google Earth while it is offline. Then once you find an internet connection you can upload your photos to your Picasa Web Albums and easily turn them into BlurbBit Albums that you can add to your Blog Posts.

Picasa is really two tools, Picasa which lives on your local computer (and manipulates your local photos) and Picasa Web Albums which manages photos you choose to upload and share on the web (BlurbBits uses these). Note: BlurbBit references to Picasa relate to the shared web albums.

Upload via Direct Internet Connection

If we have a direct Internet connection we use Picasa Upload (from your computer).

Choose or Create an Album, Select the Image size. Since we usually only use the photos for our blog, we use the small size to save space and prevent printing of our photos.

Upload at Internet Cafe

If we don't have direct access, we use Picasa Export to save the selected photos to a new folder.



Then we copy the directory to a USB stick. Once you are at the internet Cafe, Log onto Web Albums and use the Upload button. Select or create a new album and add the files from your stick, it's a little slower this way but sometimes it beats lugging your computer to the Cafe.

If you use Flickr or another photo sharing site, use Picasa Export to save the selected photos to a new folder. Upload the photos from the new folder using your sites uploading instructions.

MoBlogging and Photo Maps

Picasa Web Albums supports email upload or you can use Blogger to upload your blog text and photos from a remote location. Check out the details here.

Photo Album and Map

Once an album is uploaded you can map the photo albums. This is much easier than geotagging ALL your individual photos (we support both). We also make it easy to build a BlurbBit (w/Map + Photos) using the BlurbBits Mapr. If you add the resulting BlurbBit to a blog post, we use it to determine the posts location. Once we have the posts location we can map that too, all that from a single mapped Picasa Album!! If you add/modify the photos or change captions/notes to photos in the album, all the changes will appear in the BlurbBit automatically.

Note: the same process can be used remotely with any non-web based photo editing tool that saves Exif data (like Adobe Photoshop Lightroom) . Test a couple of photos (raw vs jpeg) to make sure you have complete data (captions and geotags) before going too crazy. We do need the photos online (Picasa or Flickr) to gain access to them. Picasa has good synchronization between your photos on the PC and the Web Albums.

MoBlogging - Blogger on the Go

Update: We are also reviewing posterous for remote email blogging AND photo sharing. Posterous' focus is "dead simple" blogging via email. Blogger's email functionality is very limited and support/updates to the email method are non-existent.

Sometimes you want to blog but you can't access the internet directly (i.e you're in the middle of the ocean 1000 of miles from the nearest Internet Cafe).

BlurbBits for this Entry

Blogger has two methods to support moblogging which can be used to add text, a small photo, or both (hey I didn't make up the term).

• Mail-To-Blogger
  95% of our sailing blog posts were created this way and since BlurbBits also supports the extraction of Lat/Long from the post text, maps can be made from the middle of no where.. literally! We edit, organize and caption/tag our photos underway and then upload them into BlurbBit Photos Albums once we find internet. You can also use tags/labels to filter the photos to match your post content. Here's an example Picasa Album Post (made using a geotagged Picasa Album in the BlurbBits Mapr).
• Blogger-Mobile
  Send an MMS to go@blogger.com to create your mobile blog.

Geo MoBlog Photo Maps

Note: this section is mostly applicable to Blogger-Mobile users who take photos with a GPS enabled device and want to map their tracks through photos NOT blog post content.

If your photos are geotagged (either manually or via a geotagging enabled phone) you can easily create a photo based map of your travels. When images are uploaded to Blogger, an album is automatically created in Picasa Web Albums. Go there, find your Blogs Album and click on the link (notice the AuthKey in the URL you'll need that).

In the examples below, use the i (Info) button to view the embedding options. Use the Blogger AddGadget button to add to the sidebar and the BlogThis button to add to as a new post. Adjust the &width and &height to match your blog layout size and usage (sidebar vs post).

Interactive Examples:

&picasa=SailBillabong:IndianOceanPictures&pm=1&width=220&height=200&mark=smallred&smark=smallred

Our Indian Ocean Photos Mapped

&picasa=SailBillabong:IndianOceanPictures:start-index=10&pm=1&width=220&height=200&mark=smallred&smark=smallred

Skip the first 10 photos from our Photos Above.

&picasa=SailBillabong:IndianOceanPictures:start-index=10

Show the Album Photos to find the correct start-index.

&picasa=SailBillabong:Sailing2007&pm=1&mark=midredx&smark=smallred&width=220&height=200

The Sailing2007 map from SailBillabong (try Sailing2004, Sailing2005, Sailing2006). The X mark represents the end of the year location

&picasa=SailBillabong:BillabongAtSea:authkey=VtVRMtCavYI&pm=1&width=220&height=200&mark=smallorange

The BloggerAtSea Blog Album map. Unpublished Albums require AuthKey shown in Album Url

Picasa orders their feeds starting with the first photo taken, so you may need to adjust the start-index to focus on a certain portion of the trip. Leave off the &pm=1 and make sure you are starting with the correct photo. Once you have completed a trip you can copy a set of photos into a new Album which details the trip. Do not move or delete the photos, they will be removed from the Blog post.

I have already seen photo blogs dedicated only to geotagged photos for tracking purposes. The photos are usually horrible quality and the posts don't include text, which in my mind is pretty much a completely useless Blog. If you are only using photos to track your travels it makes more sense to use Picasas email upload.

Picasa Email Upload

Picasa also supports email upload of photos and you can place them into specific albums by using an existing album name as the email subject. If your mobile device supports geotagging you can easily get a map of just that album using the method above, use the album name to differentiate various trips. You can even highlight your favorite photos in a BlurbbBits photo album in a Blog post about your trip.

Interactive Travel Photo Maps

You can even use the same data to build an interactive map by using the same URL parameters with the BlurbsViewr.

Here's the BlurbsViewr map for our Indian Ocean Pictures (?picasa=SailBillabong:IndianOceanPictures).

If your photos are taken sequentially along your travel path you can add &tt=travel&mi=out to the URL to create a Travel Tracking Path with a calculated total distance - (select Trip Summary from the list in the upper right).

Extracting geotagged data

If you have a GPS Enabled phone or an automatic method for geotagging your photos, the location data you need is already hidden inside it. You can easily extract the Lat/Lng data using the BlurbBits Mapr and then use it to geotag your blog posts.

Here's the Indian Ocean Pictures. Click on sidebar list to navigate/zoom to a photo. The Center Lat,Lng,Z: field is the Lat/Lng and zoom of the photo location. Use the first two fields for the Lat/Lng in the Blogger-in-draft location editor to geotag the Blogger post (don't forget to remove the comma).

You can also use mapr to add a BlurbBit map of this location into your blog post. If you are using the non draft version of Blogger, this also allows the blog post to be mapped.

Migrating Lat/Lng to Blogger Geotags

I have been following Blogger's announcement Blogger in Draft: New feature: Geotagging and noticed that some users are having a hard time finding their exact post locations. I have also seen various informal "geotagging" techniques used around various Blogger sites; Google Maps, Google Static maps, KML/KMZ files or text input and all geotagged photos contain the lat/lng data within the Exif data. All of these methods require knowledge of the exact Lat/Long for the marker (ie. post location). Since all of our Sailing Blogs are tagged with Lat/Lng, I thought I'd detail the migration path.

Blogger-in-Draft Location Editor



Enter a space separated Lat Lng pair into the search box of the Blogger-in-Draft location editor and click Search. This will zoom the map to the correct location but leave the Location link name blank. Zoom out (using the - button), the Location link name should now appear.

Adjusting the Location String

The Location string is determined via the reverse geocoder which will sometimes result in Unknown Location. You can adjust the Location name by clicking on the Location Link under the search box (next to Location:) and entering the desired Location text.

When I first tested direct lat/lng entry it didn't appear to work correctly (user error? Bug Fix?). Sometimes the result would shift back to the reverse geocoded result instead of the Lat/Lng in the search string.

Finding a Lat/Lng

There are lots of ways to get the Lat/Lng of a location/address including Wikipedia (good for tourist locations) or by extracting the data from geotagged photos (from a mobile device or automatic geotagging software).

Dynamic Blogger GeoBlog Maps

Since Blogger-in-Draft announced geotagging support, we thought we would add some quick maps to highlight blog posts locations. This gadget locates the geotagged posts on each blog page and adds a link next to the new location footer or at the top of the post for other BlurbBit/text tagging methods. Update: now it does even more (expandable posts, popup maps/photos).



Clicking on the link will display a BlurbBits map directly on the page within Blogger (i.e. no new windows/tabs for your readers to get lost on). If geotagged posts are found, they are also added to a Geo-Blogs on this Page summary map. This map will dynamically change based on the page content and is very helpful for visualizing the locations of posts filtered via searches, labels or archives. Visit our Sailing Blog for a Blogger example (with zoom level definition) or check out our Map your Blogs playground for a Blogger-in-Draft example.

With geoblogs on this page summary map

Click to Add (Blogger post location version)

Click to Add (lat/lng text version)

Without geoblogs summary map(popups only)

Click to Add (Blogger post location version)

Click to Add (lat/lng text version)

This gadget is only supported with Blogger layout templates (the default), contact us to migrate your old or custom non-standard template blogs.

Interactive Maps (non-sidebar maps)

Check out the BlurbsViewr navigation map for a great way to navigate your blogs from a persistent interactive map. We even have specific Blogger mapping options to add an interactive map button (and more).

Adjusting your dynamic maps

Edit the HTML/Javascript Gadget

• Use pw and ph options to adjust the width and height of the resulting map popup.
  zooms is used to adjust the zoom levels for the resulting map (in and out).
  
• Adjust the size of the Geo Blogs map via the "geomap" width and height style parameters.
  We also use it's background-color to customize the popup.
  

Most other options are explained in the Customizing a BlurbBits map section. We will be expanding the documentation in the near future.

Refreshing your Browser

During the testing/modification of your blog posts and gadget it is necessary to refresh your browser to get the latest available data.

Refreshing your Browser in Firefox

• Press the shift key on your keyboard and keep it held down.
• Click reload on Firefox's graphical toolbar menu.
• Keep your finger on the shift key until you see the page reload.

Refreshing your Browser in Internet Explorer

• Press the shift key on your keyboard and keep it held down.
• Select view from the Internet Explorer file menu and click refresh .
• Keep your finger on the shift key until you see the page reload.

New Geotagged Blogger Posts

We've been geo-blogging with Blogger ever since the second post of our Sailing blog back in June 2005. It is such a great way to track our travels and keep people up to date with not only what we are up to, but where we are. Most of our friends and family had no idea where Kiribati, Eritrea or the Maldives are, let alone the remote anchorages we love to visit.

Blogger has just announced support for geotagging which is currently available only through Blogger in draft. This feature allows users to specify a location for each blog post and outputs it as a GeoRSS feed. Check out the announcement for some known issues.

We have updated BlurbBits to support the Blogger GeoRSS output in addition to our existing text (for Mail-to-Blogger) and BlurbBit (including optional zoom and path) geotagging formats . This will allow users to view their geotagged posts in the BlurbsViewr (an enhanced blogmap) and/or extract various maps/views into stand alone BlurbBits.

To learn more about BlurbBits start here or check out our basic BlurbsViewr Blogview.

For Blogger viewing options with examples, check out our Blogger BlurbBits Playground.

We are VERY excited about the new native Blogger Geotagging support and will be looking for additional ways to enhance your geo-blogging Blogger experience.

Stay tuned for updates. Comments and feedback are always appreciated.