Monthly Archives: September 2012

PaperJS Directions

Image

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

PaperJS on Google Map

Image

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

PaperJS Minimum Convex Polygon

Image

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.

Example: Paper.js

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.

Example: Joyride Feature Tour

Image

I spent some time looking into various Javascript-based feature tour libraries today and stumbled across a help tour generator called Amberjack. After experimenting with it for a while and concluding that it was outdated and inflexible (*), I moved on to a jQuery-based kit called Joyride in order to create a feature tour. I made an example here, and I like it. Let me know if you have a favourite feature tour library.

* Note: I see that Amberjack has moved on to v2, which I haven’t tried yet.

Example: Highcharts JS

Image

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.