Add a contour map tutorial
MODIFY
tutorials/choropleth/index.pug
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();

ADD
tutorials/contour/index.pug
+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();
+ });

ADD
tutorials/contour/tutorial.json
+{
+ "title": "Contour map",
+ "hideNavbar": true,
+ "level": 1,
+ "tutorialCss": [],
+ "tutorialJs": [],
+ "about": {
+ "text": "Add a contour map"
+ }
+}

Add a contour map tutorial