Using the BRC Atlas Library

Show a UK distribution map from a CSV file

Include the required Javascript libraries and CSS in the page. We need the BRC Atlas JS libary, the associated CSS and the D3 library which is an external external dependency of the BRC Atlas library. In this example they are all included from CDNs. 

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-atlas/dist/brcatlas.umd.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-atlas/dist/brcatlas.umd.css"></script>

First we create a div element which will contain the SVG map. 

<div id="map"></div>

Create the atlas map with a minimal - i.e. default - configuration. The configuration option 'id' is required and this identifies the ID of the DOM element into which the SVG map will be inserted. In our case we created a div element with the ID 'map'. The option 'mapTypesKey' specifies the data accessor function which will be used to parse the data we will pass to the map. In our case we are specifying 'Standard hectad' which is an accessor supplied with the BRC Atlas.

The 'brcatlas.svgMap' returns an object which we assign a variable called 'map'. We use this later to load some data. 

var map = brcatlas.svgMap({
  id: "map",
  mapTypesKey: 'Standard hectad'
})

Use the 'setIdentfier' method of the map object to load a CSV file. The 'Standard hectad' data accessor function which we previously identified when we instantiated the map will process the file. 

  map.setIdentfier('./example-hectads-1.csv')

Finally we draw the map with the 'redrawMap' method. 

  map.redrawMap()

We have specified a CSV file in the same folder as the example html page. An extract is reproduced below. The 'Standard hectad' accessor expects a CSV file with five columns as show below:

  1. hectad: the grid reference of a hectad. The file can contain a mixture of hectad grid references for Britain, Ireland and the Channel Islands.
  2. colour: the html colour with which to display the hectad. Colours can be specified using standard HTML colour names (e.g. 'indianred') or hex codes (e.g. #CD5C5C).
  3. shape: permitted values are: circle, square, diamond, triangle-up, triangle-down.
  4. opacity: a number between 0 and 1.
  5. size: a number between 0 and 1.

In the example file, all the hectads are specified, with the same colour, shape, size and opacity, but you can specify these on a per/hectad basis. 

hectad,shape,colour,opacity,size
D22,circle,black,0.8,1
H05,circle,black,0.8,1
HU43,circle,black,0.8,1
NS97,circle,black,0.8,1
NT14,circle,black,0.8,1
WA60,circle,black,0.8,1
WV27,circle,black,0.8,1