Tutorial - Grid Data

First, let's create our map and add a base map and a feature layer.

xxxxxxxxxx
 
var map = geo.map({
  node: '#map',
  center: { x: -77, y: 43 },
  zoom: 10
});
map.createLayer('osm');
var layer = map.createLayer('feature', {features: ['grid']});
Step 1
Active
Inactive

Create a grid feature with a small amount of data. The grid width and height are the number of vertices in the grid. The grid data is for the elements, so it will have one less row and one less column than the vertex information.

xxxxxxxxxx
 
var grid = layer.createFeature('grid', {
    grid: {
      gridWidth: 8,
      gridHeight: 7,
      x0: -77.35,
      y0: 42.76,
      dx: 0.1,
      dy: 0.08,
      stepped: false
    }
  }).data([
    0, 1, 2, 3, 2, 1, 0,
    1, 2, 3, 4, 3, 2, 1,
    2, 3, 4, 5, 4, 3, 2,
    3, 4, 5, 6, 5, 4, 3,
    2, 3, 4, 5, 6, 5, 4,
    1, 2, 3, 4, 5, 6, 5
  ]).draw();
Step 2
Active
Inactive

Data can have missing values, which will result in gaps in the rendered grid.

xxxxxxxxxx
 
grid
  .data([
    0, 1, 2, 3, 2, 1, 0,
    1, 2, 3, 4, 3, 2, 1,
    2, 3, 4, 5, 4, undefined, 2,
    3, 4, 5, 6, 5, 4, 3,
    2, 3, 4, 5, 6, 5, 4,
    null, 2, 3, 4, 5, 6, 5
  ])
  .draw();
Step 3
Active
Inactive

Similar to the contour feature, we can change the color range and whether colors are in discrete steps.

xxxxxxxxxx
 
grid
  .grid({
    colorRange: ['rgb(224,130,20)', 'rgb(254,224,182)', 'rgb(178,171,210)', 'rgb(84,39,136)'],
    stepped: true,
  })
  .draw();
Step 4
Active
Inactive