I’ve often wondered why anyone would use OpenStreetMap (OSM) rather than Google Maps. The Google Maps API has so many bells and whistles and it’s so easy to use. Well, as I’ve been playing PaperJS recently, I wanted to explore some of its raster capabilities. Google has a static maps API, so I thought I’d load one of those images and play with its pixels. But wait! Apparently, Google Maps does not allow Cross Origin Resource Sharing (CORS), and according to the W3C wiki, they are not planning on enabling this any time soon (*). OpenStreetMap is CORS-enabled, though, so score one for open source. My example loads an OSM tile, converts it to a PaperJS raster and resamples it to a lower resolution.
*Note: apparently the Google Street View Panorama library is CORS-enabled, as displayed in this example (not my work).
This afternoon I made a web tool for figuring out the parameters needed to apply an affine transformation to an image using PaperJS. You would do this if you had an image that you wanted to display on a web map (like a Google Map), but it wasn’t in the Mercator Web Projection. To use an affine transformation you need to fill 6 parameters: scale X, scale Y, shear X, shear Y, translate X, and translate Y. By changing those parameters, you can approximately stretch and size most images over most maps (if needed, you could also rotate the entire image using PaperJS). You can try it yourself with my example. In the current zoom level, the parameters that I find work pretty well are::
scale X: 0.7
scale Y: 0.7
shear X: 0.22
shear Y: -0.25
translate X: 26
translate Y: 126
Here‘s the start of my vision for a web map of FRI‘s offices. Next steps include finding a current floor plan (the Foothills Model Forest became the Foothills Research institute in 2007), expanding contact information, and adding email links.
*note: the code for this map was almost entirely stolen from this KineticJS lab.