Working with layers

The JavaScript code

Here are the default layers of the JSXGraph geometry elements. High values mean "laying on top".

    layer : {
        point : 9,
        arc   : 8,
        line  : 7,
        circle: 6, 
        curve : 5,
        polygon: 4,
        sector: 3,
        angle : 2,
        grid  : 1,
        image : 0 
    }

Here we change the layers of points and lines:

// Reordering of the layers:
JXG.Options.layer['point'] = 7;
JXG.Options.layer['line'] = 9;

// A simple construction, consisting of three points , two lines, one circle.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);

In the example above the layers have to be changed BEFORE the initialization of the board. Otherwise the reordering has to be done in the copy of the options specific to the board:

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});

// Reordering of the layers:
brd.options.layer['point'] = 7;
brd.options.layer['line'] = 9;

var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);