PaperJS on Google Map

I thought I had HTML5 (pixel coordinates) on top of Google Maps (lat/long coordinates) figured out. I hadn’t, but I think I’m getting closer with my newest experiment. Basically, it loads a Google Map, and places an HTML5 canvas over top (which is why you can’t do anything directly to the map). Then, my trusty PaperJS-powered random circle moves from place to place dropping HTML5 circles and path lines. Each time it drops a circle and draws a line, the circle’s pixel coordinates are converted to lat/long and sent through to the Google Maps reverse geocoder service.

edit: of course, now that I actually Googled this topic, I see it was answered on Stack Exchange over two years ago. But, it’s more fun if you do it yourself, right? Plus, the people on Stack Exchange are mean.

Here’s the relevant code:

//map projection
var proj = map.getProjection();

//map extent 
var bounds = map.getBounds();

//extent corner coords (lat,long) 
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();

//extent corner pixel coords (x,y)
var neWorldXY = proj.fromLatLngToPoint(ne); 
var swWorldXY = proj.fromLatLngToPoint(sw);

//location pixel coords, scaled by zoom level (x,y) 
var curPixelX = currentPoint.position.x / Math.pow(2,map.getZoom()); 
var curPixelY = currentPoint.position.y / Math.pow(2,map.getZoom());

//location world coords (x,y) 
var curWorldX = curPixelX + swWorldXY.x; 
var curWorldY = curPixelY + neWorldXY.y;
var curWorldPoint = new google.maps.Point(curWorldX,curWorldY);

//location coords (lat/long) 
var curLatLng = proj.fromPointToLatLng(curWorldPoint);

Google Maps API/HTML5 Interaction

Although this map looks simple, I have a feeling it will be a game-changer for me (actually, it is pretty simple once you figure it out). The map itself is fairly basic: the entire world (256 x 256 pixels). You can’t interact with it directly (ie. no pan, zoom, etc.) because it’s underneath an HTML5 canvas. Everything else is made with HTML5 and KineticJS: longitude lines, circle marker, and textbox.

The real beauty of this map is the ability to pass HTML5 events (in this case, “dragstart” and “dragend” ) to the Google Map. Specifically, you can send pixel coordinates of where you drag objects to (“clientX” and “clientY”) and convert them to Lat/Long coordinates on the map.

circle.on('dragend', function(event)
        {
            var proj = map.getProjection();
            var point = new google.maps.Point(event.clientX, event.clientY);
            var location = proj.fromPointToLatLng(point); // lat/long coordinates
        });

That’s the meat and potatoes of it. I added a geocoder to figure out the name of the state/province of the coordinates, and, why not, some KineticJS animations as an example of actually using the HTML objects.

Note: this example requires an HTML5 compliant browser – that means no Internet Explorer or you’ll blow its mind.

Country Quiz

How well do you know your countries? Find out here. This web app chooses a random country from an XML list, uses a reverse geocoding service to map the central point, finds the matching country name in a Google Fusion Table, and maps its boundary. Click the point when you’ve decided, and watch as the map changes to the usual road map.