Add a contour map tutorial

tutorials/choropleth/index.pug

@@ -7,7 +7,7 @@ block mainTutorial
 
   +codeblock('javascript', 1, undefined, true).
     var map = geo.map({
-      node: "#map",
+      node: '#map',
       center: { x: -109, y: 41 },
       zoom: 5
     });
@@ -51,7 +51,7 @@ block mainTutorial
   +codeblock('javascript', 3, 2, false).
     var polulations = (states.features.map(function (state) { return state.properties.population }));
     var domain = [Math.min.apply(null, polulations), Math.max.apply(null, polulations)];
-    var colorRange = ["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(35,139,69)"];
+    var colorRange = ['rgb(237,248,233)', 'rgb(186,228,179)', 'rgb(116,196,118)', 'rgb(35,139,69)'];
 
     var scale = d3.scale.quantize().domain(domain).range(colorRange);
 
@@ -79,7 +79,7 @@ block mainTutorial
         };
       }));
 
-    choropleth.choropleth({ colorRange: ["rgb(237,248,233)", "rgb(186,228,179)", "rgb(116,196,118)", "rgb(35,139,69)"] });
+    choropleth.choropleth({ colorRange: ['rgb(237,248,233)', 'rgb(186,228,179)', 'rgb(116,196,118)', 'rgb(35,139,69)'] });
     // get choropleth options and set the geoId accessor
     choropleth.choropleth().accessors.geoId = function (state) { return state.properties.name };
     choropleth.draw();

tutorials/contour/index.pug

@@ -0,0 +1,69 @@
+extends ../common/index.pug
+
+block mainTutorial
+  :markdown-it
+    # Tutorial - Contour map
+    First, let's create our map and add a base map and a feature layer.
+
+  +codeblock('javascript', 1).
+    var map = geo.map({
+      node: '#map',
+      center: { x: -157.965, y: 21.482 },
+      zoom: 10
+    });
+    map.createLayer('osm');
+    var layer = map.createLayer('feature');
+
+  :markdown-it
+    Then load some data. 
+    The data is grid data describing geospatial point elevation, a record of z value -9999 means it's sea level. 
+    Since the data is relatively big, intead of adding inline data, we load asynchronously, and use [promise chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) to chain up the following steps.
+  +codeblock('javascript', 2, 1).
+    var promise = Promise.resolve($.ajax({
+      url: '../../data/oahu.json'
+    }));
+
+  :markdown-it
+    Once the data is loaded. We create the contour feature with default color range. *min: 0* means only showing data with elevation.
+
+  +codeblock('javascript', 3, 2, true).
+    var contour = null;
+    promise.then(function (data) {
+      contour = layer.createFeature('contour')
+        .data(data.position)
+        .style({
+          opacity: 0.75
+        })
+        .contour({
+          gridWidth: data.gridWidth,
+          gridHeight: data.gridHeight,
+          min: 0
+        })
+        .position(function (d) { return { x: d.x, y: d.y, z: d.z }; })
+        .draw();
+    });
+
+  :markdown-it
+    We could use a non-linear scale.
+
+  +codeblock('javascript', 4, 3).
+    promise.then(function (data) {
+      contour
+        .contour({
+          rangeValues: [0, 25, 50, 75, 100, 125, 250, 500, 750, 2000]
+        })
+        .draw();
+      console.log(contour.contour());
+    });
+
+  :markdown-it
+    Or, we could use an custom color range.
+
+  +codeblock('javascript', 10, 3, false, 'Step 4-B').
+    promise.then(function (data) {
+      contour
+        .contour({
+          colorRange: ['rgb(224,130,20)', 'rgb(253,184,99)', 'rgb(254,224,182)', 'rgb(216,218,235)', 'rgb(178,171,210)', 'rgb(128,115,172)', 'rgb(84,39,136)']
+        })
+        .draw();
+    });

tutorials/contour/tutorial.json

@@ -0,0 +1,10 @@
+{
+  "title": "Contour map",
+  "hideNavbar": true,
+  "level": 1,
+  "tutorialCss": [],
+  "tutorialJs": [],
+  "about": {
+    "text": "Add a contour map"
+  }
+}