Search for journal entries by location!

Continuing our quest to implement the most fully featured community mapping site available, we just completed location-based searching of journal entries on MyOutdoors.net. This feature integrates into the site extremely well, with lots of different options for finding journal entries.

To start, there is now a link at the bottom of every journal entry that says "Find nearby journal entries." It's right next to the distance field and looks like this:

The link will take you to the location search page to display all of the journal entries that are close by. It currently uses a default search radius of 150 miles (apologies to all you metric folks out there). It's kind a wide range, but we thought that you would want to see something rather than nothing, and for journal entries out in the middle of nowhere, it could be useful. Also, they're sorted by distance so the closest ones show up first. Once you're on the search page, you can change the search radius, or enter new search criteria.

Search criteria can be anything that Google can geocode, including cities, states, zip codes, etc. You can even enter a longitude and latitude. One of the cool things about it is that if you could link to the location page directly, passing in three parameters in the querystring. Just use http://www.myoutdoors.net/location.php? The parameters are:

lat (in degrees)
lng (in degrees)
distance

And then you can see all the journal entries that took place nearby.

There is also a new Location-based Search box on the Browse page. This is the entry to the location search for other search criteria.

Enjoy!

KML Downloads

We recently added KML downloads to MyOutdoors.net. I didn't realize how cool they were until I started implementing them. The KML specification has matured over time and is now at a 2.0 release. KML stands for Keyhole Markup Language, an acronym that endured Google's acquisition of Keyhole in 2004. The KML specs allow for some serious mapping annotations. Some of the cooler things are 3d paths, polygons, HTML annotations, custom overlays (ground and screen) and serving content from remote locations. Really the best thing about KML though is that you can put your own data into Google Earth's amazing 3d interface.

We've really only touched the surface with our KML implementation. As we have the time we'll try to add some of the more advanced features of KML. Downloading KML from MyOutdoors.net will get you a KML document that has your path and a placemark for every waypoint in your journal entry that has been annotated. The view should then be centered at the normal centering point for the journal and the camera tilted at a 45 degree angle. Seeing a path set atop the 3d terrain with satellite images gives you a very good idea of what the author's journey was really like.



I hope you all enjoy the new feature. Look for some enhancements to KML files on MyOutdoors.net in the near future.

Run for the Rivers 5/10K!

We recently posted a new race map for the Run for the Rivers 5/10K in Verona, WI. As always, we're happy to have the opportunity to help out local races and I think this should be a pretty fun one. Also, proceeds benefit the River Alliance of Wisconsin, a non-profit, non-partisan organization working since 1993 to protect, enhance and restore Wisconsin’s rivers and watersheds. Being a flyfisherman myself, I think this is a great cause, especially due to recent events here in Wisconsin such as the Black Earth fish kill in 2001.

Check out the 5K Race map here.
Check out the 10K race map here.
And check out the original website here.

Sparklines: display 10K data points in one-half of a square inch

Last week I was able to attend Edward Tufte's course in Chicago about Data and Information visualization. ET is out promoting his new book, Beautiful Evidence. A lot of my prior experience is in visualization so I found a lot of what he had to say really interesting. Having been working on the new relaunch of MyOutdoors.net, I really took an interest in one particular topic, Sparklines.

Sparklines are a visual way of displaying thousands of data points in a really small space. A typical example of their use is to display stock trends over long periods of time. Because we implemented elevation profiles in the new site redesign this was a perfect match for displaying a small elevation profile for each of our individual journal entries. For an example of the way we use it, check out http://myoutdoors.net/entry.php?id=2039. It's a hike that my brother Brian did across three different peaks in Wyoming. The sparkline is displayed in the lower-right corner of the page, right next to a link to see a larger graph of the elevation data. It shows the general elevation of the profile in great detail, in about one-half of a square inch. You can click on the elevation link to see what our implementation looks like as well. Here's what it looks like:


We used the Sparkline PHP library to implement the sparklines. It was incredibly easy and we recommend it to anyone. One thing that I didn't like, however, was that it seemed to work primarily for integer indices on the x-axis (I couldn't figure it out anyway if it was supposed to work with floats). Because we graph elevation along the route of a journal entry, we needed to interpolate the distances between waypoints.

Note that we could have just mapped the distance at each waypoint to an integer index in the image. However, a lot of our journal entries have way more than 100 waypoints because they come straight from GPX data (the width of the sparkline is 100 pixels). Because the Sparkline PHP library uses gd, we didn't want to be drawing lines on the server for each set of two waypoints (when you use RenderResampled in the sparkline library, it creates a larger image and scales it down for anti-aliasing, so this could get really time consuming). We want to display sparklines for every journal entry, so with a lot of people on the site, they could cause some potential performance issues (no idea if that will actually work).

So anyway, if you want to create sparklines and you have a ton of data points, doing something along these lines might help your performance if you have a ton of traffic to your site (I never really measured, it just seemed like this would be faster than drawing lines in software due to the actual line drawing and probably the memory access pattern). It's not very difficult, but we thought we'd provide the code here in case anyone has similar needs:

Notes:

$distance is an array of float-valued distances from the start to each waypoint
$elevation is an array of float-valued elevations at each waypoint
$width is the width in pixels of the sparkline, we use a size of 100x20

// For each pixel in the sparkline, compute the elevation at that pixel. for ($i=0; $i<$width; $i++) {     $cur_dist = ($i / $width) * $total_dist;     // Advance the index into our distance array.     // This determines which waypoint we're between.     while ($cur_dist > $distance[$dist_index+1]) {         $dist_index++;     }     // Compute distance along this interpolation interval     $val = ($cur_dist - $distance[$dist_index]) /         ($distance[$dist_index+1] - $distance[$dist_index]);     // Inpolate the elevation at the pixel location     $elev = $elevation[$dist_index] +         ($val * ($elevation[$dist_index+1] - $elevation[$dist_index]));     $sparkline->SetData($i, $elev); } $sparkline->SetFeaturePoint(($min_dist / $total_dist) * $width, $min+1, "red", 3); $sparkline->SetFeaturePoint(($max_dist / $total_dist) * $width, $max-1, "green", 3); $sparkline->SetFeaturePoint(0, $elevation[0], "gray", 3); $sparkline->SetFeaturePoint($width-1, $elevation[$rows-1], "gray", 3); $sparkline->SetLineSize(4); $sparkline->RenderResampled($width, $height); $sparkline->Output();

Lessons in Web 2.0 Design – MyOutdoors.net

Well we're finally finished with the MyOutdoors.net redesign and both of us are really happy with it. Things turned out better than we expected, we're especially happy with a much smoother user experience than we previously had. We spent a lot of time on the actual design, eliminating the unnecessary parts of the site and emphasizing the important ones. In the end, there were a lot of things that we learned about designing a site for a community. In this post, we'll try to share our experiences with everyone.

There is one point in particular that trumps all of the others: It's not just about the idea. We had a pretty good idea. We had no traffic. We might have been Web 1.5.

We think that MyOutdoors.net is different from the other mapping sites we know of because it lets you create a journal of your outdoor activities, including custom HTML layout. A lot of mashups like gmaps-pedometer only let you create a map. MyOutdoors.net also has a much wider audience than others. There are some travel sites out there that do similar things too, but they're very travel oriented and, well, we like the outdoors. There just isn't anything quite like it. We at least thought that we had a good idea.

It turns out that implementation and design are pretty important as well. Together, these two things are what killed our site. The old implementation made it possible for a user to create a journal entry and share it with people; we at least accomplished that much. There were lots of problems though. It wasn't easy to create a map because you had to create a user first. If the map had too many waypoints things got slow. The site didn't look good on smaller displays. Browsing journal entries was difficult. The list goes on... We learned a lot from the first implementation of the site. We had some great feedback from friends and a lot of the bloggers we contacted. Here are five more lessons that you might want to think about for your Web 2.0 site:

K.I.S.S.

Keep it Simple, Smartypants. Google should have taught us this much. You see it everywhere. “But we have so much to show them,” I argued. My brother (Brian that is, I'm Dale) said there was too much going on. He was right. I wanted to display the top journal entries, the recent journal entries, the watch list, a blurb about the site, the comments, and I wanted a pretty header to cap it all off. I thought I could do it all. It was just too much. This brings me to the next point:

Popularity is King.

It's true. You wanted to be on prom court, don't deny it. You also want your blog entry on Digg's front page, you want Alexa rankings, and you want Technorati recognition. Hopefully, you'll also want your journal entry in our Top 10. So that's all we put on the front page, plus a button or two to easily navigate the top journal entries. We also stuck some advertising in there; we want to make some money after all.

Focus on Content

The map is the most important thing, but where was it? You could barely see anything. And if you could, you couldn't see anything else. There just isn't enough room to put everything and our site probably looks like some other mapping mashups now because of it. We had to maximize the area used for content so we shrunk our logo and moved things out to secondary pages that didn't need to be on the front page. There's also a separate page for the journal entry where you can see everything now. Check out Version 1 versus Version 2 below (please excuse the formatting, we're having issues with Blogger...). You'll see that nothing looks the way it used to.

Version 1		Version 2

Make it Easy

We made an attempt to do this the first time, but we failed pretty miserably. The biggest change we made was so that someone could play around with the site without creating an account. Now, there's a big link sticking out on every page that says “Create a Map.” Our hope is that people will see it and play around with the site when they get there.

We also tried to streamline the entire experience, from when a user came to the site to when they created and saved a journal entry. This included the process of actually creating a map. First, we had to make sure a user could get to the location on the map that he or she was looking for. To do this, we added geocoding to find a particular city or address and a navigation mode that lets you double click to zoom in on a particular point. Second, we had to make it easy to add, delete, and insert points so new interaction modes were added for each of these. Lastly, we had to make the account creation process as non-invasive as possible. Now, all we ask for is your email (which we only intend on using for abuse notification), a username, and a password. All of this was important because we had to make it easy for people to use the site, or they came and poked around, were unimpressed, and left.

Don't Forget Engineering

Web 2.0 still needs software engineering. For you geeks out there, I'll refer you to Dr. Brooks' collection of essays called The Mythical Man Month. There are two very important essays that apply here: “Plan to Throw One Away” and “The Second System Effect.” I think that they go together very well. “Plan to Throw One Away” basically says that the first implementation is always wrong; you need to throw it away and start over. “The Second System Effect” says that the second system an engineer designs is always the most dangerous due to over-engineering. We really wanted to add some more things to the site but we tried to hold back and do this release correctly. The result is a ground-up rewrite including only those features that we thought we needed to include to make the site successful (for example, we took out the watch list, we'll add it back in when we figure out the best place for it). By the way, every essay in the book is worth reading.

There's also a mantra out there about reinventing the wheel. We tried to do a bunch of that originally as well. We wrote our own dialog class for example. There was a lot that we shouldn't have tried to do. The new version of MyOutdoors.net uses the Yahoo UI library. It's really easy so don't try doing it all yourself.

Conclusion

I'm sure there are other things that deserve to be mentioned about designing for Web 2.0. I'm not going to claim that this is it but those are the things that we thought were really interesting when we went back and looked at what went wrong. I think everyone should think about how Web 2.0 really is different though. I don't think it's just another fad. I see Web 2.0 as the re-integration of the community into technology. In the beginning, the construction of the Internet was the creation of a community. As it progressed, a lot of that was lost and I see Web 2.0 as regaining something that has long been forgotten. I hope that the current trend in big business grasping at every community site out there doesn't lose that along the way. That's just my opinion though.

Anyway, we really hope you like the new site. If you have any suggestions, please let us know and we'll do everything we can to incorporate them (in a reasonable way :) ).