Part 1: Loading, projecting, and drawing geodata
I’m getting into more canvas and JavaScript for interactive mapping. Much of the Flash/ActionScript work I’ve written or come to rely upon is directly portable to JS/canvas. What’s missing is a sweet RIA framework and IDE for the kind of development Flash and Flex have made possible for years.
Luckily it’s not hard to roll our own interactive web map using web standard technologies. In this post I’m just showing off the basics: dynamically loading geodata, projecting it client-side, and rendering to the canvas element.
Hopefully the above map shows up for you. It’s loaded into this blog post with dynamic KML data, projected using the Proj4js library, and drawn onto HTML’s canvas element using JavaScript. You can check out the P.O.C. on a separate page.
Loading geographic data
It all starts with data. Points, polylines, or polygons — typically defined by latitude/longitude coordinates. Your data may be in a CSV file or in a database. For a simple interactive web map it’s best if it’s in a common GIS file format, like the Shapefile or KML.
These days, it’s not too hard to load a geographic layer on top of a web map — using Google Maps or OpenLayers, say. But since we’re looking down the road to interactivity, custom projections, and thematic mapping, it’s best to roll our own. Luckily, getting the data in is pretty easy.
In ActionScript I would use Edwin van Rijkom’s ESRI SHP parser, my own E00 parser, or some simple custom methods I’ve written to load in KML documents. Tom Carden of Stamen has done some great work porting the AS3 SHP library to JavaScript, with additional classes and methods to allow basic layering, panning, and zooming.
Carden’s classes are great; for demo purposes, and to keep this as lightweight as possible, I’ve just written a quick JavaScript method to grab what I need from a KML document:
var features = new Array();
$( xml ).find( 'Placemark' ).each( function() {
var rings = new Array();
$( this ).find( 'outerBoundaryIs' ).each( function() {
var ring = new Array();
var coordsText = $( this ).find( 'coordinates' ).text();
var coordStrings = coordsText.split( ' ' );
for ( var coordText in coordStrings ) {
var coordinate = new Array();
var coordSplit = coordStrings[ coordText ].split( ',' );
for ( var coordInd in coordSplit ) coordinate.push( Number( coordSplit[ coordInd ] ) );
ring.push( coordinate );
}
rings.push( ring );
} );
features.push( rings );
} );
/* feature coordinates all loaded -- now do something with them */
} );
You’ll notice a bit of jQuery in there. And you’ll also notice that it grabs only coordinate data and works only for polygons. But it produces an array of feature coordinates, which is an array of ring coordinates, which is an array of lat/long coordinates, which is all we need for the current application.
Projecting geographic data
One of my biggest beefs with the typical online map providers is that they’re all rendered in a Mercator projection. No problem for most purposes (and great for producing those 90 degree road intersections), but not so great for country-level mapping and bad for many thematic mapping pursuits. That’s one reason we’re rolling our own here.
PROJ.4 is a generally sweet projections library, originally written in C by Gerald Evenden then of the USGS. It’s been ported to JavaScript as Proj4js. To use it you just have to define source and a dest objects:
+proj=aea\
+lat_1=20\
+lat_2=-23\
+lat_0=0\
+lon_0=25\
+x_0=0\
+y_0=0\
+ellps=WGS84\
+datum=WGS84\
+units=m\
+no_defs';
var source = new Proj4js.Proj( 'WGS:84' );
var dest = new Proj4js.Proj( 'albersEqualArea_Africa' );
And thereafter you can call
where pt is any object with x and y properties. So all coordinates gathered from the KML above can be run through the Proj4js.transform() method, in this case applying a custom Albers Equal Area projection (proj=aea) for the African continent.
Drawing geographic data on the canvas element
The results of the above can be easily rendered to HTML’s canvas element using JavaScript. I’m used to ActionScript’s Graphics class, and its assorted vector drawing methods. Of course, given the common ECMAScript heritage, the JS methods are nearly identical. So the projected linework is rendered thusly:
{
var c_canvas = document.getElementById( "map" );
var context = c_canvas.getContext("2d");
var multiFactor = Math.min( c_canvas.width / ( maxX - minX ), c_canvas.height / ( maxY - minY ) );
var x = 0; var y = 0;
for ( var featureNum in features ) {
for ( var ringNum in features[ featureNum ] ) {
var ring = features[ featureNum ][ ringNum ];
context.moveTo( ( ring[ 0 ][ 0 ] - minX ) * multiFactor, c_canvas.height - ( ring[ 0 ][ 1 ] - minY ) * multiFactor );
for ( var coordNum = 1; coordNum < ring.length; coordNum++ ) {
x = ( ring[ coordNum ][ 0 ] - minX ) * multiFactor;
y = c_canvas.height - ( ring[ coordNum ][ 1 ] - minY ) * multiFactor;
context.lineTo( x, y );
}
}
}
context.shadowOffsetX = context.shadowOffsetY = 3;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.5)';
context.fillStyle = "#0099cc";
context.fill();
context.shadowOffsetX = context.shadowOffsetY = context.shadowBlur = 0;
context.strokeStyle = "#fff";
context.stroke();
}
That method’s made a bit longer by that bitchin’ drop shadow (sorry Firefox, but you Konqueror folks should be cool). See above, or the P.O.C. on a separate page.
Up next
So far this has been pretty sweet: we’ve loaded coordinate data dynamically, projected it, and drawn it to the canvas element. But it hasn’t exactly lived up to the “interactive” part of the title. Next time I hope to get going on panning and zooming, feature mouse-over, and perhaps even attribute loading and thematic mapping.
