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

Tags: css, javascript, jquery,

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.

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

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.

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!

“Base64″ format used by MIME-encoded documents such as electronic mail messages with embedded images and audio files.

To convert a PNG (for example) image to Base64, you will need some utility. base64 is an open-source converter that does just this.

Do the configure, compile jig:

$ ./configure
$ make
$ sudo make install

Then encode your image:

base64 -e my_image.png my_image.png.base64


Open the my_image.png.base64 file in a text editor and then copy it into your code. An example is shown below, written in Javascript.

const png_image_src = 'data:image/png;base64,'+
'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAANbY1E9YMgAAABl0' +
'RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGAUExURcDYv1C8WdPrtIDAeWqk' +
'Oqnd2VLWaOX0x7ftwZzZlIjGxr7gxanLkdfu1FumybHSsJ3Cutbyx4S9fm2paMrq0Lfo1L/a' +
'o6PHiozL11aZJpnW2oG0ZLTcm5zjvovbvM3qtcror2q5vUaIRHLGZWWkR0aQGSR/BYy5baHY' +
'imrbd/z+/HO9bPb69m29xHy8c2OeMUGJPZDThZPPi3ivdGazzZbBgCuCEd3x2jaICs7ksqLZ' +
'mTp/N6zwtWu/YLDWvZHHeqLS0affzKfvsWDYpn7CvJHJh0+cSGWbY6PQka/Xkvj894W2a4DQ' +
'qIrDhF+hQ8fexJDN24PYgYGzWnXJy6zXpp3Fm5jCg37NdI++dWejWmCwVnSrT6nuyTuLELvh' +
'pV2gO6DSwI3qnd3wv6rQxK/fz1OZxrTvtaLim3rRr+bv5TuCN+jw557FiK7NlWzRkHDGhHLd' +
'fnHWmm2zx7Xe1m21zW65z9Ts0HTHaHrGb3vJb3yvVbTaxVGUTITLtV6w0////94DUpYAAACA' +
'dFJOU///////////////////////////////////////////////////////////////////' +
'////////////////////////////////////////////////////////////////////////' +
'//////////////////////////////8AOAVLZwAAAQxJREFUeNpiqAcCc87wcuVKTl4Qm6G+' +
'XstKOU6eu9ouxNbICySgZajBzluWUuzgkOyqpwMUsNJIEuQVYWUNkOCysxeqZzBXZk+z4RCV' +
'kiopquVUcPNn4JSRd4oRkZAwUSwsKPAQN2YIZ0pPFBUpNQnWZGNj0xOrYShPCtSUdeTTlXNm' +
'0WcUtjRgUE4Kz5Plq0vVzWAJkoy0zGKokDeU4+JjYWHRr+KJVhVTYjDylMn34WPJzeXhiRBX' +
'sXBnKIti0tZW1M9VV/eWlg6LV2Oo943wZHaR5BEXz/EOUzHTYajXEfZWSJBUVY2NN1UxywR5' +
'TsfYIFRAQIDfws8sG+xbICGsZG2tpKamBWQDBBgAU049f2kd9aAAAAAASUVORK5CYII=';

var my_link = document.createElement('a');
my_link.title = "Go to example.com"
my_image = document.createElement('img');
my_image.src = png_image_src;
route_image.border = 0;
my_link.href  = "http://example.com";
my_link.appendChild(my_image);

document.body.insertBefore(my_link, document.body.lastChild);

But of course, the response is in XML, so you’re also wondering how to parse this XML response for something meaningful? The answer is the DOMParser and namespaces. There is a really nice function, getElementsByTagNameNS that allows you to parse out elements given a namespace. I kept trying getElementsByTagNameNS("gml","name"), which didn’t work. The answer seems to be that you need to include a valid uri for the namespace.

var dom = new DOMParser ( ) .parseFromString ( responseText,
                            "application/xml" ) ;

var location = dom.getElementsByTagNameNS (
   "http://www.opengis.net/gml", "name" ) [1].firstChild.data
    if location == " ( Unknown city ) "
        return "";

Enter some really nice web application development tools. Most of these use Firefox, and modify the user-centric application into a developer’s tool.

The Web Developer Firefox Extension is probably the most well known/common. It adds a toolbar that allows you to quickly and easily inspect a webpage’s layout, disable cookies, view source, modify the css on the fly, or do browser teting. It’s indispensable for developing your own site’s layout as well as understanding how other site layouts are handled.

Firefox comes with the DOM Inspector, which is a separate window you can pull up to select and inspect DOM elements of a page, traverse the tree, and dynamically change node attributes and values. This is nice if you want to check out what the class or ID is of a page element, especially with dynamically added elements (i.e. via Javascript) where they aren’t visible in the page’s source.

For checking CSS errors, Javascript errors, and POST/GET requests returned to your browser, check out Firebug (via Behind the Times). It sits in the bottom menu-bar of Firefox and shows a counter of errors on a per-page basis (rather than the Javascript Debugger which is built into Firefox, which shows all errors received to the entire Firefox application, not just the current page). Firebug is very useful for watching incoming Ajax requests. Just be careful, this can eat up a lot of memory when left active on sites with lots of errors (e.g. GMail, which typically runs up in the thousands of errors very quickly)

Even heavier application development and debugging may lead you to the Venkman Javascript Debugger. It is a full Javascript development and debugging environment where you can pull up all of the javascript files, view variables, set breakpoints, run an interactive console, etc. It’s pretty big and complex, so you probably want to check out tutorials like Learning Venkman.

The last tool is not Firefox specific, but is a special build of Apple’s Safari and KHTML engine which provides a very nice DOM inspector: Safari/Webkit Web Inspector.

Happy debugging!

The favicon shows up in your bookmarks, in the address bar, and on the tabs of loaded pages in a tabbable-browser. Being able to dynamically switch the favicon on a page promotes the favicon to the ability to be used as a “Status Monitor” of a webpage. For example, I am uploading a bunch of files to a website, the favicon can show an “uploading” icon, and then a green “complete” icon when it’s done. I can then return to the page to carry on whatever I was doing now that the upload is complete.

Or perhaps I have a webpage open to my weblog stats, or server statistics. The color of the icon can be updated to alert me to notifications and messages. A news site could change the icon when there is a new and pertinent story that I may want to read.

However, Yahoo! has really suprised me and released some very cool developer resources.

• Design Patterns – numerous UI concepts, descriptions, and implementations for various application tasks
• User Interface Library – collection of JS, DHTML, site elements for websites
• Yahoo! User Interface Blog (rss)
• Browser grading chart for following standards

- via vanderwal.net

-21.1765169.5617

In response to his posting to the GeoRSS mailing list, I added a
GeoRSS Simple parsing class.

45.256 -71.92

Still need to add the full GML spec which calls out boxes, polygons, lines, etc. In addition, the ability to automatically detect and parse the correct format (Atom, RSS 0.92, RSS 1.0, RSS 2.0; GML, Simple, W3C) would be really nice.

The article covers how to simply implement Ajax on a website and understand the basic principles behind the Asyncronous communications. Hopefully it can shed some light to developers new to writing Ajax supporting sites and then move on to the more advanced frameworks (such as prototype, Rico, or xajax and others).

For various reasons, they’re using Blogger to currently run their weblogs since it’s free, easy to setup, and easy to use for non-technical people.

The goal of GreenerEarth was to create a companion weblog that provided maps and locations to the various articles that will appear on GreenerEarth. The difficulty resides in the severe restrictions using an hosted blogging tool places on creating a dynamically generated maps. I wanted to allow the writers to easiliy create new posts, put in locations, and then just ‘post’. The actual page would handle parsing the post for the location data and then creating the resulting map.

The only access you have in Blogger (at least) is the main template page, and post templates. Therefore, the solution calls for a marked-up post with lots of tags, and heavy Javascripting of the DOM to dynamically create an array of locations and put these on a GoogleMap.

The result is the ability for any blog author to write a post using the template and the resulting post to have a map with the multiple (or single) locations and article body. As the user clicks on locations in the map, the detailed description shows itself and a bubble shows the summary and link to the site’s homepage.

The nitty-gritty

The post template looks like this:

The fields should be pretty self-explanatory. The GeoRSS microformat is still being standardized, and hasn’t yet been defined for marking up XHTML content. So I made an ad-hoc solution. A filled out post would then look like so:

Sustainable Diamaonds

  Diavik diamond mines are sustainable Mines
   located in the Northwest Territories.
  
homepage
Diavik diamond mine
Lac de Gras
Northwest Territories
Canada


  Some Interesting information
  about Diamond mines

If you have multiple locations, copy the template before the

“;

var marker = createMarker(locationPoints[locationPoints.length-1], i, html, mapLocation[i]);

map.addOverlay(marker);

}
map.addOverlay(new GPolyline(locationPoints));
map.centerAndZoom(locationPoints[0], 4);

}

Finally, the appropriate CSS markup also needs to be placed in the template. Modify it as you want to make it match the rest of your blog.

#map {
    float: left;
    text-color: black;
    font-size: 12px;
    }
#map .mapMarker{
  color: black;
  width: 250px;
}

#map .mapMarkerMore {
  text-align:right;
}
.location {
    font-size: 12px;
    border: 1px solid white;
    background-color: gray;
    padding-left: 5px;
    }
.location .summary {
    color: white;
    font-size: 16px;
    border-bottom: 1px solid white;
    background-color: #9ad;
    margin-left: -5px;
    padding-left: 5px;
    display:block;
    }
.location .detail {
	display: inline;
    }
.geo_name {
    font-size: 11px;
    border-bottom: 1px;
    }

.geo_city, .geo_region, .geo_country {
    display: inline;
    margin-top: 4px;
    padding-right: 3px;
    font-size: 9px;
    border-top: 1px solid white;
    text-align: right;
    }

.greenNav {
	display: inline;
	list-style-type: none;
	padding-right: 5px;
	margin: 0px;
    }
.greenNav li {
	display: inline;
	list-style-type: none;
	border-right: 1px solid gray;
	padding-right: 5px;
    }
.hidden {
    display: none;
     }

Here is a very nice javascript slider. It’s released under various licenses including GPL, a non-commerical free license, and a commerical $ license.

It’s very simple to use, requires including 3 javascript files (24k) and a css file. Check the docs out for more info. While there, checkout their other cool UI elements such as collapsable trees, sortable columns, and very good articles on a host of web development technologies.

The same developers also produce Bindows, which is a full, desktop type set of user interface elements usable to create an entire application interface. It’s a little on the expensive side for a commercial license. However, doing these elements on your own dev time, and making them fast and cross-browser compatible is not going to be easy.

You can also check out the Script.aculo.us – the modern, cool Javascript library built on Prototype SliderDemoOther Javascript interface libraries:

• Javascript User Interface – a fairly old library

The underlying server is available in both PHP and JSP, depending on your particularly preferred flavor. Hrm – no Ruby support. They could probably get a better headline if they provided the new programming language of the month(s).

I think having invigorated, open-source, web-based mapping tools is excellent. I also really like the time-series maps. I think I am going to try and use it for displaying GPS tracks from my bluelogger.

You can download the new version from the software page. There is also an included Readme that discusses setting up your widget over to work over the internet back to your house or office.

I hope you enjoy!

troglogdyte speak

For those interested, coding up preferences for a Dashboard widget are actually impressively straight-forward and easy.

The only two lines of code that are special are the following which get and set the preference for the widget:

    var IndigoServerIP  = widget.preferenceForKey("serverIP");
    if(IndigoServerIP  != '')
        getObj("serverIP").value = IndigoServerIP;  

    widget.setPreferenceForKey(getObj("serverIP").value, "serverIP");

Assumedly these are stored by the name of the widget (e.g. com.highearthorbit.widget.Indigo).

Web development using the newest technologies is obviously a newly emerged, and quickly developing, field. Fortunately, open-source toolsets promote developers and users of these technologies to build and release tools for these technologies.

Tools are our friends

Leslie Frank’s Firefox Web Development Tools Presentation is a good run through of about a dozen tools you should use, or at leat consider using, for your development environemnt. Extending Firefox for web developers has some more useful tools, including a reference to Venkman, a powerful Javascript development environment.

The power lies within

about:config is a very powerful, and little used, configuration option for tweaking the underpinnings of Firefox.

via Born Geek:

There are two browser settings that can make your debugging life much easier. Both can be set through the standard about:config preferences mechanism, and both affect the output sent to the JavaScript console.

The first preference, javascript.options.showInConsole, will log any errors in your chrome XUL files to the JavaScript console when set to true. By default, this option is set to false, so you will need to change the value. The second preference, javascript.options.strict, will display strict JavaScript warnings in the JavaScript console. Again, this is set to false by default. Since many developers do not turn this preference on while developing, you will most likely see a number of errors and warnings with their code (so they can be safely ignored).

The future is now…

For you extension developers, there is also a very exciting feature available in Firefox 1.5, Dynamic Development, which allows an extension to refer to a set of files locally on a disk without the need to repackage and reinstall the XPI during development. Changes are loaded each time, at runtime.

The most popular and well-known geocoders are geocoder.us and Mikel Maron’s geocoder.

However, you can actually do a geocode query on GoogleMaps:

http://maps.google.com/maps?output=js&q=northville+mi

The result is an HTML page containing javascript with the location (and nearby locations). You can then parse this output to retrieve the latitude & longitude.

          

  
          

Northville, MI 48167
      

      
  
  

http://highearthorbit.com/projects/geocode/geocode.html

The page then makes a Javascript call, which gets the values from the
form and makes the async call. The returned value is put in the
textarea.

Right now I hardcoded the US and GB, but plan on extending it to
actually dynamically fill the options via a find_places_get_countries
call to Gaze.

The source is available as a link at the bottom of the page.

What I’m doing is passing back a table from an asynchronous call and placing it into a premade table elementId. The page supports interaction with either javascript, if enabled, or straight href links if javascript is not enabled.

The problem occurs when my Async call returns a table with a <script> tag containing document.write() calls.

Replace innerHTML with innerText and Safari renders the entire script source, Firefox & Camino ignore it.

Hrm – so how to dynamically fill in script into the DOM of a page and have it executed?

The DOM inspector in Firefox correctly shows the Javascript being part of the element, but since the parser has already gone through that element, evaluated the Javascript later in the page, then it doesn’t seem to be re-executed.
Update

It seems as though there is promise in the eval function of Javascript. However, nothing seems apparent yet.