Tag Archives: javascript

Cesium the weekend!


Looked into Cesium, the WebGL JavaScript library for creating 3D globes, and 2.5D and 2D maps, today.

So far, so good. The tutorials are great, and documentation relatively well populated. Installation was painless. The major quirks so far have been due to funny interactions between Windows Chrome and DirectX, which I won’t pretend to understand, but apparently it makes it so outlineWidth is not supported, which means all polygon outlines are set permanently to 1px. Not a huge deal, but I’m guessing I’ll run into more technical stumbling blocks as I delve further in.

Here’s a quick example, which draws a 10 degree grid over the Earth, and places an LSU beacon above Tiger Stadium.

Note: must use WebGL-enabled browser, which means Chrome or newer version of Firefox/IE/etc. You can check if your browser is compatible here.


Multiplayer Hangman


Still on my Firebase kick. Here is a live, multiplayer game of hangman I came up with. There are unlimited guesses, and really no amazing payoff to winning – it was more of a personal exercise in JavaScript/jQuery/Firebase than anything else.

The cool thing about it is you can see live changes other players are making. Since there will hardly ever be two people playing at once, you can convince yourself that it’s live by opening two browser windows to the page. Enjoy.

NIR Camera Test

nir_testsI got an exciting new toy yesterday – a digital camera modified to capture near infrared (NIR), in addition to visible light. As I mentioned in a previous post, the combination of NIR and visible light allows for vegetation extraction on a pixel-by-pixel basis, after applying the NDVI formula. See an example of a raw NIR photo I took this morning, compared to the processed NDVI image, here. It’s not perfect, but it shows promise.

As a side note, my example makes use of the TwentyTwenty javascript widget, which makes sliding image overlays extremely easy.

Example: Highcharts JS


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.

Mapstraction: Swap Map Providers


I discovered Mapstraction today. It provides a streamlined Javascript framework for switching between other web mapping APIs (like Google Maps, Bing Maps, CloudMade, OpenLayers, Yahoo, etc.), which would be cool if I could figure out why anyone would want to use something other than Google Maps. I’ll probably understand when Google starts charging for each map load. Mapstraction also claims to work with GeoCommons and Nokia maps (among others), although I never did get them to work properly (if you do, let me know). I did get OpenSpace maps to work, only to find that they only cover Great Britain, which I’m not particularly interested in (sorry).

My example, above, is nothing new – you can find a more complete example, by the Mapstraction crew, here.

Random Movement, Dynamic Symbology


Here‘s another visualization I’ve been working on. Lots of wildlife biology these days deals with how animals interact with the human world around them. Here in the forests of western Alberta, that generally means either forestry activity (cutblocks) or oil infrastructure (wells, pipelines, seismic lines, facilities, etc.). This is a proof-of-concept map, showing a randomized individual (maybe a bear…?) moving amongst randomly placed points (maybe oil wells…?). As the individual moves closer to a point, the point size increases.

The tricky part was managing the distance calculations. It was bogging down in the attempt to calculate the distance to every point on the map (500 of them) each time a new point was drawn. To overcome this limitation, I set it so for every 25 new locations it would find all of the points within 50km and remember them – usually it was about 50 points. Then, for each newly drawn point, it would cycle through only those 50 nearest points and adjust their symbology to be inversely related to distance.

Note: works fine in Chrome, not so well in Firefox, and don’t even bother trying it in Internet Explorer.

GPS Derived Associations


This map is an extension of last’s month post, Visualize GPS Data in Google Maps. It takes advantage of Google Chart Tools to populate a live chart showing current and mean distance between (in this case, randomly generated) bears. Mean distance between individuals can be used as an index of association (i.e. bears that spend a lot of time near each other are likely associating in some way). Question for anyone reading: how can I add a border for each bar in the chart?

Note: sometimes the chart doesn’t load on the first try. If this happens, refresh your page.