For your Friday Enjoyment: CSS Solar System (is that CSS again as a recursive Acronym?)

This was done with the increasingly popular jQuery, an up-and-coming javascript framework/library. (via Dr. Nic)

Wow, Guilhem has been busy. He recently announced YM4R for Mapstraction. Now you can embed Mapstraction maps into your Ruby on Rails projects.

In case you didn’t know, Mapstraction is a Javascript library that encapsulates the API’s for GoogleMaps, YahooMaps, and Microsoft Virtual Earth maps. You can write once, but switch between any of the map types.

I picked up a lot of great tips at BarCamp Chicago, and I’m trying to pour through them in a decently methodical way, unlike my bookmarking problems. Therefore, I’ll be recapping interesting bits on several upcoming posts.

The first one, which has become immediately pertinent, is Drosera. I wrote about using the web-browser as a development environment before, but the tools for working in Safari were not nearly as nice as those in Firefox. Drosera looks really nice, has the ability to pause and debug. When attached, however, it makes Webkit run rather slow, which is too bad. Firebug leaves Firefox running pretty much unchanged.

Of course, it could also use a nice little icon.

Thanks to Walker Hamilton for the tip.

Technorati Tags: debugging, javascript, mac os x, macosx, drosera

A couple of days ago I mentioned some Greasemonkey scripts I wrote. One of them, which I didn’t discuss, is particularly devious.

What happens when users have the ability to hijack sites and how they expect to be used? For example, there are scripts to provide mapping functionality within Flickr!, or to compare book prices on Amazon.com with other vendors.

MapThis! overrides the “Map This!” link that shows up in GMail when an address is detected. Instead of linking to just a plain-ol’ googlemap, the link is “hijacked” to provide routing directions from the user’s geolocated position (using HostIP) to the address in the email.

This is useful, for example, if a friend sends you the address of their house, or that cool roller-rink with disco ball that you’re meeting up at and you want to quickly get directions.

It also demonstrates how a user isn’t limited by the interface a site-designer supplied, allowing them to customize and use the site as they wan.

I’ve been fairly quiet for the past couple of weeks. I’ve been focused on some projects, including entries to the MapQuest OpenAPI developers’ competition.

One of my entries, which may or may not actually be considered a “mashup”, is a Firefox GreaseMonkey script called GreaseRoute that creates map and route icons for an Microformat formatted adr or geo locations. These are often used in an hcard.

One of the cooler parts is that the extension automatically determines the location of the person viewing the page. Using the HostIP IP-to-Location database, the user’s location is automatically entered as the starting location. So when a user is viewing the webpage of, for example, a store or business, they can click the “route” link and get turn-by-turn directions to that location. No more copy & pasting street/city/state to a form or asking the person next to you “where are we?”

Microformats are a stepping stone on the way to the semantic web. They are a simple way to encode useful information for viewing and mining by users and other applications (ala mashups).

Example adr

The proper format of the adr is as follows:

<div class="adr">
 <div class="street-address">1517 N. Main St.</div>
 <div class="extended-address">Box 203</div>
 <span class="locality">Royal Oak</span>,
 <span class="region">MI</span>
 <span class="postal-code">48067</span>
 <div class="country-name">US</div>
</div>

which will then be displayed as:

Example geo

Instead of an address, one can instead just encode the latitude and longitude:

The Result

GreaseRoute has 2 version, the lite version and the embed version. The lite version displays a map and route icon next to the addresses found on the webpage:

The embed version displays a “route” link. When clicked, a pop-up map is displayed between the users location and the encoded address.

Give GreaseRoute a try and let me know what you think.

You can also go over to Userscripts.org, the GreaseMonkey script repository, and rate them and leave comments.

• UserScripts.org: GreaseRoute
• UserScripts.org: GreaseRouteEmbed
• UserScripts.org: MapThis!