Tag Archives: projection

Extract & Project Data from Image

lightningEnvironment Canada has a cool mapping project: the Canadian Lightning Danger Map. The main issue I have with it is that the maps aren’t interactive (you can’t pan, zoom, etc.), so I set out to make them so.

My initial thought was simple: overlay the image on Google Maps tiles. Download or reference the images from the EC website, create and drape a Ground Overlay, and that would be it. The URLs for the most recent hour or so of maps can be constructed thusly:


where PAC = pacific (other regions are also available), and a timestamp, 201506142030: June 14, 2015 8:30pm. Tragically, the EC maps are projected, while Google Maps (and essentially every other web map tile scheme) are in Web Mercator – they will not simply overlay.

So, I needed to somehow project the data from the projected map into lat/long coordinates to plot on a web map. First step, figure out the extent of one of the maps, which I managed by georeferencing in ArcMap. Luckily, the maps for the Pacific Region appear to be in NAD83 BC Environment Albers (wkid:3005), so when georeferenced, it sits exactly straight on the screen. The metadata tells me the extent and pixel size for the image. The maps show lightning danger by colouring pixels red(ish). So, the plan is now: load the image, look at all the pixels in the image, and if it’s red, figure out the BC Albers coordinates by the pixel position relative to the image extent, convert to lat/long, and plot on a web map. Phew!

In the end, this isn’t as hard as it sounds. Loading and inspecting the image data is relatively straightforward using a canvas element’s getImageData method. This allows us to determine if a pixel is reddish. Unfortunately, this was where my master plan came crumbling down. I wanted to simply reference recent images from the EC server, but you cannot use getImageData across domains without EC’s server being CORS enabled, which it isn’t. For the purpose of this project, I’ve downloaded one image and placed it within my own domain so I can access the image data. By the pixel position, we can do some simple math to convert the position to BC Albers coordinates.

Figuring out an automated way to project coordinates was a serious stumbling block. I had never paid much attention to the ArcGIS JSAPI, but with it, you can create a (or use ESRI‘s) geometry service to project points from one coordinate system to another.

Yay! I’m all set. Here is my map which inspects an EC lightning danger map (on the right) and plots points in the correct position on a web mercator-based web map (on the left). Now you can navigate around the lightning danger shapes to your heart’s content! Next step, somehow convince EC to enable CORS on their server…


Draggable Tissot Indicatrix


Slow afternoon = time to play with Google Maps API. Lots of people bash Google and other slippy maps for using web mercator. Yes, it is distorted, but aren’t they all? Personally, I don’t have a serious problem with the distortion – I know it’s there. The “danger,” if there is one, is that some people don’t know mercator is distorted and go about their day thinking Greenland is the same size as South America (the horror). So, to help remind us all that mercator distorts area, here is a Google Maps API-based Tissot Indicatrix showing what happens to a 500km circle placed anywhere on the map (they are all 500km radius). And I do mean anywhere – you can drag the circles. Watch them change size, and get all funky at the poles.

UPDATE: this post has been featured in Google Maps Mania!