Add a line tutorial.
ADD
tutorials/lines/index.pug
+extends ../common/index.pug
+
+block mainTutorial
+ :markdown-it
+ # Tutorial - Lines
+ Add a line feature to a geospatial context. Lines can vary many
+ properties, including stroke width, color, opacity, and offset, line join
+ and cap, and closure.
+
+ First, create a map and a feature layer.
+
+ +codeblock('javascript', 1).
+ var map = geo.map({
+ node: "#map",
+ center: {x: 25, y: 20},
+ zoom: 5
+ });
+ // create a layer that supports drawing line features
+ var layer = map.createLayer('feature', {features: ['line']});
+
+ :markdown-it
+ Specify some data. A line feature is an array of data elements, each of
+ which has a list of vertices.
+
+ +codeblock('javascript', 2).
+ var lineData = [
+ [{x: 20, y: 10}, {x: 25, y: 10}],
+ [{x: 30, y: 10}, {x: 35, y: 12}, {x: 32, y: 15}],
+ [{x: 30, y: 20}, {x: 35, y: 22}, {x: 32, y: 25}],
+ [{x: 30, y: 30}, {x: 35, y: 32}, {x: 32, y: 35}, {x: 30, y: 30}],
+ [{x: 20, y: 20}, {x: 22, y: 20}, {x: 24, y: 20}, {x: 26, y: 20}],
+ [{x: 20, y: 30}, {x: 25, y: 32}, {x: 22, y: 35}, {x: 20, y: 35}]
+ ];
+
+ :markdown-it
+ Create the line feature and set some styles on it.
+
+ +codeblock('javascript', 3).
+ line = layer.createFeature('line')
+ // set the data to our example data
+ .data(lineData)
+ // add some styles
+ .style({
+ // use a function for determining if the line should be closed based
+ // on where it is in our list of data.
+ closed: function (item, itemIndex) {
+ return itemIndex === 1 || itemIndex === 3 || itemIndex === 5;
+ },
+ strokeColor: 'black',
+ strokeWidth: 2
+ });
+ // draw the feature
+ line.draw();
+ +codeblock_test('map has a feature layer with six lines', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.featureLayer',
+ 'map.layers()[0].features()[0] instanceof geo.lineFeature',
+ 'map.layers()[0].features()[0].data().length === 6'
+ ])
+
+ :markdown-it
+ Specify some more complex data. Our data elements are now objects with
+ various properties, which will require ``line`` and ``position`` functions
+ for the line feature to access.
+
+ +codeblock('javascript', 4, 1, false, 'Step 2-B').
+ var lineData = [{
+ coord: [[20, 10], [25, 10]]
+ }, {
+ coord: [[30, 10], [35, 12], [32, 15]],
+ closed: true
+ }, {
+ coord: [[30, 20], [35, 22], [32, 25]],
+ strokeColor: 'blue',
+ strokeWidth: 5
+ }, {
+ coord: [[30, 30], [35, 32], [32, 35], [30, 30]],
+ closed: true
+ }, {
+ coord: [
+ {x: 20, y: 20, width: 20},
+ {x: 22, y: 20, width: 5},
+ {x: 24, y: 20, width: 2},
+ {x: 26, y: 20, width: 2}
+ ]
+ }, {
+ coord: [[20, 30], [25, 32], [22, 35], [20, 35]],
+ strokeWidth: 10,
+ lineJoin: 'bevel',
+ closed: true
+ }];
+
+ :markdown-it
+ Create the line feature and specify functions to access the data and set
+ styles. Our style functions are more complex, as they get information from
+ the line data items.
+
+ +codeblock('javascript', 5, undefined, true, 'Step 3-B').
+ line = layer.createFeature('line')
+ // set the data to our example data
+ .data(lineData)
+ // get the vertex list from the coord element of the line item
+ .line(function (item, itemIdx) {
+ return item.coord;
+ })
+ // the position can be an object or an array of [x, y]
+ .position(function (vertex, vertexIndex, item, itemIndex) {
+ return vertex.x === undefined ? {x: vertex[0], y: vertex[1]} : vertex;
+ })
+ // for styles, use the value specified by the line item if present
+ .style({
+ closed: function (item, itemIndex) {
+ return item.closed;
+ },
+ lineJoin: function (vertex, vertexIndex, item, itemIndex) {
+ return item.lineJoin;
+ },
+ strokeColor: function (vertex, vertexIndex, item, itemIndex) {
+ return item.strokeColor === undefined ? 'black' : item.strokeColor;
+ },
+ // stroke width might change by vertex
+ strokeWidth: function (vertex, vertexIndex, item, itemIndex) {
+ return vertex.width === undefined ? (
+ item.strokeWidth === undefined ? 1 : item.strokeWidth) : vertex.width;
+ }
+ });
+ // draw the feature
+ line.draw();
+ +codeblock_test('map has a feature layer with six lines', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.featureLayer',
+ 'map.layers()[0].features()[0] instanceof geo.lineFeature',
+ 'map.layers()[0].features()[0].data().length === 6'
+ ])

ADD
tutorials/lines/thumb.jpg
tutorials/lines/thumb.jpg
Binary files /dev/null and b/tutorials/lines/thumb.jpg differ

ADD
tutorials/lines/tutorial.json
+{
+ "title": "Lines",
+ "hideNavbar": true,
+ "level": 0,
+ "about": {
+ "text": "Place lines with different styles in a geospatial context."
+ }
+}

Add a line tutorial.