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'
      ])