Try, Catch… Ignore!

I was using JSLint today before committing in a javascript file. It was doing some presentational effects we didn’t expect to work in all browsers, so there was a try-catch wrapped around it. And the catch block was empty.

Something a bit like this in fact:

	try {
		...			
	} catch (exception) {
		//browser does not support doing this, so catch error and continue
	}

JSLint gave me this error message:
Expected ‘ignore’ and instead saw ‘exception’.

A very useful answer on StackOverflow explains what this is about. Douglas Crockford has decided that if you have an empty catch block, your variable should be called ‘ignore’, to make it clearer you’re doing this deliberately and haven’t just forgot to do something with the exception.

So this code works:

	try {
		...			
	} catch (ignore) {
		//browser does not support doing this, so catch error and continue
	}

And conversely it only works if you don’t do anything in that block. i.e. this code errors (with “Unexpected ‘ignore’“):

	try {
		...			
	} catch (ignore) {
		alert('there was an error');
	}

Personally I think this is a great idea, it makes the code much more obvious. I’m going to start doing this in other languages too.

Google Maps API – draggable polylines

Update: a lot of the javascript in this article was based on old code I wrote a while ago… thinking about it after I initially published the article I decided to rewrite it slightly. So previously I had one array for destinations, and three global arrays for labels, polylines and markers. It’s much simpler in this case just to have one global array which contains destinations, labels, polylines and markers.

So my previous post in this series added event listeners to polylines, this time I want to make the lines draggable.  In this case I want to have one marker I can move around the map, and the polylines connecting it to the other markers will update to stay elastically-attached to the one draggable marker.  And the distances will update automatically.  Again we’re using the Label code courtesy of Marc Ridey (which I’m not going to repeat here, see my earlier blogpost).  And the rest of the code remains quite similar to previously, with some key differences.

	
var arrDestinations;

function initialize() {
	var map, i, j, latLng, stuDistances, inBetween, labelMarker;

	arrDestinations = [
		{title: 'Place A',	lat: 34.602694,	lng: -106.066132},
		{title: 'Place B',	lat: 33.917153,	lng: -106.869736},
		{title: 'Place C',	lat: 34.254946,	lng: -105.599442}
	];

	var stuHome = {title: 'Where I am', lat: 34.148181, lng: -106.17897};

	var homeLatlng = new google.maps.LatLng(stuHome.lat, stuHome.lng);
	var myOptions = {
		zoom: 9,
		center: homeLatlng,
		mapTypeId: google.maps.MapTypeId.SATELLITE
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	var homeMarker = new google.maps.Marker({
		position: homeLatlng, 
		map: map, 
		title: stuHome.title,
		draggable: true
	});

	$('#tableNeighbours').append(
		  '<tr>'
		+ '<th>Destination</th>'
		+ '<th colspan="2">' + stuHome.title + '</th>'
		+ '</tr>'
	);

	for (i = 0; i < arrDestinations.length; i++) {
		latLng = new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lng);

		arrDestinations[i].marker = new google.maps.Marker({
			position: latLng,
			map: map, 
			title: arrDestinations[i].title,
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});

		// draw lines between each marker and home.  these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances)
		arrDestinations[i].polyline = new google.maps.Polyline({
			path: [homeLatlng, latLng],
			strokeColor: "#FF0000",
			strokeOpacity: 0.5,
			strokeWeight: 4,
			geodesic: true,
			map: map
		});


		// calculate the distance between home and this marker
		stuDistances = calculateDistances(homeLatlng, latLng);
		$('#tableNeighbours').append(
			  '<tr id="row' + i + '">' 
			+ '<td>' + arrDestinations[i].title + '</td>'
			+ '<td class="km">' + stuDistances.km + ' km</td>'
			+ '<td class="miles">' + stuDistances.miles + ' miles</td>'
			+ '</tr>'
		);

		// get the point half-way between this marker and the home marker
		inBetween = google.maps.geometry.spherical.interpolate(homeLatlng, latLng, 0.5);  

		// create an invisible marker
		labelMarker = new google.maps.Marker({  
			position: inBetween,  
			map: map,
			visible: false
		});

		arrDestinations[i].label = new Label();

		arrDestinations[i].label.bindTo('position', labelMarker, 'position');
		arrDestinations[i].label.set('text', stuDistances.miles + ' miles');
		arrDestinations[i].label.setMap(map);
	}

	// lets make the home marker draggable, but none of the others, just for illustrating how we can make the polylines move dynamically
	google.maps.event.addListener(homeMarker, 'dragend', function() {
		var i, stuDistance, inBetween, marker, markerLatLng;
		var homeLatLng = homeMarker.getPosition();

		// do this for each of the markers 
		for (i = 0; i < arrDestinations.length; i++) {
			markerLatLng = arrDestinations[i].marker.getPosition();

			arrDestinations[i].polyline.setPath([homeLatLng, markerLatLng]);
			stuDistance = calculateDistances(homeLatLng, markerLatLng);
			arrDestinations[i].label.set('text', stuDistance.miles + ' miles');

			// update the position of the marker which the label is bound to
			inBetween = google.maps.geometry.spherical.interpolate(homeLatLng, markerLatLng, 0.5);
			marker = new google.maps.Marker({  
				position: inBetween,  
				map: map,
				visible: false
			});
			arrDestinations[i].label.set('position', inBetween);

			// update values in table
			$('#row' + i + ' td.km').text(stuDistance.km + ' kilometres');
			$('#row' + i + ' td.miles').text(stuDistance.miles + ' miles');
		}
	});
}

function calculateDistances(start,end) {
	var stuDistances = {};

	stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);	// distance in metres rounded to 1dp
	stuDistances.km = Math.round(stuDistances.metres / 1000 *10)/10;				// distance in km rounded to 1dp
	stuDistances.miles = Math.round(stuDistances.metres / 1000 * 0.6214 *10)/10;			// distance in miles rounded to 1dp

	return stuDistances;
}

google.maps.event.addDomListener(window, 'load', initialize);

This time when creating the ‘homeMarker’ I make it draggable using this option: draggable: true.

I also added a class to each of the kilometres and miles cells, so they’re easy to identify later when I want to dynamically update them.

And the markers are appended into an array so we can use them later when dragging the centre marker.

And this time we make the labels appear automatically by calling label.setMap(map); as we create each marker, and I never remove them.

We then have a new event listener for the ‘dragend‘ event on the homeMarker.  I’ve tried using ‘drag‘ instead, but it seemed slightly processor-intensive to use (although it did automatically redraw lines and distances as I dragged  – now I’m just redrawing them when the user releases the marker).

And this is what I see. Dragging the red marker redraws the polylines and updates the distances on the labels:

…and the table underneath displays the distances in miles and km, and automatically updates along with the labels:

Destination	Where I am
Place A	51.6 km	32.1 miles
Place B	68.7 km	42.7 miles
Place C	54.7 km	34 miles

Adobe ColdFusion Developer Center

I’d heard there was a hotfix change to Adobe ColdFusion 9 & 10 for the CFMap tag, to start using Google Maps API v3 instead of the deprecated (and very-soon to be unavailable) Google Maps API v2. So I decided to make an infrequent visit to the Developer Center and see if I could find anything about it. Nothing obvious, but I noticed this:

Aha, a useful example on ‘working with Google maps’ using cfmap!  Unfortunately that link just displays a map. It doesn’t show any code, so is useless as an example of using CFMap.  Similarly the other link on using cfspreadsheet merely shows me a dumped query and a table… very useful I’m sure.

Google Maps API – polylines and events

Update: a lot of the javascript in this article was based on old code I wrote a while ago… thinking about it after I initially published the article I decided to rewrite it slightly. So previously I had one array for destinations, and two global arrays for labels and polylines. It’s much simpler in this case just to have one global array which contains destinations, labels and polylines.

So following on from the previous post, Google Maps API – polylines and distances, let’s try enhancing that code a bit.

Firstly, as well as having a table showing distances, I want to show a label on each polyline with the distance in miles.  For that we can create a custom overlay by prototyping the OverlayView class.

Secondly, let’s have some events associated with the map – when I click on a polyline I want to see that label.  Also we can have an event listener on the table of distances which triggers the same event on the polylines.

Here’s what I see when I click on a polyline, or mouseover the table row that contains its data.

So, here’s the Label class – this code is almost entirely from a blogpost by Marc Ridey with one tiny change on my part.  Custom Overlays need to prototype google.maps.OverlayView().  It then must define onAdd(), onRemove() and draw() functions.  The only thing I changed here from Marc’s original version was to use var pane = this.getPanes().floatPane; instead of var pane = this.getPanes().overlayLayer;  The OverlayLayer meant the labels appeared underneath polylines and markers.  The floatPane is the equivalent of using a higher z-index, so the labels now float above those items.

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
	// Initialization
	this.setValues(opt_options);
	
	// Label specific
	var span = this.span_ = document.createElement('span');
	span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
	                     'white-space: nowrap; border: 1px solid blue; ' +
	                     'padding: 2px; background-color: white';
	
	var div = this.div_ = document.createElement('div');
	div.appendChild(span);
	div.style.cssText = 'position: absolute; display: none';
}
Label.prototype = new google.maps.OverlayView();

// Implement onAdd
Label.prototype.onAdd = function() {
	var pane = this.getPanes().floatPane;
	pane.appendChild(this.div_);
	
	// Ensures the label is redrawn if the text or position is changed.
	var me = this;
	this.listeners_ = [
		google.maps.event.addListener(this, 'position_changed',
			function() { me.draw(); }),
		google.maps.event.addListener(this, 'text_changed',
			function() { me.draw(); })
	];
};

// Implement onRemove
Label.prototype.onRemove = function() {
	var i, I;
	this.div_.parentNode.removeChild(this.div_);
	
	// Label is removed from the map, stop updating its position/text.
	for (i = 0, I = this.listeners_.length; i < I; ++i) {
		google.maps.event.removeListener(this.listeners_[i]);
	}
};

// Implement draw
Label.prototype.draw = function() {
	var projection = this.getProjection();
	var position = projection.fromLatLngToDivPixel(this.get('position'));
	
	var div = this.div_;
	div.style.left = position.x + 'px';
	div.style.top = position.y + 'px';
	div.style.display = 'block';
	
	this.span_.innerHTML = this.get('text').toString();
};

And so then here’s the rest of the javascript:

var arrDestinations;

function initialize() {
	var map, i, j, latLng, stuDistances, inBetween, labelMarker;

	arrDestinations = [
		{title: 'Keswick',		lat: 54.60039,		lng: -3.13632},
		{title: 'Coniston',		lat: 54.36897,		lng: -3.07561},
		{title: 'Lake District',	lat: 54.5003526,	lng: -3.0844116},
		{title: 'Cumbria',		lat: 54.57723,		lng: -2.79748}
	];
	
	var stuHome = {title: 'Ambleside', lat: 54.42838, lng: -2.9623};
	
	var homeLatlng = new google.maps.LatLng(stuHome.lat, stuHome.lng);
	var myOptions = {
		zoom: 10,
		center: homeLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
	var homeMarker = new google.maps.Marker({
		position: homeLatlng, 
		map: map, 
		title: stuHome.title
	});
	
	$('#tableNeighbours').append(
		  '<tr>'
		+ '<th>Destination</th>'
		+ '<th colspan="2">' + stuHome.title + '</th>'
		+ '</tr>'
	);
			  
	for (i = 0; i < arrDestinations.length; i++) {
		latLng = new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lng);
		
		arrDestinations[i].marker = new google.maps.Marker({
			position: latLng,
			map: map, 
			title: arrDestinations[i].title,
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});
					
		// draw lines between each marker and home.  these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances)
		arrDestinations[i].polyline = new google.maps.Polyline({
			path: [homeLatlng, latLng],
			strokeColor: "#FF0000",
			strokeOpacity: 0.5,
			strokeWeight: 4,
			geodesic: true,
			map: map,
			polylineID: i
		});
					
		// calculate the distance between home and this marker
		stuDistances = calculateDistances(homeLatlng, latLng);
		$('#tableNeighbours').append(
			  '<tr id="row' + i + '">' 
			+ '<td>' + arrDestinations[i].title + '</td>'
			+ '<td>' + stuDistances.km + ' km</td>'
			+ '<td>' + stuDistances.miles + ' miles</td>'
			+ '</tr>'
		);
		
		// get the point half-way between this marker and the home marker
		inBetween = google.maps.geometry.spherical.interpolate(homeLatlng, latLng, 0.5);  
		
		// create an invisible marker
		labelMarker = new google.maps.Marker({  
			position: inBetween,  
			map: map,
			visible: false
		});
		
		arrDestinations[i].label = new Label();
		
		arrDestinations[i].label.bindTo('position', labelMarker, 'position');
		arrDestinations[i].label.set('text', stuDistances.miles + ' miles');
		
		// we'll use this ID later:
		arrDestinations[i].label.polylineID = i;
	
		// lets add an event listener, if you click the line, i'll tell you the distance
		google.maps.event.addListener(arrDestinations[i].polyline, 'click', function() {
			// remove other labels
			for (j = 0; j < arrDestinations.length; j++){
				if (this.polylineID != j) {
					if(typeof(arrDestinations[j].label) != "undefined"){
						arrDestinations[j].label.setMap(null);
					}
				} else {
					arrDestinations[j].label.setMap(map);
				}
			}
		});
	}
}

function calculateDistances(start,end) {
	var stuDistances = {};
	
	stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);	// distance in metres rounded to 1dp
	stuDistances.km = Math.round(stuDistances.metres / 1000 *10)/10;							// distance in km rounded to 1dp
	stuDistances.miles = Math.round(stuDistances.metres / 1000 * 0.6214 *10)/10;				// distance in miles rounded to 1dp

	return stuDistances;
}

function removeAllLabels() {
	var i;
	// remove other markers
	for (i = 0; i < arrDestinations.length; i++){
		// don't remove the current label
		if(typeof(arrDestinations[i].label) != "undefined"){
			arrDestinations[i].label.setMap(null);
		}
	}
}

$(document).ready(function() {
	$('table').delegate("td", "mouseover mouseout", function(e) {
		if (e.type == 'mouseover') {
			var id = $(this).parent().attr('id').replace('row', '');
			google.maps.event.trigger(arrDestinations[id].polyline, 'click');
		} else {
			removeAllLabels();
		}
	});
});

google.maps.event.addDomListener(window, 'load', initialize);

Some other changes worth mentioning from the previous article. We’re using google.maps.geometry.spherical.interpolate to calculate a point 50% of the way along the polyline. This could also be used if you wanted to place markers at regular intervals along the line for instance.

We then create an invisible marker at that position, and bind our Label to it.  And we add all the labels into an array.

Then we have an event listener on the polyline for any ‘click’ events.  When someone clicks on a line, I want to hide all the other labels and only show this one.  Alternatively you might want to not have any event listener, and just show all the labels all the time.

Then there’s another event listener for when we mouseover / mouseout any table cells.  Because we’re adding the table rows dynamically via the JS, I’m using the jQuery .delegate() function.  Whenever you mouseout from a  TD, the marker is removed.  If you mouseover, we can simply trigger a click on that polyline, which will then execute the google maps event listener.

Google Maps API – polylines and distances

So after a basic introduction to polylines, let’s try doing a bit more with them. Here’s a simple example based on something I was doing for work. Supposing you have a bunch of different locations, and you want to show the distance between them? In this case I had one central destination, and I wanted to show the distance from there to several nearby towns. I did this initially using polylines, as in this example, although in reality it would be more useful to show driving directions (more on that in a future post).

Here’s what I came up with:

And I displayed this table beneath the map:

Destination	Distance from Ambleside
Keswick	22.2 km	13.8 miles
Coniston	9.9 km	6.1 miles
Lake District	11.3 km	7 miles
Cumbria	19.7 km	12.2 miles

And here’s the Javascript I used to do it. Originally I was getting my coordinates from the database using ColdFusion, and then writing them into the Javascript. I was also doing some infowindows attached to the markers, and labels on the polylines indicating the distances. But for this post I’ve just kept it simple for now.

<!DOCTYPE html>
<html>
<head>
<title>lines between the nearest destinations showing distance</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:600px; height:500px }
</style>
<!-- need to load the geometry library for calculating distances -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function initialize() {
        var map, i, latLng, marker, polyline, stuDistances;
    
        var arrDestinations = [
            {title: 'Keswick',        lat: 54.60039,   lng: -3.13632},
            {title: 'Coniston',       lat: 54.36897,   lng: -3.07561},
            {title: 'Lake District',  lat: 54.5003526, lng: -3.0844116},
            {title: 'Cumbria',        lat: 54.57723,   lng: -2.79748}
        ];
        
        var stuHome = {title: 'Ambleside', lat: 54.42838, lng: -2.9623};
        
        var homeLatlng = new google.maps.LatLng(stuHome.lat, stuHome.lng);
        var myOptions = {
            zoom: 10,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
        var homeMarker = new google.maps.Marker({
            position: homeLatlng, 
            map: map, 
            title: stuHome.title
        });
        
        $('#tableNeighbours').append(
              '<tr>'
            + '<th>Destination</th>'
            + '<th colspan="2">' + stuHome.title + '</th>'
            + '</tr>'
        );
                  
        for (i = 0; i < arrDestinations.length; i++) {
            latLng = new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lng);
            marker = new google.maps.Marker({
                position: latLng,
                map: map, 
                title: arrDestinations[i].title,
                icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
            });
                        
            // draw lines between each marker and home.  these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances)
            polyline = new google.maps.Polyline({
                path: [homeLatlng, latLng],
                strokeColor: "#FF0000",
                strokeOpacity: 0.5,
                strokeWeight: 4,
                geodesic: true,
                map: map
            });
            
            // calculate the distance between home and this marker
            stuDistances = calculateDistances(homeLatlng, latLng);
            $('#tableNeighbours').append(
                  '<tr>' 
                + '<td>' + arrDestinations[i].title + '</td>'
                + '<td>' + stuDistances.km + ' km</td>'
                + '<td>' + stuDistances.miles + ' miles</td>'
                + '</tr>'
            );
        }
    }
    
    function calculateDistances(start,end) {
        var stuDistances = {};
        
        stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);    // distance in metres
        stuDistances.km = Math.round(stuDistances.metres / 1000 *10)/10;                            // distance in km rounded to 1dp
        stuDistances.miles = Math.round(stuDistances.metres / 1000 * 0.6214 *10)/10;                // distance in miles rounded to 1dp
        
        return stuDistances;
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
    <div id="map_canvas"></div>
    
    <table id="tableNeighbours" border="1"></table>
</body>
</html>

So I’m dynamically adding the distance information from each location to the table as each marker is added. You’ll notice that in the calculateDistances function, instead of simply dividing the metres distance by 1000 to get it in kilometres, I multiply by 10, then round, then divide by 10. This is in order to round the distances to 1 decimal place.

e.g. the distance between my Ambleside and Keswick markers is 22205.96176105692 metres, according to Google. So to convert that to kilometres if I just divide by 1000 it gives:
22.20596176105692
The Round() function rounds to the nearest integer. So instead let’s only divide by 100 (or divide by 1000 then multiply by 10, as I’m doing, same thing). Which gives:
222.0596176105692
Then we call Math.round(), which gives:
222
And finally divide that by 10:
22.2
There are other ways to achieve this in javascript of course!

Notice as well that we’ve added the optional `libraries=geometry` parameter to the URL for the Google Maps JS file. This is so we can use the Geometry Library to calculate the distance between locations, using the computeDistanceBetween function. Also read this useful article which explains some more about using the Geometry Library.

Google Maps API – polylines

So now we’ve created a map, added markers and infowindows. Maybe you want to start drawing lines and shapes on it.

Supposing I have two markers, and I just want to draw a line connecting them.

<script type="text/javascript">
	function initialize() {
		var homeLatlng = new google.maps.LatLng(51.476706,0);

		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 15,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

		// add start marker
		var startLatLng = new google.maps.LatLng(51.482051,0.001436);

		var startMarker = new google.maps.Marker({
			position: startLatLng, 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});

		// add end marker
		var endLatLng = new google.maps.LatLng(51.473271,0.003195);

		var endMarker = new google.maps.Marker({
			position: endLatLng, 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png'
		});

		// draw the route
		var route = new google.maps.Polyline({
			path: [startLatLng, endLatLng],
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 4,
			map: map
		});	
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>

Which gives us this simple map here:

The important part to note here is the path attribute in the Polyline Options. The [ ] indicates it is an array, and indeed you can make an array of many coordinates:

	function initialize() {
		var homeLatlng = new google.maps.LatLng(51.476706,0);

		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 15,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

		// add start marker
		var startMarker = new google.maps.Marker({
			position: new google.maps.LatLng(51.482238,0.001581), 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});

		// add end marker
		var endMarker = new google.maps.Marker({
			position: new google.maps.LatLng(51.481577,-0.0022), 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png'
		});

		// create an array of coordinates
		var arrCoords = [
			new google.maps.LatLng(51.482238,0.001581),
			new google.maps.LatLng(51.473364,0.011966),
			new google.maps.LatLng(51.471974,-0.000651),
			new google.maps.LatLng(51.472108,-0.002196),
			new google.maps.LatLng(51.474995,-0.003827),
			new google.maps.LatLng(51.476492,-0.005629),
			new google.maps.LatLng(51.477855,-0.006058),
			new google.maps.LatLng(51.478443,-0.007045),
			new google.maps.LatLng(51.479298,-0.007861),
			new google.maps.LatLng(51.481202,-0.002136),
			new google.maps.LatLng(51.481577,-0.0022)
		];

		// draw the route
		var route = new google.maps.Polyline({
			path: arrCoords,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 4,
			map: map
		});	
	}

	google.maps.event.addDomListener(window, 'load', initialize);

Which gives you something more useful (if you were wanting to map the boundary of Greenwich Park that is):

One important detail with polylines is if we want the lines to be geodesic or not.  When drawing lines, by default they are in a straight line on a 2D surface.  But the earth’s surface is curved.  What this means is if you want the shortest line between two points, the line might be slightly curved.  This is probably easier to illustrate than to explain.

Example One

Here I’m drawing one blue vertical line, and several red diagonal lines, using this code:

	function initialize() {
		var line;
		var homeLatlng = new google.maps.LatLng(0,0);
				
		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 2,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		
		for (var i = 0; i < 60; i+= 5) {
			line = new google.maps.Polyline({
				path: [homeLatlng, new google.maps.LatLng(i,170)],
				strokeColor: "#FF0000",
				strokeOpacity: 1.0,
				strokeWeight: 1,
				geodesic: false,
				map: map
			});
		}
		
		// for vertical line just draw one line
		line = new google.maps.Polyline({
			path: [homeLatlng, new google.maps.LatLng(85,0)],
			strokeColor: "#0000FF",
			strokeOpacity: 1.0,
			strokeWeight: 1,
			geodesic: false,
			map: map
		});
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);

Notice I’m specifying geodesic: false – we don’t want geodesic curved lines.

Also one other difference over earlier examples.  We need to use the Geometry library from Google, so have to add this as a parameter when calling their script:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Example Two

This time simply change the geodesic attribute to true in both places we create polylines; all the other code is identical.

The vertical line and the one horizontal line don’t look any different, but the diagonal lines take a curved route which is approximately the shortest distance, following the earth’s curve, between the two points. Of course on shorter distances you’re unlikely to notice any difference between the straight and curved lines, so for the most part you’ll typically use straight lines.

Converting UUID to Base36

Base 36

I needed to generate a random unique string of no more than 30 characters length for integrating with an external API.  Usually for something like this we’d use a UUID/GUID, which are 36 characters long (or 35 in ColdFusion).  A colleague came up with the idea of taking that and converting it to Base 32.  He was using C# and this class, but then this part of the work got transferred to the ColdFusion team, so here’s the approach I took.

Firstly, a UUID is a hexadecimal representation of a 128-bit number.  Being hexadecimal that’s Base 16 obviously; the characters 0-9A-F.

A 128-bit number = 2^{^128}, which is a very big number (340,282,366,920,938,463,463,374,607,431,768,211,456 possible values).  ColdFusion can struggle with integers this size in certain functions, e.g. InputBaseN (and its counterpart FormatBaseN), otherwise that would be ideal for what I’m trying to do here

There’s already a function in CFLib which could do this, but it’s compatible with ColdFusion 5, i.e. it’s not got access to any of the underlying Java classes which CFMX does.  My colleague Adam also wrote a different function which can convert between any two bases, but it’s more fully-featured than I require as well.

UUID’s also contain hyphens.  Typically a UUID format is in a 8-4-4-4-12 pattern, i.e. the string is 36 characters long.  ColdFusion does it differently; 8-4-4-16, only 35 characters long.  Apparently this difference was a mistake, which they didn’t want to amend later due to backwards-compatibility. However for the purposes of this code, I don’t care either way, I just want to get rid of the hyphen separators.

So, step 1 is remove the hyphens from a UUID:

<cfset strUUID = createUUID()>
<cfset strUUID = replace(strUUID, "-", "", "ALL")>

Now I want to turn this hexadecimal string into a BigInteger, which is the Java class which can deal with numbers this size (Integer only goes up to 2^{^31}-1, Long goes up to 2^{^63}-1, so BigInteger it has to be).

<cfset bigInt = createObject("java", "java.math.BigInteger").init(strUUID, 16)>

So we use the BigInteger constructor, specifying our string and the Base 16 radix as the second parameter.

Step 3, we want to then convert that BigInteger to Base 36. This is the characters A-Z0-9, and is ‘the most compact case-insensitive alphanumeric numeral system using ASCII characters’. Which I took to be a good thing; the advantage that Base 32 (that my colleague had chosen) would have given is it eliminates certain characters which might be easily-confused if you were reading the values after encoding in that base. So it’s ideal for generating codes used for humans, but that wasn’t going to be an issue here, so I chose Base 36 instead.

<cfset strBase36 = bigInt.toString(36)>

Putting it all together:

<cfset strUUID = createUUID()>
<cfset strUUID = replace(strUUID, "-", "", "ALL")>
<cfset bigInt = createObject("java", "java.math.BigInteger").init(strUUID, 16)>
<cfset strBase36 = bigInt.toString(36)>

<cfoutput>
strUUID: #strUUID#, #len(strUUID)#<br>
strBase36: #strBase36#, #len(strBase36)#
</cfoutput>

Gives me something like:

strUUID: AFA64721B8AC6F8CD055DE2527EB20F9, 32
strBase36: aecxzys9dnwydn6ejgkxwgb95, 25

PS: apologies to Base36 (the company) for borrowing their funky (and let’s be honest, better-executed) Base36 mosaic idea.

ColdFusion cfloop versus cfscript for loop performance

I’m sure most web developers are aware that, in Javascript, it’s generally considered best practice to do this:

for (var i = 0, len = array.length; i < len; i++) { }

instead of this:

for (var i = 0; i < array.length; i++) { }

The theory being that you improve performance by caching the array length once, instead of each time you iterate over the loop (although it’s open to debate how important this is; it really only benefits IE).

I decided to see if there was any benefit in doing the same thing with array loops in ColdFusion. Initially just tested with CFML, then again with CFScript, to see if there were any differences.

<!--- start with a blank file each time --->
<cfif fileExists("arraylen.txt")>
	<cffile action="delete" file="arraylen.txt">
</cfif>

<cfloop index="j" from="1" to="1000">
	<!--- create a large array to loop over later --->
	<cfset myArray = []>	
	<cfloop index="i" from="1" to="10000000"><cfset arrayAppend(myArray, "")></cfloop>

	<cfscript>
		// Method 1
		tick = GetTickCount();

		for (i=1; i <= arrayLen(myArray); i++) {}

		recordTime(
			type	= "CFScript (arrayLen)",
			tick	= tick
		);

		// Method 2
		tick = GetTickCount();

		len = arrayLen(myArray);

		for (i=1; i <= len; i++) {}

		recordTime(
			type	= "CFScript (var'ed)",
			tick	= tick
		);
	</cfscript>

	<!--- Method 1 --->
	<cfset tick = GetTickCount()>

	<cfloop index="i" from="1" to="#arrayLen(myArray)#"></cfloop>

	<cfset recordTime(
		type	= "CFML (arrayLen)",
		tick	= tick
	)>

	<!--- Method 2 --->
	<cfset tick = GetTickCount()>

	<cfset len = arrayLen(myArray)>

	<cfloop index="i" from="1" to="#len#"></cfloop>

	<cfset recordTime(
		type	= "CFML (var'ed)",
		tick	= tick
	)>
</cfloop>

<cffunction name="recordTime" output="false" returntype="void">
	<cfargument name="type" type="string" required="true">
	<cfargument name="tick" type="numeric" required="true">

	<cfset var tock = GetTickCount()>
	<cfset var time = tock - arguments.tick>

	<cffile action="append" output="#arguments.type##chr(9)##time#ms" file="arraylen.txt">
</cffunction>

What I did find was that the two methods, of either calculating arrayLen() within the FOR loop, or storing it as a variable, hardly differed at all in performance.

However there was a big difference in performance between CFML and CFScript. In this case, the looping was much slower in CFScript. This isn’t something new, I’m sure I’ve heard this before, but it was an interesting reminder for me that sometimes it’s not always best to write everything in CFScript.

So here’s the results showing the average times from running this 1000 times:

CFML (arrayLen)	257.883ms
CFML (var’ed)	258.284ms
CFScript (arrayLen)	1259.294ms
CFScript (var’ed)	1180.07ms

As we can see, the difference between caching the array length in a variable, or using arrayLen() for the loop limit, is negligible in CFML, less than 0.5 of a millisecond after 1000 iterations!

However in CFScript, it seems slightly quicker to use a variable instead of referring to arrayLen() within the iterator. But not so much that I’d say I’d favour one method over the other. Although I’ll certainly think twice before writing array loops in CFScript instead of CFML… although in reality the difference in performance is relatively minor (unless you’re working on massive arrays and/or have a high-traffic application).

PS: I’m running this on Adobe ColdFusion 9,0,1,274733 on Windows 7, YMMV

Regex to find 6 repeating characters

I wanted to check our codebase for where we had six repeating characters in HTML and CSS for colours, e.g. #FFFFFF for white.  Here’s the regular expression for it, basically blogged here so I can remember where to find it later:

([a-fA-F0-9])\1{5}

So [a-fA-F0-9] looks for a single character that is one of the letters A – F (only need to go up to F because we’re dealing with hexadecimal numbers), or the digits 0 – 9.

The ( ) parentheses around that turns it into a backreference.

The \1 then refers to that backreferenced matched, and the {5} says to match it exactly 5 times.

So it’ll find where there’s a single matching character that is then repeated five times.

What I was doing this for was to replace all six character codes (that repeat) for colours with three character codes (because #FFF is equivalent to #FFFFFF). So to then replace it, I used the following (in Eclipse):

Find: ([a-fA-F0-9])\1{5}
Replace with: \1\1\1

We can also modify the regular expression so it also catches colours like #FF0000 or #33FF99, where we have three repeating sets of identical digits. These can also be shortened, to #F00 or #3F9.

This modified regular expression will cover this too. In this case we’re looking three times for a single character that gets repeated once each time. We then replace with just the three different single characters, ignore the repeating characters:

Find: ([a-fA-F0-9])\1{1}([a-fA-F0-9])\1{1}([a-fA-F0-9])\1{1}
Replace with: \1\2\3

ColdFusion regular expression backreferences and numeric strings

Supposing you have a string that starts with a number, e.g. “25% discount this weekend”, and you’re using that along with a regular expression.  If you’ve got a backreference immediately prior to that “25%…”, ColdFusion treats it as \125 instead of \1. 

For instance:

<cfset myString = "25% Discount this weekend">

<cfset originalString = "Look out for our special offers, including XXX and much more">

<cfset newString = reReplace(originalString, "(.*)XXX(.*)", "\1#myString#\2")>

<cfoutput>#newString#</cfoutput>

This just outputs:
% Discount this weekend and much more
as it thinks that you’re trying to do \125 instead of \1 followed by “25%…”

To get around this, you can use \E to separate the backreference from the rest of the string.
\E is meant to indicate when you’ve reached the end of an uppercase or lowercase block as set by \U or \L. However in this case it simply indicates to the regular expression process where the end of the backreference occurs.

<cfset newString = reReplace(originalString, "(.*)XXX(.*)", "\1\E#myString#\2")>

<cfoutput>#newString#</cfoutput>

This time it correctly outputs:
Look out for our special offers, including 25% Discount this weekend and much more