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.

Step 1

Active

Inactive

Specify some data. A line feature is an array of data elements, each of which has a list of vertices.

Step 2

Active

Inactive

Create the line feature and set some styles on it.

Step 3

Active

Inactive

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.

Step 2-B

Active

Inactive

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.

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();

Step 3-B

Active

Inactive