Tag Archives: canvas

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…


Oliver & Clement Look Alike

oliver_clementFor some reason, I have a hard time telling apart Joe Oliver and Tony Clement, so I made this thing. Use the slider to switch between Oliver and Clement.

(Photos from: here and here)

Edit: doesn’t seem to work on Android browser. Worked on desktop Firefox and Chrome.

Interactive Pixel Masking: NDVI

ndviI’ve been thinking a lot recently about how to visualize NIR (Near Infrared) photography, and here’s where I’m at.

In brief, NIR photos (combined with a regular visual light photo) allow us to calculate an index of plant health, or more technically, the ratio of absorbed photosynthetically available radiation. Healthy plants reflect almost all infrared radiation and absorb a high percentage of visually red radiation – this is why healthy plants appear green (they absorb red and blue and reflect green light).

The most often used formula for interpreting NIR photos is NDVI (Normalized Difference Vegetation Index). NDVI values range from -1 to +1. I calculated NDVI in ArcGIS, exporting to 8-bit unsigned PNG format (in retrospect, I should have exported to a higher bit value in order to retain the original NDVI values), which resulted in values ranging from 0 – 255.

The end objective was to calculate percent coverage of vegetation in photographs, whether healthy or not. My preliminary website seems to do an adequate job, although it surely needs refinement. The jQuery UI slider controls which pixels to mask as “vegetation.” The HTML5 Canvas elements take care of the rest, manipulating the NDVI image at the pixel level, coloring those above the threshold level (set in the slider) red.

Original NIR and RGB images found here: Image and Visual Representation Group