Demonstration of Leaflet with D3 for slippy mapping

This demonstration uses Leaflet to provide slipply map capability together with D3 to handle the display of atlas maps on custom SVG-based layer. The data are served to the client's browser as CSV files and the generation of the geometry from the grid references occurs on the client-side through a Javascript library.

Taxa

The demonstration taxa Urtica dioica and Plantago major have been chosen because they are among the most widespread species. If performance is satisfactory for these species, then it will be more than adequate for all the others. Cochlearia danica was chosen to illustrate a meaningful distribution at monad level.

No taxon Urtica dioica Plantago major Cochlearia danica

Resolution

The resolution (hectad, tetrad or monad) changes based on zoom level but you can select a particular resolution here to see how they affec the responsiveness of the map.

Auto Hectad Tetrad Monad

Colours

The graduated colours are based on a frequency attribute associated with each grid ref in the CSV files, but in this demo, no code has been put in place to scale the colours depending on the range of the frequency attribute, it merely demonstrates that we can handle colouring of 'dots' according to attributes.

Use graduated colours Symbol outline

Symbol colours: Min , Mid , Max Reset

Symbol opacity: Basemap opacity:

Symbols

I've provided the ability to switch between a few different symobls (all are implemented as SVG 'paths'). Performance is affected by the number of points required to create each symbol. So circles, for example, take longer to render than squares or triangles. In this demo you can switch the symbol for the whole layer only, but we can render different symbols for different dots in a single layer depending on a layer attribute. There are a lot of different symbols we could create.

Squares Circles Diamond Triangle up Triangle down Crossed square

Map layers

I think that the ability to adjust opacity of both the basemap and layer and the dot maps is something we should put into the final product. Here you have to type the opacity values or use the 'spinner' controls but the final product could use sliders.

The OpenStreetMap (OSM) layer is a good default, but other free base layers are available and I have included a number from the 'Stamen' provider (see layer control) by way of demonstration. I have also made a few WMS layers available - here from the British Geological Survey. Leaflet support for WMS layers is limited, so we would have to coded things like legends ourselves. Therefore we need to think carefully about what WMS layers to provide.