Interactive BlurbsViewr Maps

Add a map to navigate your website or blog posts

Interactive maps have been around for ages but most people embed them directly into their page. This means that every time a user changes pages the map needs to be reloaded and built again.. and again.. and again!! If your map has a lot of data this can be painful and time consuming and the view changes during each reload losing the continuity you were trying to gain by adding the map in the first place. Maps can be made quicker by only having one location but then what's the point, why not use Static maps or a BlurbBit (two zooms + title) instead?

Now I'm sure you've also seen maps that allow you to navigate to other pages. They either stuff all the information in a tiny info window or open in another window or tab. To get to the actual page, you usually have to wait while the map adjusts the info window.. one click on the map icon, wait... , find the link in the info window and click it, find the tab.. uggh. I know because I used the exact solution for our sites.



The BlurbsViewr opens your pages directly in a window below the map, allowing us to maintain the map while your site changes your pages. Users can navigate the context of the map and your pages quickly while maintaining continuity of the complete "picture". They can also find additional content nearby whether it's your own content, like photos or videos near the blog, or through optional layers like Wikipedia and Panoramio photos. Here's an example that ties ALL of our our sailing sites together: our SailBillabong.com Journals, Photos, You Tube videos and our svbillabong.blogspot.com blog. The map will open with a preview of our latest post and position automatically extracted from our blog.

Use the drop down menu list (top right corner) to navigate the content or just browse the map (instructions under ?). If you want just a page preview first, disable the Quick Link Option (under Map Type/Extras). If our photos don't do a good enough job describing the area or you want to learn more, enable the Wikipedia and/or Panoramio layers.

So there you have it, a full interactive map to navigate all your geotagged web pages and content. Please let us know what you think!!

Note: This map data was hand entered from our SailBillabong site while the latest blogs are automatically extracted from the Blogger feed data and it's BlurbBits. We can automatically map GeoRSS feeds, geotagged photos, and blogs posts/Web pages tagged with BlurbBits (that also support feeds).

If you use Blogger check out the GeoBlog mapping options and our Travel Blog process.

Geotagging data

If you have a feed (without geotags), try extracting the data with the BlurbBits Mapr and drag the entries into position on the map (don't forget about zoom). Save the data to the Mapr ScratchPad (text tab format) and upload it (or copy paste using Ctrl-C Ctrl-V) into a Google Spreadsheet. Share the spreadsheet and load it into the BlurbsViewr and you've got yourself a pretty cool map. That is the fastest way to get your non geotagged blogs/pages onto the map. Then you can use the data to add go back and add BlurbBits with photos and/or maps where desired (without them nothing extra will appear in your post or feed.. ie no links, photos etc). You can even combine the two, handling historical blogs with a spreadsheet while adding BlurbBits to your new posts.. the best of both worlds.

If your site doesn't support RSS feeds you can easily build a spreadsheet that contains all the data (I said easy NOT quick). The basics are the URL for each entry, a Label and a Description and Type (required). Photos are optional but enhance the preview and the chance that users might click through to the page (you can add these later). Check out the ScratchPad format and options and this sample ScratchPad data.

Url Parameters for BlurbsViewr

All of the data extraction parameters and are supported by the Viewr (&bp=1 is redundant). Online Photos parameters can also be used if they have geotagged data.

Other supported parameters

&mtitle=map title (see Basic Setup)
&mt=map type (see Customizing your map)
&mv=where will zoom map to latest entry at initialization (if location is defined)
&tt=travel Turn on the Trip Tracker
&mi=in|out Defines the initial map view (latest entry or all points)
&zoom=zoom Default zoom value for locations without a zoom
&llz= (initial location) good for highlighting an area of your trip but not a specific point (no marker is added).
&qlno=true disable quicklinks on initialization. Shows a preview first however it is important when custom maps are generated that do not contain URL links to pages (just popups).

Cool Things To Try

Here's some cool things to try with BlurbBits

This assumes you have a little understanding of how BlurbBits and the BlurbBits Mapr work.

Fun with Photos

One of the main reasons we go though the effort of selecting, organizing (tagging and captioning) and cataloging our photos (into albums or sets) is for our own enjoyment. There is nothing like an album of your favorite photos to stir up some memories to reflect on past adventures.

If you don't have a blogger account sign up for one. It's easy and you'll be Blogging in two minutes.

BLURB-THIS - a BlurbBit & Blog for a Picasa Album:

&picalbums=SailBillabong

Photo albums from SailBillabong (try your Username)

• UserName is your Picasa login name
  Login and check the path http://picasweb.google.com/UserName
  ex: use SailBillabong for ...com/SailBillabong
• Learn More

Open the Albums by clicking the Icon and make sure some albums are found for your account. You are also welcome to use ours as an example.

Now run the BlurbBits Mapr with the album URL parameters from above (replace the & with ?). ex: ..setup.html?picalbums=SailBillabong

This will load the Picasa albums in the sidebar and place those with a defined location on the map (ah the glory of data re-use). Click on an album and if it is not already placed, drag it onto the map and click to set the location (and current zoom). If you are using this album to define a Blogs location adjust it as needed. This is where it helps to use the LLZ to pin point the location/zoom and then drag the album to it. Adjust the zoom level if needed; find the zoom level you like and use RMC set Zoom. Adjust the Map or Photo Parameters as necessary (don't forget toggle to update). Try adding these for a start &mark=midredx&smark=tinyred (append to the end of the extras line) . Preview your BlurbBit, open the photostrip and select the photo you feel best summarizes the photos or thoughts. Make any adjustments and re-Preview. Once satisfied, select the i (info) button and click the BlogThis button.

A Blog Your Bit popup will appear. Click the Login button and login into your Blogger account (you only need to do this once). Choose your Blog (if you have more than one) and then write your post; add more details about the trip, add any reflections you may have had or just describe the album. The BlurbBit will replace the [BLURBBIT] tag, so feel free to add text before and/or after. Select Publish Post. The unformatted blog will appear below as a preview, select the link to navigate to the actual blog post (or view Our Sample result .. cheater).

Now that wasn't that bad, you've got a blog post describing your trip or photos, an entire albums worth of photos, complete with captions, geo-photo map, notes and a link to the Picasa photos online. If you have your photos tagged (or in sets via Flickr) you can easily filter them to a specific topic or location that you want to write about. Filter your Photos and write your Blog or write your blog and then find the photos that match your topic.. it's that simple.

Then slice and dice the results into different views...

Interactive Examples:

&blogger=blogsmapr

A Blogger map for blogsmapr.blogspot.com

&blogger=blogsmapr&bp=1

A Blog Album (blogs with photos only)

&blogger=blogsmapr&mv=where&mi=in

A BlurbBits "Where" Blog map with link to latest post and last known location.

And ..
An interactive Blog navagation map with similar viewing options (last location or full view).

When you are finished with the Album don't forget to unset the update toggle or you will overwrite the other albums on subsequent previews. In most cases the update toggle is a good way to set the default preferences for many objects. Picasa albums are the only objects that come pre-configured (so far).

If you want to add a path or route to your album, use the RMC to set the map to add line mode and use left mouse clicks to draw your line (use RMC to stop adding points). Then select the entire path description to the right of the Preview BlurbBit Button and copy it (CTRL-C or RMC copy). Select the album and paste the new path at the end on the Extras line. Don't forget to replace the ? with a & (we'll remind you). Make sure the Select Toggle is enabled and Preview your new addition. Double check your photo maps if you changed the zoom of your album location. If the line doesn't appear make sure the Select toggle in On!! (My Sample Route result).

Now you added a travel map and favorite, last or average position to all the photos, not a bad way to enhance your blog. It doesn't stop there, if you have more than just a blog, you can map ALL your webpages. Here is all of our SailBillabong journals, photo albums (the old way), videos and our blogs (automatically updated).

If you are using a public machine don't forget to logout of your Blogger account.

An interactive Trip Photo Album map

The good thing about maps is they give users a really good sense of your travel destinations. The bad thing is you need to define where you were in order to build them. If you already have geotagged photos they'll automatically appear on the Viewr map. If not ..the thought of geotagging 25,000 photos is mind boggling. The good news is you don't really need to geotag every photo to map them, just the albums or your own web pages that display the photos.

Picasa albums are really easy because you only need to set one location per album and we automatically convert the album into a BlurbBit with all the photos.

Run the BlurbsViewr with your Picasa Album
ex: .../blurbsviewr.html?picalbums=SailBillabong

Your albums will appear with the latest album highlighted. When you open the album (select from the list, click [more] or double click on the icon) the BlurbBit for album photos will open in the window below. Quick and easy way to navigate all you trip photos eh?

There's more.. if your albums represent a single trip (like ours) you can create a rough Travel Track with the date and location of the albums. Add &tt=travel&mi=out to the BlurbsViewr album parameters (or Try Ours).
ex: .../blurbsviewr.html?picalbums=SailBillabong&tt=travel&mi=out
You'll find out VERY quickly how accurate your dates and locations are. Highlighting the Trip Summary will display the approx distance Traveled.

If that's too much work to clean up, you can draw the lines in the BlurbBits mapr and save them to a Google Spreadsheet. See our Example with Drawn Tracks. These paths can also be used when creating a standalone BlurbBit of just the album to embed on your page.

The ultimate trip photos map.. all of our individual geotagged photos and our drawn lines or you can overlay them with our actual GPS tracks (from KML).

Remember if you don't use Picasa albums you can still use the ScratchPad to enter your data for each page and then use a GoogleSpread sheet to extract the data for the Viewr. You can even combine your photos and your blogs on the same map or heck do everything. Don't forget the best part, any changes or additions you make (to extracted data) will be updated on the map. As we add BlurbBits to our new Blog Posts they will automatically appear on the map, we don't have to do anything!! Yes!!

GeoTag and Educate with Wikipedia

We like to share more than just our photos,blogs and journals. If you've read our Blog you know we frequently refer to Wikipedia articles so that reader can learn more if they are interested. A nice quick introduction through our travels with some notes, to a full on encyclopedia at the ready.. the reader can choose!!

Wikipedia is a great free online encyclopedia FULL of information AND geotag data. Most geocoding services are focused around address etc but Wikipedia covers almost everything. I've found Suwarrow in the Cook Islands (no full time inhabitants) and Niuatoputapu in Tonga both rather remote by modern standards of travel. They even had Onotoa the first place we went that wasn't in our Lonely Planet.

Go to the Main Page and enter a search string in the left hand side. Find the article you are looking for and note the top right hand corner. If there is a globe with a link click the link to open the Geo Hack Page. Look for Coordinates (second line) and enter the decimal value into the BlurbBits Mapr Center Lat,Lng,Z: text box, and select Move. You can also enter the decimal value directly as an &llz= parameter (add a ,zoom value if desired).

This is a great place to search for more information and who knows, you might even learn something while you're there. Save the path so you can add a link to your blog/website. If you find an article that doesn't have a reference but you find one, consider adding it to Wikipedia.

The Ultimate Off Line GeoTagging Combo

We use Google Earth at Sea on Billabong (without Internet!!) to help in areas where charting is poor. It is amazing how good the imagery is, you can clearly see most reefs and in some cases you can even find the sandy patches where you want to set your hook. First you must visit the areas you are interested in while connected to the internet. Keep an eye on the Streaming indicator which appears just below and a little to the right of the Earth. When this indicator has reached 100% the imagery you're viewing is fully loaded and saved to your cache. Increase the cache size to get the most out of your data and you can even use the Touring Places feature to automatically store data based on a set of placemarks (ie. Markers) you setup.

As if that isn't cool enough, Picasa has a geotagging feature that works directly with Google Earth. You can even use your saved GPS tracks to import into Google earth to help find the date/time and position for your photos. There is even a program that does it automatically. The problem is most people either don't have a GPS or haven't saved their tracks, so the manual placement mode via Picasa/Google Earth is necessary. The good news is once you've done it, the data lives within the photo as metadata so tools like Picasa and BlurbBits have access to it.

If you have GPS tracks saved and want to get them into Google Earth check out GE GPS import (for the non free versions) or look into the ultimate GPS Utility (in and out of MaxSea, Google Earth etc) or a online translation program called GPS Visualizer. In most cases GPS data stretches the limits of the Static Map APIs 50 Point, however we are working on some potential solutions (Douglas-Peucker algorithm) but will certainly support it in our interactive maps (we've got 28,500 nM of GPS tracks.. We'll make something work).

Using Online Photos

The whole basis behind BlurbBits is to use existing online data when at all possible, so the last thing we are going to do is ask you to upload photos. We use web based photo services to extract data that is available; the photo, a thumbnail, date and time, location, caption, labels/tags, notes and albums or sets you might have created. The more data you have, the more filtering options you'll have available for BlurbBits creation. Currently we support Picasa and Flickr photos as well as extraction of a "Photo Blog Album" based on the first image in your existing site feed (if available).

Note: if want to use photos and define a location for a blog post, make sure you define the post location. The easiest way is to use the Mapr to find/define the location/zoom of the post and use the Url parameters below to paste into the Mapr's extras textbox. The mapr can also be used to extract existing geotagged photo locations.

If you use use another Online Photo Sharing site, please let us know and we'll add it to our list. If you don't use an online service consider either Picasa or Flickr. Each has their advantages and we use both.

• Picasa has an off-line version that allows editing and tagging, which is great to use for organizing your photos when there is no internet.. i.e. sitting in a remote anchorage. Their online Picasa Web albums allows us to import all the data into BlurbBits.
• Flickr has a large online community with comments, groups, and favorites but no off-line organizing/editing.
  We'll compare the two in more depth later.
  

Adding Photos from Picasa or Flickr

Once you enter design mode you should load the photo strip and choose a photo to "highlight" your BlurbBit. This photo will be added to the Embedded Object as a visual reference prior to loading the rest of the photos and provides the users viewing your feed with a photo and link to the BlurbBit.

Note: you'll be able to adjust the zoom properties of the individual geo-tagged photo maps with the Photo Zoom option (see below). I usually run with a &pz=4 but if you try our first photos, the Marquesas Islands only supports &pz=2, &pz=4 causes a empty background for the map.

Photos from Picasa

Picasa supports a mixture of geo-tagged photos and untagged photos in the same data feed. This is very helpful if you are going back to update some photos (but not all). In BlurbBits the geotagged photo will appear with a map button, the other won't.

Picasa User Photos: &picasa=UserName:Album:Options

• UserName is your Picasa login name
  Login and check the path http://picasweb.google.com/UserName
  ex: use SailBillabong or sailbillabong for http://picasweb.google.com/SailBillabong
• Album (optional)
  Select an album and check the path http://picasaweb.google.com/UserName/Album
  ex: use Sailing2005 for http://picasaweb.google.com/SailBillabong/Sailing2005
  Usually just the spaces are removed but double check for special characters just to be sure
  
• Options (quess what? they are optional)
  If options are used without an album a blank space Must be used ex: username::tag
  
  • Tags: use tag=tag1,tag2 to filter photos by tags
    tags can be shortcut by leaving off the tag= ex: user::tag1 is the same as user::tag=tag1
    ex: sailbillabong:sailing2007:orangutan or sailbillabong::chris
    
  • Query: use q=query1,query2 to search the title, caption and tags
    ex: sailbillabong::q=chris,kt
  • advanced feed parameters such as max-results and start-index can be used
    Default: the first 100 matching photos will be shown
    Picasa does not support feed ordering and the photos are chronological order (first is first). You can use the start-index parameter to "target" the last 100 photos you want to show off.
    If added to other parameters the & must be escaped to %26 or it will be processed as a BlurbBit argument (and skipped by Picasa)
    ex: sailbillabong::q=chris%26max-results=3
    broken ex: sailbillabong::q=chris&max-results=3 (will return all photos)
    

Interactive Examples:

&picasa=SailBillabong

The first 100 photos from SailBillabong (try your Username)

&picasa=SailBillabong:Sailing2007

The Sailing2007 album from SailBillabong (try Sailing2004,Sailing2005,Sailing2006)

&picasa=SailBillabong:sailing2007:orangutan

Photos matching the tag orangutan in the sailing2007 album

&picasa=sailbillabong::chris

Photos matching the tag chris in all albums

&picasa=sailbillabong::q=chris%26max-results=3

Get only 3 photos matching chris in all albums

&picasa=sailbillabong::start-index=101

The next set of photos

Picasa User Albums: &picalbums=Username

Albums are a great way to show off your photos. The user can browse your albums, their descriptions and maps (if geotagged). When open link is clicked, the selected album opens another BlurbBit containing its photos. It's very fast and easy way to allow access to all your public photos. If you map your album in Picasa first, you can use the BlurbBits Mapr to create a map and photo BlurbBit (example) which can be added to a Blog post to define its location and add the photos for the post (more details).

• UserName is your Picasa login name
  Same as User Photos (see above)

Interactive Example:

&picalbums=SailBillabong

The albums from SailBillabong (try your Username)

Picasa Public Photos: &picall=Options:Number

• Options
  Same as for user photo (see above)
  max-results is used by :Number so it's redundant
  
• Number: Number of Photos (optional default is 25)
  

Interactive Examples:

&picall=q=sailing

25 uploaded photos matching sailing

&picall=sailing,turkey:50

50 photos matching sailing and turkey

&picall=sailing,turkey%26start-index=50:50

the next 50 photos

Try your own queries and see what you photos you find!!
There are some strange tag to photo matches!!

Picasa Featured Photos: &picfeat=Options:Number (default 25)

• Options
  
  • all: use picfeat=all to get the first 25 photos
  • start-index: use picfeat=start-index=25 to get the next 25
    This is currently broken and has been reported to Google.
• Number: Number of Photos (optional default is 25)

Interactive Examples:

&picfeat=all

25 featured photos

&picfeat=all:50

50 featured photos

&picfeat=start-index=50:50

the next 50 featured

There are some very cool photos here. Click on the Open Link button to popup the photo in Picasa to check out more our the users photos and albums.

Available Picasa Photo Sizes:

When you upload photos, Picasa creates a large selection of photo sizes. Matching your BlurbBit size to the available photo sizes will optimize the performance. We will automatically scale down the photos to fit into the window, scaling up can cause photo distortion and is not worth the performance gain. The available sizes are:

• 72, 144, 160,200, 288, 320, 400, 512, 576, 640, 720,800
  measured in pixels along the the longest edge.
  

Photos from Flickr

Flickr requires an upfront choice with respect to geotagged photos. If you specify geotagged photos you'll ONLY get those photos. Geotagged data does not appear in the normal feed, so it is impossible to combine a mixture of geo and non-geo tagged photos into the same BlurbBit and show a map for only those that are geotagged.

Update: you can also use idgetter to extract your User and Group ids.

Flickr User Photos: &flickr=UserId:Options or &flickrgeo=UserId:Options

• Use &Flickr for all photos and &flickrgeo for only geotagged
  
• UserId is your Flickr Id
  Login, Select your photostream and find the Subscribe to xxx photostream (near the bottom) and click Latest.
  You'll get a page URL like ..public.gne?id=25998359@N07&lang=...
  The numbers and characters between the "=" and the "&" sign are your ID
  ex: use 25998359@N07 for ..public.gne?id=25998359@N07&lang=...
• Options:
  
• Tags: use tag=tag1,tag2 to filter photos by tags
  flickr tags cannot be shortcut
  ex: tags=market,tomatoes for market and tomatoes
  
• Sets : use set=setid to show a set
  Use Flickr to navigate to Your Sets and select the desired set
  You'll get a page URL like ....sailbillabong/sets/72157606804117190...
  The numbers after set/ are your setid
  ex: use set=72157606804117190 for ..sailbillabong/sets/72157606804117190
  

Interactive Examples:

&flickrgeo=25998359@N07

Our latest photos (switch to &flickr= and try your id)

&flickrgeo=25998359@N07:tags=market

latest geotagged with market

&flickrgeo=25998359@N07:tags=market,tomatoes

latest geotagged with market & tomatoes

&flickrgeo=25998359@N07:set=72157606804117190

A set from the market

flickrgeo= could be replaced with flickr= (but we might as well show off our geotags)

Flickr User Favorites: &flickrfavs=UserId

• UserId is your Flickr Id
  Same as for user photo (see above)

Interactive Examples:

&flickrfavs=25998359@N07

Our favorites, we haven't done much here yet just for testing

User Favorites does not support geotagged photos or tags.. but we're asking Flickr for it!!

Flickr User Friends: &flickrfriends=UserId:Options

• UserId is your Flickr Id
  Same as for user photo (see above)
• Options:
  
• all: use all to show all photos of your friends
  The default is to show only one photo from each friend
• or nothing (leave it blank for the default)
  

Interactive Examples:

&flickrfriends=25998359@N07

Our friends first photo (want to be our friend?)

&flickrfriends=25998359@N07:all

All our friends photos

User friends does not support geotagged photos or tags.. but we're asking Flickr for it!!

Flickr Groups: &flickrgrp=GroupId or &flickrggeo=GroupId

• Use &flickrgrp for all group photos and &flickrggeo for only geotagged group photos
• GroupId is the Flickr Group Id
  Find a group, navigate to its Group Pool page and find the Subscribe to xxx group pool (near the bottom) and click Latest.
  You'll get a page URL like ..._pool.gne?id=33122952@N00&lang=...
  The numbers and characters between the "=" and the "&" sign are the GroupId
  ex: use 33122952@N00 for ..._pool.gne?id=33122952@N00&lang=..

Interactive Examples:

&flickrggeo=33122952@N00

Outstanding Travel photos

&flickrggeo=41425956@N00

Travel Photography

&flickrggeo=11488522@N00

Visit the World

flickrggeo= could be replaced with flickrgrp= (but geotags answer where's that?)

There are some great groups that share some amazing photos, and BlurbBits is an easy way to view the GeoTagged photos. I guarantee you'll be asking "where is that?" more than once. You can easily get sucked in, there are almost 30,000 GROUPS with travel photos.

Start here and contact us with any good ones you find.
Click on the Open Link button to popup the photo in Flickr to check out more of the users photos and sets or use the info button to get more info on the photo and photographer.

Available Flickr Photo Sizes:

When you upload photos Flickr creates a select set of photo sizes. Matching your BlurbBit size to the available photo sizes will optimize the performance. We will automatically scale down the photos to fit into the window, scaling up can cause photo distortion and is not worth the performance gain. The available sizes are:

• 75,100,240,500,1024
  measured in pixels along the the longest edge.
  Note that the Medium size BlurbBit will actually use the 500 size photo
  

Advanced Photo Properties

The Photo Zoom and PhotoStrip properties can be used to refine the views and performance of the photo within the BlurbBit view.

Photo Zoom: &pz=Value

• Value: the difference from the main map zoom levels. Default 0
  The Photo Zoom can be used to adjust the zoom levels of the individual photo map (if geotagged) to show close up detail of the area if available or desired. By default the zooms are set to the same as the base map. Be sure to check the availability of high zoom levels, in remote location the higher zoom levels are not support by the underlying Google Static Maps.

Interactive Examples:

&llz=36.2938,30.1497&mi=in&flickrgeo=25998359@N07:set=72157606804117190

Individual photo map are the same zoom levels as the main map

&llz=36.2938,30.1497&pz=6&mi=in&flickrgeo=25998359@N07:set=72157606804117190

Same photos with PhotoZoom set to 6

&llz=36.2938,30.1497,12&pz=2&mi=in&flickrgeo=25998359@N07:set=72157606804117190

Main map zoomed in by 4 (via llz) + a small PhotoZoom (2)

Don't forget to check out the Overview photo map once the photos are loaded. It will be zoomed to fit all the photo locations on the map.

PhotoStrip Options

ThumbNail Size &ts=size

• Size is the thumbnail size in pixels. Default is 50
  Used to adjust the thumbnail size of the photo in the PhotoStrip

Interactive Examples:

&picalbums=SailBillabong

The albums with the default ThumbNail size

&picalbums=SailBillabong&ts=75

The same with larger thumbnails

Border Padding &pbw=Width and &pbh=Height

• Width is the border (in pixels) applied to the width of the photo on both the left and right sides. The default is 10.
  This width should be used to adjust the photo sizes into a very wide BlurbBit. If you have a 600x250 BlurbBit, by default we will load the photo size to fit the 600 pixel width (they may be wide panoramics). Pad the width to match or you'll be downloading huge photos to fit. By default the Photo height will be 190 (i.e. 250 -30 -30) so a &pbw=200 will give approximately the same size, however you may wish to adjust the padding based of the aspect ratio of the photo for the best fit.
  
• Height is the border (in pixels) applied to the height of the photo on both the top and bottom. The default is 30.
  Don't forget to take into account any ThumbNail size changes.

Interactive Examples:

&picalbums=SailBillabong

The default spacing

&picalbums=SailBillabong&pbw=50&pbh=50

Increased border

&picalbums=SailBillabong&width=600&height=250&pbw=200

A wide album optimized

Just a Photo Map : &pm=1

In this case only a map of photo locations will be extracted, good for embedding in Blog sidebars. Adjust the Width and height to match your application. You'll automatically get a map with the standard BlurbBits above after selecting the photo view type, but sometimes it is hard to display all the photos in a sidebar. This one automatically loads and updates without interaction.

We also sort the photos (by date, latest first) to make sure they appear in the correct order. Use the Picasa start-index parameter to begin with the correct photo.

Interactive Examples:

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

A map of the first 100 photos from SailBillabong (try your Username)

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

Skip the first 100 photos from SailBillabong Picasa, start mapping at 100.

&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

Customize a BlurbBits Map

The BlurbBits Mapr utility is designed to create multiple location based BlurbBits using an interactive map. Use the Mapr Help or click on the ? button in the tool.

These option are only used to configure the Static maps used in the stand alone BlurbBits. The resulting data can be extracted to create the interactive map through the Viewr.

Don't add too many markers until you understand how zoom is used.

Map marker options: &mark=Marker and &smark=SmallMarker (BlurbBits only)

• Marker: The marker name used to highlight the Main Location on the Main Map
• SmallMarker: The marker name used for other locations and the Zoomed out view of the Main Location.
  
• From Google Static Maps marker specification
  marker names are formated like {size}{color}{alphanumeric-character}
  -{size} (optional) is the size of marker from the set {tiny, mid, small}. If no size parameter is set, the marker will appear in its default (normal) size.
  -{color} (optional) specifies a color from the set {black, brown, green, purple, yellow, blue, gray, orange, red, white}. Remember to choose a color that will stand out on the BlurbBit Map Type you are designing.
  -{alphanumeric-character} (optional) specifies a single lowercase alphanumeric character from the set {a-z, 0-9}. Note that default and mid sized markers are the only markers capable of displaying an alphanumeric-character parameter. tiny and small markers are too small to show characters and therefore cannot be used.
• Defaults Main Map &mark=midorangeb &smark=smallorange (for Blogger)
  Others &mark=midredx &smark=smallred
• Be sure to pick a mark that stands out on you map. We use x as in "x marks the spot".
  

Interactive Examples:

&llz=36.2938,30.1497

Default Markers

&llz=36.2938,30.1497,14&mark=midredx&smark=smallred

redx and red mark markers

No Map marker: &nom=true

• Using &nom=true with a &llz statement defines the center location of the map and its zoom level but doesn't add a markerighlight the Main Location on the Main Map.
  Useful when describing an area but not a specific location.
  

Interactive Examples:

&llz=36.2938,30.1497,14&nom=true

Same map but hold the marker

BlurbBit Map Zooms: &zooms=in,out or &zoom=in and &ozoom=out

In the BlurbsViewer &zoom is used to defined the default zoom values for ALL objects.

• in: The default zoomed in level (a higher #) default is 8
  
• out: The default zoomed out level (a lower #) default is 2
  See Location specification for example levels and notes
• A llz position with a specified zoom level will always use it's level for the zoomed in view and subtract 6 for its default zoomed out view. Only the zoomed out view will be overridden.
• Within the BlurbBits Mapper
  A zoom level is always added to all markers, so only the zoomed out level is effected
  

Interactive Examples:

&llz=36.2938,30.1497&zooms=14,6

Forced to zoom levels 14 and 6

&llz=36.2938,30.1497,8&zooms=14,6

Uses zoom levels 8 (from llz) and 6 (from zooms). The default would be 8 and 2 (8-6)

Specify a location: &llz=lat,lng,z

Defines a specific Location and an optional Zoom level to create a map. It is also used to extract the entry location from an existing BlurbBit (from Blogger or feed). In the BlurbBits Mapr these are created via the add marker functionality. In the Viewr these are used to create the initial viewport.

• lat: Latitude in decimal degrees (use negative values for South)
  ex: enter 32.5 for 30 degrees 30 minutes N
  ex: enter -32.5 for 30 degrees 30 minutes S
• lng: Longitude in decimal degrees (use negative values for West)
  ex: enter 178.5 for 178 degrees 30 minutes E
  ex: enter -178.5 for 178.5 degrees 30 minutes W
  5 decimal of precision gives a good level of accuracy but is usually only necessary on the interactive map or high zoom levels. More than 5 decimal places are rounded.
  
• z: Optional zoom level (default is 8)
  Map default can be overridden using the zoom parameters above
  
• 0 - The World
• 1 - Unknown location
• 5- Country
• 6 - Region
• 8 - Sub-region
  
• 11 - Town
• 13 - Post code
• 15 - Street
• 16 - Intersection
• 17 - Address

The BlurbBits Mapr can translate comma separated values of the Blogger Text format DD MM.MM[N|S],DDD MM.MM[E|W] by entering them in the LLZ or Center Lat,Lng,Z text fields and hitting enter.
Ex: Entering 32 30.0S,178 30.0W would move the map to -32.5,-178.5,8

Interactive Examples:

&llz=36.2938,30.1497

Position Map and use default zoom level

&llz=36.2938,30.1497,12

Position Map and use zoom level 12

Specify a route or path: &path=PathDefinition (BlurbBits only)

• PathDefinition: See Google Static Maps path specification (change | to +)
  Multiple paths can be specified (use another &path=)
  No more than 50 points can be a used in all paths and markers.
  Zoom is NOT allowed in the path points statement
• When using the BlurbBits Mapr the path statement will replace (| to +) to facilitate ScratchPad storage in | mode. Both forms are valid in BlurbBits (Positive values MUST not be proceeded by a + sign).
  
• This statement can be combined with an llz point to specify a location. The map will have two zoom levels in this mode. The path bounds will be considered the "out" view for the map. To get an overview location of the route (for detailed routes), set a lower zoom on an llz definition, add nom=true, and use &mi=out (the marker).
• If you have existing KML/KMZ data, use the K: ScratchPad option to load the file and roughly trace your route (remember on 50 total points are allowed). If you have GPS data there are many utilities that convert GPS tracks to KML files.
  
  It's much easier to draw the line with the BlurbBits Mapr
  

Interactive Examples:

&path=rgba:0xff0000ff,weight:2+25.1,-113.2+-2.1,-121.6+-14.6,-151+-16,173

Same points but drawn as a line across the south pacific

&llz=25.1,-113.2&path=rgba:0xff0000ff,weight:2+25.1,-113.2+-2.1,-121.6+-14.6,-151+-16,173

Adds a location definition to BlurbBit

Initial Map Zoom: &mi=in

• mi: Use in to start with map zoomed in (default is out)
• The BlurbBits Mapr automatically adds the &mi=in option by default it can be overridden by adding &mi=out to the extras.
• If a path and a point are used in the same BlurbBit, the bounds of the path are used for the out zoom level.
  

Interactive Examples:

&llz=36.2938,30.1497,14

Default Map

&llz=36.2938,30.1497,14&mi=in

Zoomed in Map

BlurbBit Map Type: &mt=MapType

• MapType: Change the style of the Map used
  
  • mt=h for hybrid satellite with labels (the Default)
    
  • mt=s for satellite
  • mt=t for terrain
  • mt=r for roadmap
  • Not all maps support detailed maps (so check your results)
    

• Within the Mapr
  Changing the map with the Pulldown menu also sets the maptype .

Interactive Examples:

&llz=36.2938,30.1497,14

Default Map

&llz=36.2938,30.1497,14&mt=t

A Terrain version

Specify multiple locations: &llza=llz1+llz2+llz3 (BlurbBits only)

This is how data gets passed between our various utilities. These points are only used to display a BlurbBit and are not extracted as a Location in Blogger or other sources. Multiple individual locations should be used instead. However I'm sure someone will come up with a good use for it.

• Points: a + separated list of llz (same as single location)
  Markers use the smark value
  Map will be scaled to show all markers
  Does not support additional single llz or path statements
  A Quick Way: Create a line in the BlurbBits Mapr, save it to the scratch pad and use LINEPTS parameter.
  

Interactive Examples:

&llza=25.1,-113.2,8+-2.1,-121.6+-14.6,-151+-16,173

Shows some points across the south pacific

BlurbBits Terms Of Use

BlurbBits are free to use for non-commercial use.

BlurbBits use Google Maps and Google Static maps, users of BlurbBits are subject to the same terms of use as the API. In addition we ask that BlurbBits not be used for commercial purposes (contact us with questions).

Beta Version

This Version of BlurbBits, the BlurbBits Mapr, BlurbsViewr and other utilities is the initial public release. Although we have attempted to find/fix every bug, we only have a limited number of resources available while we focus on further development and will not be able to handle large support loads or hand holding.

In case you haven't noticed we spent a HUGE amount of time documenting features and making a flexible interactive example platform. Please use this!! We cannot tolerate overloading by users who don't take the time to read the available information.. It's there, if you feel something is truly missing please let us know.

The Future

Who knows!! We think BlurbBits is a cool idea and what you see is just in its infancy. However we still need to find away to pay for development and support. If you like it, please let us know and spread the word.

A pat on the back doesn't pay the bills but it helps..

Limitations

We rely heavily on Google Static Maps to provide the map images you see in the BlurbBits. It is a new API and we have been testing it to its limits (and beyond). We also use the Google Maps API for the Mapr and both are amazing, however we are subject to changes and bugs that may effect BlurbBits that are beyond our control. We are available for consulting to build your Custom Google Maps or BlurbBits Implementations. If you are looking for a simple non-javascript version of the maps you see here, check out the Static Map API for various options.

In the case of lines/paths there is a limit of 50 points for all lines. Multiple lines can be added as long as more than 50 points are not added. We are using Google Static Maps API to obtain the maps you see here.

Maps are also limited by the number of characters in the Url parameters that must be passed to the Google to obtain the Map Image. We've never had a problem but if you are running into the limit, save the BlurbBit to the ScratchPad and remove some extra digits in the path.

Extracting Data

Most data extraction Url parameters will work for BlurbBits (to embed on your page) , the BlurbBits Mapr (to help build your BlurbBits/Maps), or the BlurbsViewr (to navigate your site). Online photo parameters can also be used.

Blogs

This is where your work pays off.. we can put your Blog entries on a map or create a Photo Blog Album. We will extract a lat/lng position from the entry text or the first BlurbBit (with an llz position) and the first photo for each Blog entry . The text option is necessary when using Blogger mobile via email, which doesn't support html without rich text emails (not available through most remote email services).

The lat/lng text format is DD MM.MM[N|S] DDD MM.MM[E|W] (with no extra characters i.e. 36 17.63 N 30 08.98 E). The separator between lat/lng can be a space, comma or /. The llz= parameter can also be added as a string (llz=[-]DD.DDD,[-]DDD.DDD,Zoom i.e. llz=36.2938,30.1497,14) where - is used for South and West and zoom is optional but should be used if changing between remote locations (middle of ocean, zoom = 8) and street/anchorage maps (zoom=15).

Note: The text MUST be on the same line with no Extra characters.

In order to extract both photos and positions from Blogger the Full Post Feed MUST be enabled. Go to Settings-Site Feed and make sure Allow Blog Feeds is set to Full (or Blog Post Feed in Advanced Mode).

Note: We will combine duplicate locations and if more than 50 unique entries are found, they will be averaged over the whole set. Text Blog entries should be updated when internet is available by adding either a BlurbBit link or an embedded version. You can define the maps zoom level and it allows other tools, utilities and your RSS feed readers to enjoy your location.

A Map of Blog Entries: &blogger=BlogName:Number:Options or bloggerid=BlogId:Number:Options

• BlogName is configurable portion of your Blogspot addess
  ex: use blurbbits for http://blurbbits.blogspot.com
• BlogId is used to access the data for ftp published blogs
  Create a new Post or Edit an existing post
  you should see post-create.g?blogID=XXX or post-edit.g?blogID=xxx
  ex: use the blogID value (XXX)
• Number is the number of entries to extract. Default is 10
  ex: svbillabong:20 would get last 20 entries and extract any positions found
  
• Options (quess what? they are optional)
  Confusion again: Blogger calls a feed query for labels.. categories
  If options are used a number Must be specified ex: username:10:category=Pasta
  
  • Category: use category=lab1,lab2 to filter by labels
    ex: fromthegalley:10:category=Recipes or fromthegalley:10:Recipes,Pasta
    Note: Labels are Case Sensitive and special characters must be escaped.
  • OrderBy: use orderby=updated to get blogs organized by recent updates instead of blog entry date. Great for updating your old blogs and adding new photos and letting people know what you've been working on lately!!
  • published-min: use published-min=dateTtime to set the minimum published date and time. Only posts that are published after this date will appear in the feed (not updated) . Use the RFC 3339 timestamp, ex: 2005-08-09T10:57:00-08:00.
    YYYY-MM-DDTHH:MM:SSTZ where TZ (timezone) can also be Z

Interactive Examples:

&blogger=svbillabong

A Blogger map for svbillabong.blogspot.com

&blogger=svbillabong&mv=where&mi=in

A Blogger "Where is Billabong?" map with link to latest Blog

&bloggerid=13526182

The same map accessed via BlogId

&blogger=svbillabong:50

The same map but 50 entries

&blogger=sandpiper38:100:category=Indian%20Ocean

Search for Indian Ocean + map locations. Try Indonesia, Mediterranean

Photo Blog Album: &bp=1

No we haven't gone off the deep end. This is a great way to navigate and preview your photo blogs and show the blog location(s) at the same time. If a photo is not found, the blog will not be added to the album. If a location is not available the individual blog map will not appear. Remember we currently use the first photo so make it a good one.

• Adding &bp=1 to &blogger creates a Photo album of the blog. Any geo-tagged blogs will appear in the summary map and for with individual Blog entry photo.
• Click the Notes button for a preview of each blog entry.
• Click the open link button to open the selected blog in a new window
  

Interactive Examples:

&blogger=fromthegalley&bp=1

A Photo Blog album of FromTheGalley (Try your blogger account)

&blogger=svbillabong&bp=1

A Photo Blog album of svbillabong (the BlurbBits photos are used)

&blogger=fromthegalley:10:category=Recipes,Freezable&bp=1

A Photo Blog Album of from the galley with Freezable & Recipes

&blogger=yachtbalvenie:10&bp=1

A Photo Blog Album of yachtbalvenie

&blogger=yachtbalvenie:10:orderby=updated&bp=1

Yachtbalvenie with recent updates first (notice the photo order)

This format is specific to BlurbBits to define a photo view vs just a simple map view. Within the BlurbsViewr all data is supported (although only those with locations are mapped). Photos will appear in the map tooltip and will be converted to map icons once the tooltip is viewed.

Blogger Photo Size:

Blogger uses the same photo sizes as Picasa for photos that were uploaded to Picasa recently . The bp=1 option can be used with other feeds however photo scaling support is limited to Blogger, Picasa and Flickr (until we add more).

Winlink Quick maps: &winlink=Callsign:number

Do you use winlink to report your yacht's position? Add a quick map, up to your last fifteen position.

• Callsign is your winlink callsign
• number is optional and specifies the number of entries to extract. Max is 15.

Interactive Examples:

&winlink=KC0RMX

Map of last 15 locations of callsign

&winlink=KC0RMX:1&mv=where&zooms=13,5&mi=in

Where Map (described below) includes link to winlink interactive map for this callsign

Google spreadsheets: &gss=SpreadsheetId:Number

If you haven't used Google Docs yet, you have to check them out. We use Google Spreadsheets to gain web access to Mapr Scratchpad data.

• SpreadsheetKey: The Key for your Published spreadsheet.
  When you are editing a document you should see the following path http://spreadsheets.google.com/pub?key=pB293mcNyGGy8SmJCPOwDfQ
  ex: use pB293mcNyGGy8SmJCPOwDfQ
• number (optional) Specifies the number of entries to extract. The default is all rows.

Interactive Examples:

&gss=pB293mcNyGGyXtOwzu-R5Jg&mark=midredx&smark=smallred&mtitle=Our%20Latest%20Wanderings

Our Latest Wanderings (look familiar)

&mtitle=Uhuru%20Positions&gss=pB293mcNyGGy8SmJCPOwDfQ&mark=midredx&smark=smallred

A friends circumnavigation

GeoRSS Feeds: &gfeed=Path:Number

• Path: The Url location of an rss feed.
  Note: make sure all Path parameters are escaped (? = %3F and & = %26) or they will be processed incorrectly as BlurbBit/Utility parameters instead of feed parameters.
  
• Number: Maximum number of entries (default is based on feed)
• A fallback for general use
  Feeds vary greatly in their content, format and details so it is almost impossible to design a general feed reader that will handle/format the data in which is optimal for a specific purpose. All of the feeds above started out from a basic GeoRSS feeds and where highly customized based on the desired result and available content.
  
  We will attempt to extract positions and plot them. However this is an unsupported base format, ie. If it works great.. if it doesn't we're sorry.
  
• We will be working hard to add more formats into BlurbBits. If there is something you would like to see please Contact us. We are also available for consulting or custom development.
  

Interactive Examples:

&gfeed=http://earthquake.usgs.gov/eqcenter/recenteqsww/catalogs/eqs7day-M2.5.xml:50

Last 50 Earthquakes

&gfeed=http://maps.google.com/maps/ms%3Fhl=en%26ie=UTF8%26t=h%26source=embed%26msa=0%26output=georss%26msid=100073405698197242227.00046087dc764f3de70c9

A Google Map RSS feed (escaped). Try your MSID parameter. Use the pp=blog option to re-order the feed if needed.

&gfeed=http://mapnut.com%2Fcalstatepark.xml:50

The first 50 State Parks

&gfeed=http://picasaweb.google.com/data/feed/api/user/SailBillabong%3Fkind=album%26alt=rss

Our Raw Picasa Album Feed

Extracted Map Views: &mv=where

• where: Map only the last location (i.e. Where are they?)
• Used with extracted maps
  Creates two zoom levels
  If a link is specified it will appear in the bottom left of the map
• We will be working on extracting other map views
  

Interactive Examples:

&blogger=svbillabong&mv=where&mi=in

A Blogger Where map with link to latest Blog

&gfeed=http://earthquake.usgs.gov/eqcenter/recenteqsww/catalogs/eqs7day-M2.5.xml:50&mv=where&mi=in

The Last reported earthquake with link to the detailed page

&gss=pB293mcNyGGyXtOwzu-R5Jg:10&mv=where&zooms=14,8&mi=in&mark=midredx&smark=smallred&mtitle=Our%20Latest%20Wanderings

Where view from Latest wanderings

&mtitle=Uhuru%20Home&gss=pB293mcNyGGy8SmJCPOwDfQ&mark=midredx&smark=smallred

A circumnavigations end point (their start/finish point)

In the BlurbsViewr this will cause the map to zoom to the last entry location (if it has a position).

Using extracted data with BlurbBits Mapr

The extraction methods above (and the photos) also work as parameters to the BlurbBit Mapr. If a location is found it will be placed on the map, otherwise it will appear in the Mapr sidebar list as location unknown (a world with a ?). Clicking on a unplaced entry will add the marker to the map drag cursor which can be dragged into position and placed with a click. You can also find the location first using the Find a Location dialog box, click Go and adjust the maps zoom level to the desired level. Then drag the unplaced entry to the LLZ finder and click to assign its location.

NOTE: This does not and will not modify the source data. You will still need to add the BlurbBit into the original data source (Blog Post), or modify the source directly (photos) .. sorry but we can't do everything. For Picasa album option, the BlurbBit for each album is automatically extracted by default.

This method is also good for testing existing BlurbBits data. If the position doesn't show up in the Mapr when extracted, it wouldn't show up in the extracted BlurbBits.

In this mode the geoRSS feed can be used with NO position data and entries can be dragged onto the map. Save the data to the ScratchPad (text tab format) and upload it (or copy/paste using Ctrl-C Ctrl-V) into a Google Spreadsheet. Follow the extraction steps above and you've got a very quick site navigation map for your geo data using the BlurbsViewr.

Using extracted data with BlurbsViewr

Any of the above examples can be applied to the BlurbsViewr by appending the sample string to the path (don't forget to replace the & with a ?) ie. http://www.creative-cruising.com/blurbbits/blurbsviewr.html?blogger=svbillabong:100
Here's our Sv Billabong Blog in the BlurbsViewr.

Don't forget to increase your feed size if you want all the data mapped. Start with the BlurbBits Mapr to make sure you have some data before proceeding with the Viewr.

BlurbBits on Wordpress.com

Ok so I'm doing a little testing over on a BlurbBits Wordpress blog just to see what you can and can't do..

No Iframes so embedded BlurbBits are out, no javascript so there goes the auto generated BlurbBit popup maps.. I tried just cutting and pasting the Full embedded code just to see what would happen... The good news is the photo stays and the links all look good after they remove all of the Iframe for me (thanks)!! I also discovered that they also do something with absolute positioned elements, i.e. remove ALL style formating including the photo height and width (not nice)!! I have fixed the height and width issue, however a Wordpress.com user will need to remove the style attributes of the top BlurbBits div in order to get the tightest formating around the photo or you can just use the link options and add your own photos.

So here's what we can offer..

Interactive Examples:

&gfeed=http://blurbbits.wordpress.com/feed/atom/

A Blog map extracted for blurbbits.wordpress.com

&gfeed=http://blurbbits.wordpress.com/feed&bp=1

A Blog Album of blurbbits.wordpress.com

&gfeed=http://blurbbits.wordpress.com/feed&mv=where&mi=in

A Wordpress "where" map with link to latest Post
.. and an interactive Blog Navigation Map

No javascript or iframes is necessary on your site. We do the heavy lifting.

Check out our wordpress.com playground to see what we have done. We can add a selected photo and a link to the BlurbBits in the post but can't embed it or do any fancy Javascript GeoBlog Summaries and MORE!!

There are some issues to sort out prior to upgrading Wordpress.com to a defined status

• Need some qualified testers who are willing to help test the functionality
• Need to better understand the various photo uploading/blogging options.
  The basic single upload is simple to extract various sizes (thumbnail, full size etc).
• Understand the requirements/process for approval as short codes. This is where BlurbBits would shine.

Need to find anyone who might be interested (contact us if you are).

And I can't believe how unbelievably slow it is .. In fact I'm writing all this while waiting for a WordPress Publish. It took almost two minutes to go from editing one post to editing another (1:53). Granted I don't have the fastest machine in the world but to save this edit and edit another post takes..23 seconds.. wow what a difference. I actually had to give up.. any menu click goes through the secure socket layer and takes forever. By the time I got to my post I had already forgotten what I was going to write about. I can't even figure out how to shut it off.. I tried all the suggestions but nothing seems to work!! oh Well.. glad I'm blogging here.

Update I did login later and found I wasn't in secure mode (must have been cookies or something).. it was faster.. but still slower than blogger.

Create a BlurbBit

BlurbBits can be used in a standalone mode to create a photo gallery, describe your travel route and/or detail a location. If you have a blog or feed based website, we can use the individual BlurbBits to extract an image and location into a summary Journal/Blog map or Photo Album AND the BlurbsViewr for an interactive navigation map of your site. If your blog doesn't support native geotagging, BlurbBits are really just a cool way of adding Map locations and zoom levels to each Blog Post or Web Page while giving you something for your efforts. See Extracting Data for more details of the data extraction process and options. Make sure you start with BlurbBits Basics if you haven't already.

Why do I have to enter a position?

Actually you don't. BlurbBits can easily be used without it, however a location adds a map and gives the end user a chance to see the area/areas you are describing. Since each location also includes a zoom level, you can configure all sorts of maps: one that shows the entire world to another that shows the details of your house, apartment or boat location. What about geocoding? Geocoding will get you a starting position, but only you the writer knows exactly where/what area you are taking about. Do you mean Boston proper or the area surrounding Boston?

llz=42.35892,-71.05781,9

llz=42.35892,-71.05781,15

With the BlurbBits Mapr it really doesn't take that long to pinpoint exactly what area you are talking about and then you can add photos etc. Note: The BlurbsViewr requires position data to place entries on the map.

BlurbBits allows you to put your article, blog entry or webpage "on the map" while managing your photos in one central utility.

Create a BlurbBit:

BlurbBits are configured via Url Parameters appended to the Url Path of our basic utilities and sent through a standard webpage HTTP request.

ex: http://..../blurbbits.html?blogger=svbillabong&mtitle=Sample

The query portion of the URI is used to define the key=value pairs. Each additional parameter is appended following an ampersand &, e.g.: ?key1=value1&key2=value2. The query string MUST begin with a ? (only one) or you will get "page cannot be found" errors. If there is a problem or missing portion of your BlurbBit, it is most likely in the parameter passing. These parameters can be added to the Location bar of your web browser or links you add to your page.

Interactive Examples:

The easiest way to get used to something new is to try it. The BlurbBits documentation will be organized as follows:

Feature Name: &Parameter=Options

• Option: short description
  More details etc
  

Interactive Examples:

&llz=36.2938,30.1497,12&mi=in

Our Current Location (Try adding a title by add &mtitle=SVBillabong after in)
Clicking on the icon to the left of the text box will load the example into a BlurbBit in a popup window. If you expand the popup you'll see ../blurbbits.html?design=true&llz=36.2938,30.1497,12&mi=in in the Location Bar. We've automatically added the ?design=true but the rest is as entered above. The data gets passed to our WebSite so we can customize it especially for you, that's how the URL parameters work.

The example text is also available in an interactive text box that allows edits. Change the example and hit enter or click the icon and the changes will be loaded into the BlurbBit. If there are any issues you can always refer back to the original example above. The BlurbBit is in design mode so the publishing options will be available under the info (i) button. The &mtitle=Title option is used to title both the map and the webpage.

If you are anything like us, you'll skip the reference part and go straight to the examples, just make sure you understand any gotchas before you create too many BlurbBits.

Embedded BlurbBit in Blog Post

Interactive Example BlurbBit

Note: In certain cases the resulting interactive examples will appear slightly different in the popup than in an embedded version. In the embedded version you can designate a cover photo, which lives on the actual page it is embedded on and is not a part of the BlurbBit. As a result some of the interactive examples may appear "naked" since they are not embedded.

The examples all begin with the & sign for ease of entering into the BlurbBits Mapr. If you are entering these directly onto the URL path, make sure the first & is replaced with a question mark, i.e. http://www.creative-cruising.com/blurbbits.html?llz=36.2938,30.1497,12&mi=in.

Basic Setup & Publishing

BlurbBit title: &mtitle=Title

• Title: used as the map caption AND page title.
  Special characters must be escaped i.e. use %20 for space
• within the BlurbBits Mapr
  The Mapr handles escaping of special characters
  Uses the user defined label as the title if use label is selected
  

Interactive Examples:

&llz=36.2938,30.1497,14&mtitle=Our%20Current%20Location

Adds a title to our previous map

Width and Height: &width=Width and &height=Height

• Width: Measured in Pixels ex: 400
  
• Height: Measured in Pixels ex: 400
  do not enter
  
• If you are hand editing the results make sure you update ALL the references
  These reference are passed to ensure correct reproduction in all the viewing options.
  

Interactive Examples:

&llz=36.2938,30.1497,14&width=220&height=200

A smaller version of our map (for Sidebar)

Design size considerations

The Design Size can effect photo load times dramatically. The default sizes were chosen to optimize the available photos, and the square shape supports both Horizontal and Vertical orientation. If only a map is used or the photos are in a single orientation, the width and height can be manually adjusted.

Publishing Options

If you are using the interactive examples, first make sure the width and height are correct for your application (sidebar vs post). &width=400&height=400 works for a Standard Post and &width=220&height=200 works for the Sidebar. These values can be added directly to the interactive examples box if you need to change the default sizes. Select the i (info) button for the publishing options (design mode must be enabled).


Blogger users have it easy..

Note: Jan 08. We are investigating a Blogger editor bug related specifically to Internet Explorer version 6.* while using the Compose editor with Iframes (like BlurbBits). We HIGHLY recommend you upgrade to a newer/safer/faster browser like Firefox. BlurbBits published via the Add Link publishing option will not break the compose editor and All BlurbBits will display correctly. The Edit Html editor reportedly works fine.

• Choose the Blog This entry to add a new Post/Entry about your new BlurbBit. We even hide all the ugly HTML code for you, the [BLURBBIT] section is replaced with the actual code at publishing time.
  
• Choose Add Gadget to add it as a gadget to the Blog (ie. Not a Post). By default the Gadget will appear in the sidebar. If you have configured the BlurbBit for a different location, drag the widget into place.
  Note as of Nov 7, dragging was broken in the Add gadget window. Open the layout panel in a new window and drag it there.
• To add a BlurbBit to an existing post, edit the post, select the Edit Html tab and paste the Embed in Website/Blog Entry (with feed) code into the desired location. If you are having a hard time finding where to place the code, use compose mode to MARK the code, ie. add XXXX. Then use the browsers search to find it in Html mode.
  

Other Options

• For direct links, email or IM paste the URL link into your editor.
• For sites that allow Iframes AND have a RSS feed (like Blogger), choose the Embed in Website/Blog Entry (with feed) option. This will handle both the post/web page and include a link (and optional photo) into the feed so others will have access to the BlurbBit.
• For sites that allow Iframes but don't have an RSS feed use the Embed in Website/Blog sidebar option.
• For sites that do not allow Iframes, choose one of the link options.

In the Blurbbits Mapr use the X button in the upper right corner to close the preview window.

Design Mode: &design=Mode

For all the interactive examples and the BlurbBits Mapr, the design mode is enabled.

This triggers a development mode that allows you to choose publishing options and set default sizes based on where the BlurbBit will be used. It can be used in a sidebar, footer or embedded into a blog post or website, you can even email or IM it.

• Mode: one of the set {sm,med,lrg,sidebar,footer,true}
  
  • sm: 250x250
    
  • med: 400x400
    
  • lrg: 500x500
    
  • sidebar: 220x220
    
  • footer: 600x200
    
  • true: triggers the mode but doesn't define size
    
  Allows access to publishing options and sets the BlurbBit size if not defined via &width and &height parameters
  
• Within the BlurbBits Mapr
  The Mapr handles the setup and allows a quick preview of various size options.
• The examples are all configured with design mode enabled
  Once a BlurbBit has been tested, it can be published via the options under the i info button.
  

Interactive Examples:

You'll be using design mode in all the interactive examples.

Now What?

• Check out our getting started overview (BlurbBits and utilities).
  
• Learn about the geoblogging process (step by step overview)
  
• Learn how to create BlurbBits using an interactive map (the BlurbBits Mapr).
  
• Learn how to use online Photos (i.e. Picasa or Flickr).