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…


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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