Layer user interface

[townxelliot]

This implements the UI piece for layer loading.

Caveat: the layer colours are hard-coded at the moment, and can't be changed by the user. They are also hex colour codes, with the opacity being set in the SVG's <style> element (produced from a template under fragments/).

When the colour picker is added, if rgba values are produced by the picker (and we want to use them), it will be necessary to decompose those values for the purposes of generating the <style> element: we need to set colour and opacity separately in the SVG so that it functions standalone.

Also note that the circles of colour shown in the layer load panel don't have opacity applied. It might be worth doing that as part of the colour picker implementation, e.g. if you can set an rgba value for the layer colour from the picker, you can just use that colour as is in the panel, while splitting hex colour and opacity out for the SVG stylesheet.

[aliceh75]

I see that layerloader.js doesn't use the convention of prefixing jQuery variables with a '$'. I think it's ok because it's a self contained file that only deals with UI, and everything in it uses jQuery in that way.

The last time when we decided to mark the variable with a '$' prefix, it was manipulating the SVG element, and there it made sense to make the distinction clear as other parts of the system used d3 to manipulate the SVG.

I'm happy to merge as-is, but thought I'd check with you what you prefer.

[aliceh75]

Ok, merging now for Willow to get a chance to test this before next week

[townxelliot]

I'm not a big fan of the "$" prefix, but happy to use it when necessary. Like you said, as it was contained in this file, I thought it wasn't necessary, but we should perhaps be consistent. I can add a commit to make this change.