Tutorial - Isolines

Given data on a mesh or grid, plot isolines (lines of constant value).

First, we create a base map tile layer for reference and load some grid data. The data is grid data describing geospatial point elevation, a record of z value -9999 means there is no land data. Load the data asynchronously, and use a promise when ready.

Step 1
Active
Inactive

Once the data is loaded, create an isoline feature with default options.

Step 2
Active
Inactive

The spacing between isolines can be set in a variety of ways. By default, a "nice" interval is chosen to have approximately count lines, where count equals 15. This number can be changed, but if it is only changed a little, the same isolines will still be shown since they round to even values.

Step 3-A
Active
Inactive

If the count is changed enough, a different number of isolines will be shown.

Step 3-B
Active
Inactive

You can disable rounding to even values. In this case, there specified count will be exact. Since the isoline values are no longer round numbers, it is useful to limit the precision shown on the text labels.

Step 3-C
Active
Inactive

You can specify a spacing in the units used for the isoline values. In this example, this is the altitude in meters.

Step 3-D
Active
Inactive

You can also specify exactly which values should have isolines and which ones should be more significant.

Step 3-E
Active
Inactive

The label text spacing can be changed so that there or more or fewer labels per line. The spacing is the minimum distance between labels in pixels. Labels are placed uniformly along an isoline, so the labels could be further apart to make them even.

Step 4-A
Active
Inactive

Labels can be added to any of the isolines and have different spacing per line.

Step 4-B
Active
Inactive

The label text can be modified to include the units. The data has altitude in meters.

Step 5-A
Active
Inactive

Although the data has altitude in meters, it can be converted to different units. For instance, we can convert it to statute (U.S. Survey) feet and change the label text appropriately.

Step 5-B
Active
Inactive

By defaults, labels are shown so that the top of the text is toward higher values. The geo.isolineFeature.rotationFunction can be used to choose other orientations. The available modes are:

  • higher: the top of the label text is toward higher values. This is the default.
  • lower: the top of the label text is toward lower values.
  • map: the top of the label text is toward the top of the map.
  • screen: the top of the label text is toward the top of the display screen.

The map has to be rotated to see the difference between screen and map modes.

Step 6
Active
Inactive