Map – Properties

With geomap, it is possible to display a two-dimensional map with various visualization options. The map projection can easily be changed.

Give it nothing but the data and this is what you get: ocean, land, coastlines and the graticule, in Equal Earth. Everything else is off until you ask for it.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null
});

graticule draws the network of meridians and parallels; its spacing is controlled by step.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  graticule: {
    visible: true,
    strokeColor: '#eeffdd',
    strokeWidth: .5,
    strokeOpacity: 0.8,
    step: [15, 15],
    layer: 6,
    dash: 2
  }
});

ocean is interpreted as an area with fill color, stroke color, and opacity.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  ocean: {
    fillColor: '#6688aa',
    strokeColor: '#002244'
  }
});

The landmass land likewise represents an area.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
    land: {
      fillColor: '#aaccbb'
    }
});

The coastlines are displayed as curves.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  coast: {
    visible: true,
    strokeColor: '#ff2299',
    strokeWidth: 1.4
  }
});

With countries country borders are displayed, and if selectMode is enabled, the countries can also be clicked.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  countries: {
    visible: true,
    strokeColor: '#002244',
    strokeWidth: .4,
    fillColor: '#cceeff'
  },
  selectMode: 'multiple',
  highlightStyle: {
    fillColor: '#ffee33',
    fillOpacity: 0.6,
    strokeColor: '#eeaa00',
    strokeWidth: 1
  },
  smallCountryRadius: .5
});

capitals are displayed as small circles.

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  capitals: {
    visible: true,
    fillColor: '#cf9b3f',
    strokeColor: '#071018',
    strokeWidth: 0.5,
    size: 0.62,
    layer: 6,
    lod: 'still'
  }
});

The following elements can be included: the equator (equator), both tropics (tropics), tropic of Cancer (tropicnorth), tropic of Capricorn (tropicsouth), both polar circles (polarcircles), arctic Circle (arcticcircle), antarctic Circle (antarcticcircle), prime meridian (primemeridian), 180° meridian (antimeridian) as idealized date line (dateline), nominal 15° meridians (timezones), day–night terminator (terminator), and small circle around the subsolar point (subsolar).

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null
});

var equator = map.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.equator();
  }, {
    strokeColor: '#bb99cc',
    strokeWidth: 1.8,
    layer: 7
  });

var tropics = map.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.tropics();
  }, {
    strokeColor: '#ffee99',
    strokeWidth: 1,
    dash: 3,
    strokeOpacity: 0.8,
    layer: 7
  });

var primemeridian = map.addGeoLayer('lines',
  function () {
    return JXG.Geography.features.primemeridian();
  }, {
    strokeColor: '#99ee66',
    strokeWidth: 2,
    dash: 0,
    strokeOpacity: 0.8,
    layer: 7
  });

Distortions can be visualized with Tissot's indicatrix. Strictly, the indicatrix is an infinitely small circle; the circles drawn here are small but finite, which is close enough to show what the projection does..

var map = board.create('geomap', [[0.2, 0.2], [11.6, 5.7]], {
  data: DATA,
  tabindex: null,
  distortion: {
    mode: 'tissot',
    step: 20,
    radius: 5,
    latMax: 60,
    strokeColor: '#aabbff',
    strokeWidth: 1,
    strokeOpacity: .5,
    fillColor: '#ccddff',
    fillOpacity: 0.1
  }
});