One of the aspects of the AusStage mapping project that I’m working on is the inclusion of what we are calling trajectory information. Essentially these are lines that link placemarks and provide an indicator of where an organisation has performed over time. In the current implementation the earliest line is pure red, and the latest line is pure yellow. To achieve this I needed to develop two functions that build a colour gradient. The first was for a total number of lines less than 255 and the other was for a total number of lines more than 255.

The first function is called getScaledColour and is outlined below:

function getScaledColour(index, maximum) {

  // determine starting colour components
  var redHex   = "FF";
  var greenHex = null;
  var blueHex  = "00";

  // define values for formula
  var startGreen = 0;
  var endGreen   = 255;

  // calculate the green value
  var greenVal = startGreen + ((endGreen - startGreen) * (index / (maximum -1)));

  // round the green value to an integer
  greenVal = Math.round(greenVal);

  // convert from decimal to hexadecimal
  greenHex = greenVal.toString(16);

  // pad the hexadecimal number if required
  if(greenHex.length < 2) {
    greenHex = "0" + greenHex;
  }

  // return the final colour
  return "#" + redHex + greenHex + blueHex;
}

There are probably a few too many brackets on line 13 but I prefer to be explicit about precedence in a formula like this. The function assumes that the colours are to be used as part of an array of values. Therefore index is a zero based integer and maximum is the number of steps between pure red and pure yellow. This works because the transition from red to yellow is possible by only incrementing the green component of the colour when using the RGB colour model.

The second method is useful when there are more than 255 lines to colour. Although I’ll be the first to admit it is a bit of a hack. The first part of the code is a function that generates an array of the 255 possible colours and looks like this:

function getColourGradient() {

  var redHex = "FF";
  var greenHex;
  var blueHex = "00";
  var colourGradient = new Array(256);

  for(i = 1; i <= 255; i++) {
    // get the yellow colour
    greenHex = i.toString(16);

    if(greenHex.length < 2) {
      greenHex = "0" + greenHex;
    }

    // add the new colour to the gradient
    colourGradient[i] = "#" + redHex + greenHex + blueHex;
  }

  return colourGradient;
}

To then use the array the following JavaScript is used

// use array if over 255 colours
index = Math.round((255 / trajectoryPoints.length) * i);

if(index == 0) {
  index = 1;
}

lineColour = colourGradient[index];

In the limited testing that we’ve done so far these functions work well. An example of map with trajectory lines is outlined below: