Winning with Microformats and JQuery

Microformats are a nice way to get semantic data onto a page, and here at Compsoft we have had a maptacular week which has given us the chance to use some with a little JQuery to make things nice.

So on a map we are plotting locations. We are also listing these locations next to the map. You can drag and drop a selection of locations from the main list, into a short list. You can then get Google maps to create us a route based on this short list.

But the cool thing is, you can drag items in the short list to rearrange the route!





How though, do you know the order of the items in the short list once they have been reordered?

With the magic of JQuery and microformats of course!

The markup used to present also defines the data that is being displayed. CSS styling then allows us to make it look nice. This is what the markup looks like:

<div id="location628" class="location">
    <div class="name">Geodis UK Limited</div>
    <div class="address">Warren Farm Transfer Station</div>
    <div class="detail">1 mile</div>
    <div class="latlng">(50.8915618, -1.1965132)</div>
</div>

We can make the lists sortable and allow drag and drop between them with JQuery like this:

$(document).ready(function() {
    $("#locations").sortable({ connectWith: "#selectedLocations" });
    $("#selectedLocations").sortable({ connectWith: "#locations" });
});

and listen for the sorting to finish with this:

$("#selectedLocations").bind('sortupdate', function(event, ui) {
    getRoute();
});

And because we are using JQuery, and microformatting makes it clear what the data means, we can use a JQuery selector to get the data stored on the page in the order they are displayed! This makes it so simple to grab the ordered data.

function getRoutes() {

    var waypoints = [];
    var stops = $("#selectedLocations .latlng");
    for (var i = 0; i < stops.length; i++) {
        if (divs[i])
            waypoints.push(stops[i].innerHTML);
    }
    //GDirections object connected to GMap on page to display the route
    directions.loadFromWaypoints(waypoints);
}

jQuery plugins - A treasure trove of awesome

In order to provide a richer, cross-browser, more interactive experience for our client web applications, we make use of jQuery. jQuery is a robust javascript framework that takes a lot of the complexity out of writing client side javascript.

One of the most powerful features of the framework is that it's been developed with a highly extensible plugin model.

We recently decided to add some interactivity to our partner site Bluesulphur to replace some of the flash content we currently have. As part of that, I looked at some of the plugins currently available.
These are some of the nicest plugins I found.


Facebook search engine - A Facebook style autosuggest plugin using jQuery. It's particularly pretty and although it currently uses a php source for data, this isn't a big limitation, these can be swapped out to use .NET web services as a provider quite easily.

coda bubble is a mac like popup that could be put to use in many situations.

jQuery Tablesorter is a cute little plugin that makes any table sortable

Fancybox is a popup plugin that you can use for popup image galleries, the popups have nice transition effects as well as inbuilt navigation and grouping functionality.

I thought for the last example, I'd show an html editor and I really like markitup, it's both simple and sexy. It looks like it's an easy integrator too, which is always a plus.

So, to sum up, there are a lot jQuery plugins out there, more than 2500 just on the jQuery plugin site alone. New and awesome plugins are being released every day, check them out!

Oh, and Compsoft are a great choice for integrating jQuery interactivity and plugins into your site too! *wink*

Vagaries of geocoding a postcode

Plotting 'lat lngs' on a map is a fairly straight forward task. Especially doing it on a Google map.

Using a .NET implementation of a Google map is nice and easy. Doing it with PHP and javaScript is a bit more of a work up, but perhaps more satisfying when you get dirty and use some of the natty little Google features available.

However, in the course of writing a site for a Letting agent [www.batterseaflats.com] I came across an unexpected result when geocoding via HTTP with Google.

To make the site really easy to administrate details of properties I thought it would be nice to have a field containing the property's postcode, and during the save process, geocode up the postcode to get a nice 'lat lng' to show on a map. Of course I based the expected result on the performance of locating a postcode via Google's own maps.google.co.uk interface, which is nice and accurate.

Unfortunately, I often ended up with addresses that weren't quite in the right place. Much as I like Germany, I was quite sure I shouldn't be displaying properties outside of London!

I switched to using the GClientGeocoder Google object, but it still wasn't accurate enough. (Consider having four or five properties in the same street to advertise, you really want them to be in the right place on the street).

So I thought I'd let the user geocode an address string (because flats are sometimes in blocks with a name that can cause problems trying to guess what the user has typed in), then allow them to move the point around on the map. A simple feature, which the client really liked!

Use GClientGeocoder to get location:

function locateAddress(address) {

geocoder.getLatLng(

address,

function(point) {

if (!point) {

alert(address + " not found");

} else {

showPoint(point);

}

});

}

When creating the marker on the map, enable the 'draggable' GMarker property:

var marker = new GMarker(point, { icon: iconAvailable, draggable: true, dragCrossmove: true });

and listen for the marker's 'dragend' and capture the new location:

GEvent.addListener(marker, "dragend", function(latlng) {

captureLatLng(latlng);

});

And when displaying the list of properties, go crazy by synchronising the mouse hovering on the sidebar list of entries with the markers by adding a Event Listeners for 'mouseover' and 'mouseout' switching the styles as needed:

GEvent.addDomListener(div, 'mouseover', function() {

div.className = 'sideHighlight';

marker.setImage('images/highlightHouse.png');

});

GEvent.addDomListener(div, 'mouseout', function() {

div.className = 'sideNormal';

marker.setImage('images/house.png');

});

Details of the Battersea Flats project can be found here: http://www.compsoft.co.uk/Portfolio_Battersea_Flats