Using markers with jGoBoard 2.0

The most significant addition in jGoBoard 2.0 is the ability to place markers on the board. This enables applications utilizing jGoBoard to display about 99,5 % of SGF files out there. Markers can also be used to indicate the last move, or a ko that is taking place.
Basic design decision in jGoBoard 2 was to create separate layers above the board:

  1. Top layer that contains the markers
  2. Middle layer that contains the stones
  3. Bottom layer that contains the shadows cast by stones

So how to create a marker? It’s very simple. Remember how we made the board object:

board = jgo_generateBoard($("#board"));

The board object that the function call returns has all the helpful methods in the JGOBoard class (see the beginning of jgoboard.js for documented prototype definitions), but it also replaces the stock set(coordinate,stone) method with a version that updates the board visuals, and adds a new mark(coordinate,marker) to the object. Using mark(…) function is straightforward:

var tengen = new JGOCoordinate(9,9);
board.mark(tengen, '#'); // place a square marker

Clearing a marker uses the same method, you just pass an empty string (“”) as the marker. The following standard markers are available:

  1. # creates a square
  2. * creates a cross (X)
  3. / creates a triangle
  4. 0 (zero) creates a circle

In addition, any non-recognized marker will be output as label, so 1-9, a-z, A-Z and longer strings can also be added.

Territory markers

In addition, there are special markers “.” (period) and “,” (comma) for territory, which also mark any stones below them dead (semi-transparent stone with no shadow). Note that marking a stone dead in such a way provides only a visual cue, it does not change the behavior of board class and its methods (such as getGroup(coordinate)) in any way.


Note that the markers are independent from underlying stones – if you place a black stone on a marked intersection, the color of the marker will change from black to white, but it does not disappear. Applications need to clear the markers when it’s needed.

There are also two special markers to make a coordinate show a semi-transparent black or white stone when user hovers a mouse above that coordinate: “<” and “>”. The next article in the series will show you how to use them, as well as introduce a nice helper function in the JGOBoard class – the each() iterator.