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);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s