Rendering a GeoJSON layer in Leaflet

The addition of a GeoJSON layer showing a Garmin activity polyline completes my example of using Leaflet with Bing, Google, and OSM base layers.

Static GeoJSON Leaflet map with Google, Bing and OSM base layers.

Static GeoJSON Leaflet map with Google, Bing and OSM base layers.

I did a lot of work to get to this point. Some tasks were completely unrelated to the demo, like converting my website to a single-page Backbone application. Other tasks were behind the scenes, like writing a utility to convert Garmin FIT files into GeoJSON. A great deal of my time was spent recreating the Garmin-style map controls to switch between Google, Bing, and OSM. Eventually, I want to add the Google bicycle path layer and fix a bug I found today on the menu controls, but that can wait.

Once I was ready to add the polyline and custom pin icons, coding was a breeze. All that needed to be done was to extend L.Icon for the custom pin icons and drop the polyline GeoJSON into the L.geoJson function as shown below:

    var ActivityMapLayerView = Backbone.View.extend({

        initialize: function(args) {
            var CustomIcon = L.Icon.extend({options: {
                iconSize: [33, 50],
                iconAnchor: [16, 49]
            this.startIcon = new CustomIcon({iconUrl: 'media/pin_start.png'});
            this.endIcon = new CustomIcon({iconUrl: 'media/pin_end.png'});

        render: function() {
            var props = this.model.get('properties');
                [props.get('minLat'), props.get('minLon')],
                [props.get('maxLat'), props.get('maxLon')]
            var style = {
                color: '#FF0000',
                weight: 3,
                opacity: 0.6
            L.geoJson(this.model.toJSON(), {style: style}).addTo(;
            var polyline = this.model.get('geometry').get('coordinates');
            var startPoint = polyline[0];
            var endPoint = polyline[polyline.length - 1];
            L.marker([startPoint[1], startPoint[0]], {icon: this.startIcon}).addTo(;
            L.marker([endPoint[1], endPoint[0]], {icon: this.endIcon}).addTo(;


The GeoJSON is passed into L.geoJson along with style properties to control the color, weight, and opacity of the polyline. That is all it took!

Now it is time to being exploring the plethora of Leaflet plugins supporting interactive maps. I’m looking forward to getting started.


Penn State Geospatial Revolution MOOC on Coursera


This week I completed the 5-week MOOC, Maps and the Geospatial Revolution, taught by Dr. Anthony Robinson of Penn State on the site Coursera. Over 47,000 students enrolled and over 35,000 students participated, making it the largest GIS course ever taught. I found the course to be a good overall survey of the world of GIS (geographic information systems). I recommend it to anybody wanting to learn about GIS or who wants to see what it’s like to take a MOOC (massive open online course). Below is my brief overview which only skims the surface of what we covered.

In the first week, Dr. Robinson illustrated how geospatial technology has revolutionized the way we navigate, make decisions using geography, and share stories using geographic references, like geotagging and geocoding.

The second week covered reference maps and thematic maps. We saw thematic maps showcasing geographic observations, including choropleth maps, dot mapping, proportional symbol mapping, and isoline maps. The concept of spatial autocorrelation  was introduced (the measure of similarity of observations that are close to one another), as well as Tobler’s first law of geography:

Everything is related to everything else, but near things are more related than distant things.

A cool project highlighted in week two was Ushahidi, a non-profit organization that built a platform for volunteered geographic information in disaster areas. Ushahidi was instrumental in relief efforts in Haiti where online maps were very poor at the time of the earthquake.

Week three introduced GNSS (global navigation satellite systems) ranging from America’s GPS, GLONASS in Russia, to the E.U. Galileo system. We also covered the vector and raster spatial data types, as well as remote sensing, LIDAR, spatial metadata, and ArcGIS Online.

Week four discussed map overlays, first introduced in Ian McHarg’s 1969 book, Design with Nature.  A video explained how Dr. John Snow’s map of the cholera outbreak in 1854, Soho, London, was used to trace the cholera outbreak to a bad well. That was the first major use of cluster detection. We learned that spatial correlation is not causation, and we learned about the MAUP (modifiable areal unit problem), where scale effects how geospatial observations are visualized. We covered how important normalization is to avoid skewing maps by population density. To normalize data you calculate the rates of occurrence as a proportion of the overall population.

Finally, week five covered the art of map making, which starts by clearly understanding the audience, target format, and specific purpose of the map. It’s difficult to give a concise summary, so I’ll just say the lesson taught that it is important to use the right thematic map for the type of data (nominal, ordinal, or interval/ratio data). On the topic of color, we covered sequential colors, diverging colors, and qualitative colors. We then explored data classifications: equal interval classification, quantile classification, and natural break classification.

The final assignment was a map of your choosing. I chose to use to running and cycling data that I extracted to create a surface analysis map. The data has some serious flaws (a triathlon at Clinton Lake skewed my data), but it was adequate for my proposes.


I’m already looking for other MOOCs of interest to me that are offered by Corsera.

GIS Degree or Self Study?

Today I presented a slide deck to HR on why a Masters in GIST is a smart decision. It sounds likely that I can get funding, but should I do it?

First of all, reimbursement is capped $250 per credit hour below the rate of the program I’m considering, and you must get an A to be reimbursed. The money obstacle might be overcome if I apply to several programs. Surely I can find a package to get an effective rate near what my employer will pay? The grades should not be a problem either.

I’m worried most about time and quality of life. I got my MBA from University of Denver in my late twenties going to school in the evenings, so I know how much work it can be. That was along time ago. Now I’m 53 and have 14 and 16 year old daughters at home. Do I really want to spend their last few years at home working on another masters degree? It feels a little selfish. I should be looking for colleges for them, not me.

I’m really excited about the spatial stuff I’ve been doing at work, and I’ve enjoyed learning about GIS on my own, so I know that I would enjoy my classes. Still, it’s a tough decision.


Installing MapBox TileMill on Ubuntu


Preparing to Work with Satellite Imagery

Time to get out of my comfort zone. I’m a Java web developer, not a GIS imagery specialist, but when I saw the post Processing Landsat 8 Using Open-Source Tools by Charlie Loyd, I just had to give it a try. Charlie’s post is a step by step tutorial on how to manipulate Landsat 8 satellite images.

There are four prerequisites:

  1. GDAL, a low-level GIS toolkit
  2. libgeotiff, to work with geotags
  3. ImageMagick, an image processing package
  4. TileMill, an open-source mapmaking app from Mapbox

This post walks through the installation of these four tools.

1. Install GDAL

I followed this install-gdal script, except that I executed the commands individually so I knew what the script was doing.

$ sudo apt-get -y install g++
$ svn checkout gdal
$ cd gdal
$ ./configure
$ sudo make install
...long build process...
libtool: install: /home/smitchell/gdal/install-sh -c .libs/gdalbuildvrt /usr/local/bin/gdalbuildvrt
/bin/bash /home/smitchell/gdal/libtool --mode=install  /home/smitchell/gdal/install-sh -c gdal-config-inst /usr/local/bin/gdal-config
libtool: install: /home/smitchell/gdal/install-sh -c gdal-config-inst /usr/local/bin/gdal-config
make[1]: Leaving directory `/home/smitchell/gdal/apps'
for f in LICENSE.TXT data/*.* ; do /home/smitchell/gdal/install-sh -c -m 0644 $f /usr/local/share/gdal ; done
/bin/bash /home/smitchell/gdal/libtool --mode=finish --silent /usr/local/lib

After GDAL is installed you need to change your LD_LIBRARY_PATH. Edit $HOME/.bashrc and add the following line:


2. Install libgeotiff

Libgeotiff was the only tool that I found in the Ubuntu Software Center, although I wasn’t sure which one to install since I’m running 64-bit Ubuntu. I went with libgeotiff2.


3. Install Imagemagick

Install Imagemagick and imagick:

$ sudo apt-get install imagemagick php5-imagick

4. Install TileMill.

Finally, we are ready to install TileMill.

sudo add-apt-repository ppa:developmentseed/mapbox
sudo apt-get update
sudo apt-get install tilemill libmapnik nodejs

Once installed TileMill can be started from the launcher.


That’s it, you’re done. TileMill should now start as shown below:


For my next post, I will grab images of interest to me and follow along with Charlie’s tutorial.