I played around with PaperJS/Google Maps API again today – this time calculating directions between pairs of random points. The directions result from Google is displayed by a PaperJS path, which includes color animation. Try it out.
edit: check out this Stack Overflow question which redirects to this project and provides a douche-y indictment for something this map isn’t intended to do (namely, allow interaction between the user and 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:
var proj = map.getProjection();
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);
I continued my obsession with PaperJS today. Ultimately, my goal is to produce sharp-looking, location-based visualization tools. So, how about a dynamic home-range (minimum convex polygon) visualization, derived from GPS locations, that can be overlaid on Google Maps? Sounds good, and here‘s what I came up with today. Next step is to get it talking in lat/long coords for Google Maps API.
I hesitantly stuck my toe into the waters of web vector graphics today, introducing myself to Paper.js. I can’t recommend playing with this enough. Intuitive. Fast. Free. Slick. Here’s my first creation, drawing heavily from the tutorials and documentation, which are great, by the way. Now, for my next trick I’ll somehow apply this to to something work related.
* Note: I see that Amberjack has moved on to v2, which I haven’t tried yet.
I was looking at alternatives to Google Chart Tools and came across Highcharts JS, which is my new favourite charting API. It’s extremely customizable, fast, and free for personal, academic, and non-profit use(*). You can also include buttons to print or save each chart as an image. The charts are also optionably zoomable through click and drag. Finally, Highcharts has been exhaustively documented, complete with JSFiddles for almost every feature. Check out my example Highcharts here.
* Note: I’m obligated to point out that Highcharts is not available for free for commercial use. See here for pricing.