Using the BRC Atlas Library

Animating inset changes on UK map

No insets Channel Islands inset Northern Isles inset Channel Islands and Northern Isles inset

This example demonstrates how to switch beetween different pre-defined views of the UK and animate the transition between them.

For an explanation of the code that instantiates the map and displays the data, see example-1.html.

By default, the map control exposes a control to switch between different map transformations (views), if more than one is made available (accessed via an options cog icon in the bottom right of the map). That control switches between views without animation. We are going to override that control by providing our own options. So when we create the map, we set the 'transOptsControl' option to false to ensure those controls aren't available from the map.

var map = brcatlas.svgMap({
  selector: "#map",
  mapTypesKey: 'Standard hectad',
  transOptsControl: false
})

Radio buttons for the pre-defined UK transformation options are set up. The value of each option corresponds to the key of the pre-defined transformation options. Each of them binds a 'reDrawBoundaries' function to the change event.

<input type="radio" id="BI1" name="layout" value="BI1" checked onchange='reDrawBoundaries()'>
<label for="BI1">No insets</label>
<input type="radio" id="BI2" name="layout" value="BI2" onchange='reDrawBoundaries()'>
<label for="BI2">Channel Islands inset</label>
<input type="radio" id="BI3" name="layout" value="BI3" onchange='reDrawBoundaries()'>
<label for="BI3">Northern Isles inset</label>
<input type="radio" id="BI4" name="layout" value="BI4" onchange='reDrawBoundaries()'>
<label for="BI4">Channel Islands and Northern Isles inset</label>

Radio buttons for the pre-defined UK transformation options are set up. The value of each option corresponds to the key of the pre-defined transformation options. Each of them binds a 'reDrawBoundaries' function to the change event.

function reDrawBoundaries() {
  var code = d3.select('input[name="layout"]:checked').node().value
  map.animateTransChange(code)
}

The 'reDrawBoundaries' function gets the value of the checked radio button and calls the 'animateTransChange' method on the map object, passing the value (corresponding to the key of the transformation options object). (For convenience since we have already included the D3 library in the page, we are using D3 to get the checked radio button.)