Skip to main content
This site and Lume package is currently under development and may not be stable.
Open Innovations
OI Lume Viz

SVG map

A simple map to show GeoJSON. It can have place labels and markers.

Usage

To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'):

{% comp 'oi.map.svg', { "config": config } %}{% endcomp %}

where config is replaced by an object that contains some or all of these variables:

  • data - (optional) Either a reference to a CSV file in the Lume site or an array of rows with named attributes. If used you will need to match this to the GeoJSON properties using key.
  • columns - As with many of the visualisation types you can optionally add virtual columns.
  • geojson - (required):
    • key - The GeoJSON property to use to match with the data.
    • data - Either a reference to a GeoJSON file in the Lume site or inline GeoJSON.
  • colours - Define some visualisation-specific named colours.
  • width - An optional minimum width (e.g. 400px) for each panel. Panels may then be arranged by however many columns will fit in the page width.
  • projection - Set the map projection:
    • name - One of aitoff, equirectangular, gall-peters, orthographic (for orthographic you can also set the lat/lon for the projection centre), web-mercator (default), or osgb.
  • bounds - Set a longitude/latitude bounds of the map:
    • lat - The latitude bounds:
      • min - The minimum latitude
      • max - The maximum latitude
    • lon - The longitude bounds:
      • min - The minimum longitude
      • max - The maximum longitude
  • layers - An array of map layers in the order they will be layered. Each layer has a property type which can be one of:
    • background - Set a GeoJSON background:
      • geojson - Either a reference to a GeoJSON file in the Lume site or inline GeoJSON
      • colour - The colour for the background polygons.
    • data - Add the data layer to the map:
      • key - The title of the column to use to match IDs with the GeoJSON.
      • value - The title of the column that will be used to get the colour of a polygon. If the value is a number you should also set the scale.
      • tooltip - Either a string, template string, or the column heading to use to build a tooltip.
      • scale - A colour scale to use to colour the polygons based on the value.
      • min - Used with scale and max to define the colour scale.
      • max - Used with scale and min to define the colour scale.
    • graticule - Add a graticule:
      • step - An array defining the latitude and longitude spacing of the graticule in degrees.
    • labels - Add a place label layer:
      • places - An array of place markers that sit above the interactive layer. A place can be defined with the following properties:
        • name - the label to use for the place label
        • latitude - set the latitude of the label (can be omitted if it is a UK place we know about)
        • longitude - set the longitude of the label (can be omitted if it is a UK place we know about)
        • text-anchor - set to either start, middle, or end to anchor the text
        • colour - the colour of the label (default is black)
        • border - the colour of the label border (default is white)
        • font-size - manually set the font size (if omitted it will be scaled to the population where known)
        • font-weight - manually set the font weight (e.g. to "bold")
        • font-family - manually set the font family
    • markers - An array of markers
      • markers - A marker can be defined with the following properties:
        • icon - Can be either be a string (one of default, geo, geo-alt, asterisk, pin, balloon, balloon-heart, chat-square) or an object with the form:
          • svg - The SVG string to use
          • size - e.g. [40,40]
          • anchor - e.g. [20,0]
        • latitude - set the latitude of the marker
        • longitude - set the longitude of the marker
        • colour - the colour of the label (default is black)
        • tooltip - the content of an optional tooltip
  • padding - Set the padding between the data layer and the map edges. The value is given in the pixel scale of the generated map (which may not be the same as the pixels the map takes up on screen).
  • legend - Define the legend.
  • options - Set some options:
    • fillOpacity - The fill-opacity of the polygons
  • tools - Add some useful interactive tools:
    • filter - A search tool to filter hexes:
      • label - The title of the column to use as the displayed name for a hex in the search results.
      • max - The maximum number of results to show.
    • slider - A slider tool that will change the colouring of the hexes:
      • columns - An array of column titles to use to change the colouring of the hexes.
  • attribution - Add a line of attribution text under the visualisation.

Examples

  1. A basic map
  2. Colour a map - defined colours
  3. Colour a map - using a defined scale
  4. Set opacity of the data layer
  5. Add a legend
  6. Custom tooltips
  7. Place labels
  8. Map markers
  9. Add a background
  10. Set padding
  11. Add a graticule
  12. Set layer order
  13. Filter map
  14. Display a line
  15. Projection: Aitoff
  16. Projection: Equirectangular
  17. Projection: Gall-Peters
  18. Projection: Orthographic
  19. Projection: Orthographic zoomed
  20. Projection: Web-Mercator
  21. Projection: Web-Mercator zoomed
  22. Projection: OS Grid

1. A basic map§

Embeddable version

The polygons are defined by the geojson→data key which loads a GeoJSON file (you may want to put your GeoJSON through our GeoJSON Minify tool first).

The geojson→key attribute is used to match a property in geojson→data→features[]→properties with the key attribute in the data rows e.g. we try to match the code attribute in the data (say "E08000016") with the LAD21CD key in the GeoJSON. The value key is the name of a column in the data that defines the colour to use for the polygon. A tooltip can also be specified as the name of a column in the data.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    name: Barnsley
  - code: E08000032
    name: Bradford
  - code: E08000033
    name: Calderdale
  - code: E07000163
    name: Craven
  - code: E07000165
    name: Harrogate
  - code: E08000034
    name: Kirklees
  - code: E08000035
    name: Leeds
  - code: E07000169
    name: Selby
  - code: E08000036
    name: Wakefield
  - code: E06000014
    name: York
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: name
JSON 
{
	"data": [{
			"code": "E08000016",
			"name": "Barnsley"
		},{
			"code": "E08000032",
			"name": "Bradford"
		},{
			"code": "E08000033",
			"name": "Calderdale"
		},{
			"code": "E07000163",
			"name": "Craven"
		},{
			"code": "E07000165",
			"name": "Harrogate"
		},{
			"code": "E08000034",
			"name": "Kirklees"
		},{
			"code": "E08000035",
			"name": "Leeds"
		},{
			"code": "E07000169",
			"name": "Selby"
		},{
			"code": "E08000036",
			"name": "Wakefield"
		},{
			"code": "E06000014",
			"name": "York"
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "name"
}

2. Colour a map - defined colours§

Embeddable version

This example is mostly the same as the previous one but we've added a colour attribute to each item in data and we set value to that name so that each area gets a specific colour.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    name: Barnsley
    colour: '#E6007C'
  - code: E08000032
    name: Bradford
    colour: '#FF6700'
  - code: E08000033
    name: Calderdale
    colour: '#0DBC37'
  - code: E07000163
    name: Craven
    colour: '#178CFF'
  - code: E07000165
    name: Harrogate
    colour: '#2f529f'
  - code: E08000034
    name: Kirklees
    colour: '#722EA5'
  - code: E08000035
    name: Leeds
    colour: '#F9BC26'
  - code: E07000169
    name: Selby
    colour: '#1DD3A7'
  - code: E08000036
    name: Wakefield
    colour: '#EF3AAB'
  - code: E06000014
    name: York
    colour: '#F92626'
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: name
value: colour
JSON 
{
	"data": [{
			"code": "E08000016",
			"name": "Barnsley",
			"colour": "#E6007C"
		},{
			"code": "E08000032",
			"name": "Bradford",
			"colour": "#FF6700"
		},{
			"code": "E08000033",
			"name": "Calderdale",
			"colour": "#0DBC37"
		},{
			"code": "E07000163",
			"name": "Craven",
			"colour": "#178CFF"
		},{
			"code": "E07000165",
			"name": "Harrogate",
			"colour": "#2f529f"
		},{
			"code": "E08000034",
			"name": "Kirklees",
			"colour": "#722EA5"
		},{
			"code": "E08000035",
			"name": "Leeds",
			"colour": "#F9BC26"
		},{
			"code": "E07000169",
			"name": "Selby",
			"colour": "#1DD3A7"
		},{
			"code": "E08000036",
			"name": "Wakefield",
			"colour": "#EF3AAB"
		},{
			"code": "E06000014",
			"name": "York",
			"colour": "#F92626"
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "name",
	"value": "colour"
}

3. Colour a map - using a defined scale§

Embeddable version

In this example we'll use a numeric column (Aged 15 years and under) in the data to set the value to use along with scale to colour each area. The scale can be given as a known string (e.g. "Viridis") or a CSS-style gradient (e.g. "#ffe837 0%, #7d7d77 50%, #042450 100%"). The min and max for the scale will be calculated from the data unless provided.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - LAD21CD: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - LAD21CD: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - LAD21CD: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - LAD21CD: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - LAD21CD: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - LAD21CD: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - LAD21CD: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - LAD21CD: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - LAD21CD: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - LAD21CD: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: LAD21CD
value: Aged 15 years and under
scale: Viridis
tooltip: LAD21NM
JSON 
{
	"data": [{
			"LAD21CD": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"LAD21CD": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"LAD21CD": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"LAD21CD": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"LAD21CD": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"LAD21CD": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"LAD21CD": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"LAD21CD": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"LAD21CD": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"LAD21CD": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "LAD21CD",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"tooltip": "LAD21NM"
}

4. Set opacity of the data layer§

Embeddable version

In this example we will set the fillOpacity of the data layer to 0.5 (the default value is 1).

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - LAD21CD: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - LAD21CD: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - LAD21CD: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - LAD21CD: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - LAD21CD: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - LAD21CD: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - LAD21CD: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - LAD21CD: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - LAD21CD: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - LAD21CD: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: LAD21CD
value: Aged 15 years and under
scale: Viridis
tooltip: LAD21NM
options:
  fillOpacity: 0.5
JSON 
{
	"data": [{
			"LAD21CD": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"LAD21CD": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"LAD21CD": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"LAD21CD": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"LAD21CD": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"LAD21CD": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"LAD21CD": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"LAD21CD": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"LAD21CD": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"LAD21CD": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "LAD21CD",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"tooltip": "LAD21NM",
	"options": {
		"fillOpacity": 0.5
	}
}

5. Add a legend§

Embeddable version

Sometimes you need a legend with defined levels. To make this we first manually set min and max (otherwise they are calculated from the data and won't necessarily match our levels). We position (e.g. top, top left, top right, bottom, bottom right, bottom left) and add items to the legend. Each item has a value and label although the label can be empty.

160k
80k
0
BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - LAD21CD: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
    Aged 16 to 24 years: 22101
    Aged 25 to 34 years: 32949
    Aged 35 to 49 years: 44857
    Aged 50 to 64 years: 52285
    Aged 65 years and over: 47598
  - LAD21CD: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
    Aged 16 to 24 years: 63079
    Aged 25 to 34 years: 72559
    Aged 35 to 49 years: 107702
    Aged 50 to 64 years: 95233
    Aged 65 years and over: 83001
  - LAD21CD: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
    Aged 16 to 24 years: 19163
    Aged 25 to 34 years: 24920
    Aged 35 to 49 years: 39472
    Aged 50 to 64 years: 43769
    Aged 65 years and over: 39310
  - LAD21CD: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
    Aged 16 to 24 years: 4324
    Aged 25 to 34 years: 5353
    Aged 35 to 49 years: 9303
    Aged 50 to 64 years: 13675
    Aged 65 years and over: 15629
  - LAD21CD: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
    Aged 16 to 24 years: 14198
    Aged 25 to 34 years: 16587
    Aged 35 to 49 years: 29713
    Aged 50 to 64 years: 36781
    Aged 65 years and over: 38026
  - LAD21CD: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
    Aged 16 to 24 years: 47172
    Aged 25 to 34 years: 54869
    Aged 35 to 49 years: 83410
    Aged 50 to 64 years: 84011
    Aged 65 years and over: 76813
  - LAD21CD: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
    Aged 16 to 24 years: 113371
    Aged 25 to 34 years: 121267
    Aged 35 to 49 years: 157374
    Aged 50 to 64 years: 139693
    Aged 65 years and over: 126766
  - LAD21CD: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
    Aged 16 to 24 years: 7619
    Aged 25 to 34 years: 11398
    Aged 35 to 49 years: 17234
    Aged 50 to 64 years: 20409
    Aged 65 years and over: 18772
  - LAD21CD: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
    Aged 16 to 24 years: 31934
    Aged 25 to 34 years: 48974
    Aged 35 to 49 years: 67141
    Aged 50 to 64 years: 72877
    Aged 65 years and over: 66607
  - LAD21CD: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
    Aged 16 to 24 years: 33671
    Aged 25 to 34 years: 25845
    Aged 35 to 49 years: 36356
    Aged 50 to 64 years: 37478
    Aged 65 years and over: 38733
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: LAD21CD
tooltip: LAD21NM
value: Aged 15 years and under
scale: Viridis
min: 0
max: 160000
legend:
  position: top right
  items:
    - value: 160000
      label: 160k
    - value: 120000
      label: ''
    - value: 80000
      label: 80k
    - value: 40000
      label: ''
    - value: 0
      label: '0'
JSON 
{
	"data": [{
			"LAD21CD": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782,
			"Aged 16 to 24 years": 22101,
			"Aged 25 to 34 years": 32949,
			"Aged 35 to 49 years": 44857,
			"Aged 50 to 64 years": 52285,
			"Aged 65 years and over": 47598
		},{
			"LAD21CD": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837,
			"Aged 16 to 24 years": 63079,
			"Aged 25 to 34 years": 72559,
			"Aged 35 to 49 years": 107702,
			"Aged 50 to 64 years": 95233,
			"Aged 65 years and over": 83001
		},{
			"LAD21CD": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997,
			"Aged 16 to 24 years": 19163,
			"Aged 25 to 34 years": 24920,
			"Aged 35 to 49 years": 39472,
			"Aged 50 to 64 years": 43769,
			"Aged 65 years and over": 39310
		},{
			"LAD21CD": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643,
			"Aged 16 to 24 years": 4324,
			"Aged 25 to 34 years": 5353,
			"Aged 35 to 49 years": 9303,
			"Aged 50 to 64 years": 13675,
			"Aged 65 years and over": 15629
		},{
			"LAD21CD": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362,
			"Aged 16 to 24 years": 14198,
			"Aged 25 to 34 years": 16587,
			"Aged 35 to 49 years": 29713,
			"Aged 50 to 64 years": 36781,
			"Aged 65 years and over": 38026
		},{
			"LAD21CD": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941,
			"Aged 16 to 24 years": 47172,
			"Aged 25 to 34 years": 54869,
			"Aged 35 to 49 years": 83410,
			"Aged 50 to 64 years": 84011,
			"Aged 65 years and over": 76813
		},{
			"LAD21CD": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483,
			"Aged 16 to 24 years": 113371,
			"Aged 25 to 34 years": 121267,
			"Aged 35 to 49 years": 157374,
			"Aged 50 to 64 years": 139693,
			"Aged 65 years and over": 126766
		},{
			"LAD21CD": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556,
			"Aged 16 to 24 years": 7619,
			"Aged 25 to 34 years": 11398,
			"Aged 35 to 49 years": 17234,
			"Aged 50 to 64 years": 20409,
			"Aged 65 years and over": 18772
		},{
			"LAD21CD": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832,
			"Aged 16 to 24 years": 31934,
			"Aged 25 to 34 years": 48974,
			"Aged 35 to 49 years": 67141,
			"Aged 50 to 64 years": 72877,
			"Aged 65 years and over": 66607
		},{
			"LAD21CD": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738,
			"Aged 16 to 24 years": 33671,
			"Aged 25 to 34 years": 25845,
			"Aged 35 to 49 years": 36356,
			"Aged 50 to 64 years": 37478,
			"Aged 65 years and over": 38733
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "LAD21CD",
	"tooltip": "LAD21NM",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"min": 0,
	"max": 160000,
	"legend": {
		"position": "top right",
		"items": [{
				"value": 160000,
				"label": "160k"
			},{
				"value": 120000,
				"label": ""
			},{
				"value": 80000,
				"label": "80k"
			},{
				"value": 40000,
				"label": ""
			},{
				"value": 0,
				"label": "0"
			}]
	}
}

6. Custom tooltips§

Embeddable version

We will create a virtual column with the name "Tooltip label" to define the tooltip text. Virtual columns must have a name and template which can include existing columns from the data e.g. "{{ LAD21NM }}: {{ Aged 15 years and under }}" would use the LAD21CD and Aged 15 years and under values from the data. Replacement values (e.g. "{{ Aged 15 years and under }}") can use the following filters:

  • toFixed(n) - to limit a value to n decimal places
  • multiply(n) - to multiply a value by n
  • toLocaleString() - to use the locale's (of the server) preferred formatting for a value
  • colourScale(scale,min,max) - get a colour to, for example, use as a background style
  • contrastColour - get a contrasting colour (black or white)
Barnsley
Aged 15 and under: 44,782Bradford
Aged 15 and under: 124,837Calderdale
Aged 15 and under: 39,997Craven
Aged 15 and under: 8,643Harrogate
Aged 15 and under: 27,362Kirklees
Aged 15 and under: 86,941Leeds
Aged 15 and under: 153,483Selby
Aged 15 and under: 16,556Wakefield
Aged 15 and under: 65,832York
Aged 15 and under: 30,738

This example was made with config:

YAML 
data:
  - LAD21CD: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - LAD21CD: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - LAD21CD: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - LAD21CD: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - LAD21CD: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - LAD21CD: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - LAD21CD: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - LAD21CD: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - LAD21CD: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - LAD21CD: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
columns:
  - name: Tooltip label
    template: >-
      {{ LAD21NM }}<br />Aged 15 and under: {{ Aged 15 years and under |
      toLocaleString() }}
key: LAD21CD
tooltip: Tooltip label
value: colour
JSON 
{
	"data": [{
			"LAD21CD": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"LAD21CD": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"LAD21CD": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"LAD21CD": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"LAD21CD": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"LAD21CD": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"LAD21CD": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"LAD21CD": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"LAD21CD": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"LAD21CD": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"columns": [{
			"name": "Tooltip label",
			"template": "{{ LAD21NM }}<br />Aged 15 and under: {{ Aged 15 years and under | toLocaleString() }}"
		}],
	"key": "LAD21CD",
	"tooltip": "Tooltip label",
	"value": "colour"
}

7. Place labels§

Embeddable version

We can add places to a layer above the interactive map. A place can be defined with the following properties:

  • name - the label to use for the place label
  • latitude - set the latitude of the label (can be omitted if it is a UK place we know about)
  • longitude - set the longitude of the label (can be omitted if it is a UK place we know about)
  • text-anchor - set to either start, middle, or end to anchor the text
  • colour - the colour of the label (default is black)
  • border - the colour of the label border (default is white)
  • font-size - manually set the font size (if omitted it will be scaled to the population where known)
  • font-weight - manually set the font weight (e.g. to "bold")
  • font-family - manually set the font family
BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYorkBradfordLeedsHalifaxHarrogateHuddersfieldSettleSkiptonWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    name: Barnsley
  - code: E08000032
    name: Bradford
  - code: E08000033
    name: Calderdale
  - code: E07000163
    name: Craven
  - code: E07000165
    name: Harrogate
  - code: E08000034
    name: Kirklees
  - code: E08000035
    name: Leeds
  - code: E07000169
    name: Selby
  - code: E08000036
    name: Wakefield
  - code: E06000014
    name: York
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: name
places:
  - name: Bradford
    text-anchor: end
    font-size: 24
  - name: Leeds
    font-size: 32
    font-weight: bold
    font-family: 'Times, serif'
    colour: '#722EA5'
    border: '#1DD3A7'
  - name: Halifax
  - name: Harrogate
  - name: Huddersfield
  - name: Settle
    latitude: 54.0693
    longitude: -2.279
  - name: Skipton
    latitude: 53.9619
    longitude: -2.0174
  - name: Wakefield
    text-anchor: start
    latitude: 53.68331
    longitude: -1.49768
  - name: York
JSON 
{
	"data": [{
			"code": "E08000016",
			"name": "Barnsley"
		},{
			"code": "E08000032",
			"name": "Bradford"
		},{
			"code": "E08000033",
			"name": "Calderdale"
		},{
			"code": "E07000163",
			"name": "Craven"
		},{
			"code": "E07000165",
			"name": "Harrogate"
		},{
			"code": "E08000034",
			"name": "Kirklees"
		},{
			"code": "E08000035",
			"name": "Leeds"
		},{
			"code": "E07000169",
			"name": "Selby"
		},{
			"code": "E08000036",
			"name": "Wakefield"
		},{
			"code": "E06000014",
			"name": "York"
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "name",
	"places": [{
			"name": "Bradford",
			"text-anchor": "end",
			"font-size": 24
		},{
			"name": "Leeds",
			"font-size": 32,
			"font-weight": "bold",
			"font-family": "Times, serif",
			"colour": "#722EA5",
			"border": "#1DD3A7"
		},{
			"name": "Halifax"
		},{
			"name": "Harrogate"
		},{
			"name": "Huddersfield"
		},{
			"name": "Settle",
			"latitude": 54.0693,
			"longitude": -2.279
		},{
			"name": "Skipton",
			"latitude": 53.9619,
			"longitude": -2.0174
		},{
			"name": "Wakefield",
			"text-anchor": "start",
			"latitude": 53.68331,
			"longitude": -1.49768
		},{
			"name": "York"
		}]
}

8. Map markers§

Embeddable version

We can add markers to a layer above the interactive map. A marker can be defined with the following properties:

  • icon - can be either:
    • string - one of default, geo, geo-alt, asterisk, pin, balloon, balloon-heart, chat-square
    • object - define an icon using the following properties
      • svg - the SVG string to use
      • size - e.g. [40,40]
      • anchor - e.g. [20,0]
  • latitude - set the latitude of the marker
  • longitude - set the longitude of the marker
  • colour - the colour of the label (default is black)
  • tooltip - the content of an optional tooltip

Be aware that markers sit above the interactive layer so may block some interactivity.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYorkBarnsley markerBradford markerHuddersfield markerHalifax markerLeeds markerWakefield markerYork marker

This example was made with config:

YAML 
data:
  - code: E08000016
    name: Barnsley
  - code: E08000032
    name: Bradford
  - code: E08000033
    name: Calderdale
  - code: E07000163
    name: Craven
  - code: E07000165
    name: Harrogate
  - code: E08000034
    name: Kirklees
  - code: E08000035
    name: Leeds
  - code: E07000169
    name: Selby
  - code: E08000036
    name: Wakefield
  - code: E06000014
    name: York
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: name
markers:
  - icon:
      svg: >-
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
        fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16"><path
        d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337
        1.32-.842 1.68-1.858.282L8
        12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854
        1.337-1.32.842-1.68L6.331.864 8 0z"/><path d="M4 11.794V16l4-1 4
        1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/></svg>
      size:
        - 30
        - 30
      anchor:
        - 15
        - 15
    tooltip: Barnsley marker
    latitude: 53.5529
    longitude: -1.4825
    colour: '#EF3AAB'
  - icon: geo
    tooltip: Bradford marker
    latitude: 53.7944
    longitude: -1.7519
    colour: '#2254F4'
  - icon: balloon
    tooltip: Huddersfield marker
    latitude: 53.6463
    longitude: -1.7853
    colour: '#0DBC37'
  - icon: chat-square
    tooltip: Halifax marker
    latitude: 53.7211
    longitude: -1.8622
    colour: '#722EA5'
  - icon: geo-alt
    tooltip: Leeds marker
    latitude: 53.7968
    longitude: -1.5439
    colour: '#F9BC26'
  - icon: pin
    tooltip: Wakefield marker
    latitude: 53.68331
    longitude: -1.49768
    colour: '#D60303'
  - icon: asterisk
    tooltip: York marker
    latitude: 53.9601
    longitude: -1.0808
  - latitude: 53.9617
    longitude: -2.0201
JSON 
{
	"data": [{
			"code": "E08000016",
			"name": "Barnsley"
		},{
			"code": "E08000032",
			"name": "Bradford"
		},{
			"code": "E08000033",
			"name": "Calderdale"
		},{
			"code": "E07000163",
			"name": "Craven"
		},{
			"code": "E07000165",
			"name": "Harrogate"
		},{
			"code": "E08000034",
			"name": "Kirklees"
		},{
			"code": "E08000035",
			"name": "Leeds"
		},{
			"code": "E07000169",
			"name": "Selby"
		},{
			"code": "E08000036",
			"name": "Wakefield"
		},{
			"code": "E06000014",
			"name": "York"
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "name",
	"markers": [{
			"icon": {
				"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-award-fill\" viewBox=\"0 0 16 16\"><path d=\"m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z\"/><path d=\"M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z\"/></svg>",
				"size": [
					30,
					30
				],
				"anchor": [
					15,
					15
				]
			},
			"tooltip": "Barnsley marker",
			"latitude": 53.5529,
			"longitude": -1.4825,
			"colour": "#EF3AAB"
		},{
			"icon": "geo",
			"tooltip": "Bradford marker",
			"latitude": 53.7944,
			"longitude": -1.7519,
			"colour": "#2254F4"
		},{
			"icon": "balloon",
			"tooltip": "Huddersfield marker",
			"latitude": 53.6463,
			"longitude": -1.7853,
			"colour": "#0DBC37"
		},{
			"icon": "chat-square",
			"tooltip": "Halifax marker",
			"latitude": 53.7211,
			"longitude": -1.8622,
			"colour": "#722EA5"
		},{
			"icon": "geo-alt",
			"tooltip": "Leeds marker",
			"latitude": 53.7968,
			"longitude": -1.5439,
			"colour": "#F9BC26"
		},{
			"icon": "pin",
			"tooltip": "Wakefield marker",
			"latitude": 53.68331,
			"longitude": -1.49768,
			"colour": "#D60303"
		},{
			"icon": "asterisk",
			"tooltip": "York marker",
			"latitude": 53.9601,
			"longitude": -1.0808
		},{
			"latitude": 53.9617,
			"longitude": -2.0201
		}]
}

9. Add a background§

Embeddable version

A non-interactive background can be added as a layer behind the interactive map. It should contain GeoJSON data. It can have its colour set. We can also adjust the map bounds if we'd like the view to cover an area smaller/larger than the bounds of the data. Note that the exact bounding of the map will also depend on the aspect ratio that the map ends up on the end-user's display.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: LAD21NM
value: Aged 15 years and under
scale: Viridis
background:
  geojson: geojson.england
  colour: silver
bounds:
  lat:
    min: 53.3
    max: 54.45
  lon:
    min: -3
    max: -0.3
JSON 
{
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "LAD21NM",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"background": {
		"geojson": "geojson.england",
		"colour": "silver"
	},
	"bounds": {
		"lat": {
			"min": 53.3,
			"max": 54.45
		},
		"lon": {
			"min": -3,
			"max": -0.3
		}
	}
}

10. Set padding§

Embeddable version

You can set the padding between the data layer and the map edges. The value is given in the pixel scale of the generated map (which may not be the same as the pixels the map takes up on screen).

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: LAD21NM
value: Aged 15 years and under
scale: Viridis
background:
  geojson: geojson.england
  colour: silver
padding: 50
JSON 
{
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "LAD21NM",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"background": {
		"geojson": "geojson.england",
		"colour": "silver"
	},
	"padding": 50
}

11. Add a graticule§

Embeddable version

We can also add a graticule to the map which will be placed above the background/data layers and below the label/markers.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: LAD21NM
value: Aged 15 years and under
scale: Viridis
background:
  geojson: geojson.england
  colour: silver
graticule:
  step:
    - 0.5
    - 0.5
bounds:
  lat:
    min: 53.3
    max: 54.45
  lon:
    min: -3
    max: -0.3
JSON 
{
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "LAD21NM",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"background": {
		"geojson": "geojson.england",
		"colour": "silver"
	},
	"graticule": {
		"step": [
			0.5,
			0.5
		]
	},
	"bounds": {
		"lat": {
			"min": 53.3,
			"max": 54.45
		},
		"lon": {
			"min": -3,
			"max": -0.3
		}
	}
}

12. Set layer order§

Embeddable version

The default ordering of the layers used to make the map is (bottom to top): background → data → graticule → labels → markers. We can choose to limit or re-order the layers explicitly by creating an array of layers ordered from bottom to top e.g. let's order the layers with the graticule under the data layer.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
bounds:
  lat:
    min: 53.3
    max: 54.45
  lon:
    min: -3
    max: -0.3
layers:
  - type: background
    geojson: geojson.england
    colour: silver
  - type: graticule
    step:
      - 0.5
      - 0.5
  - type: data
    key: code
    value: Aged 15 years and under
    tooltip: LAD21NM
    scale: Viridis
test: true
JSON 
{
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"bounds": {
		"lat": {
			"min": 53.3,
			"max": 54.45
		},
		"lon": {
			"min": -3,
			"max": -0.3
		}
	},
	"layers": [{
			"type": "background",
			"geojson": "geojson.england",
			"colour": "silver"
		},{
			"type": "graticule",
			"step": [
				0.5,
				0.5
			]
		},{
			"type": "data",
			"key": "code",
			"value": "Aged 15 years and under",
			"tooltip": "LAD21NM",
			"scale": "Viridis"
		}],
	"test": true
}

13. Filter map§

Embeddable version

Note that this feature is a progressive enhancement and will only function if Javascript is enabled.

We can add an interactive filter to our svg map. We can set tools → filter → label to the name of a column in the data - this defines the text used in the filter drop-down list. We can set the maximum number of results to show in the filter drop down using tools → filter → max.

BarnsleyBradfordCalderdaleCravenHarrogateKirkleesLeedsSelbyWakefieldYork

This example was made with config:

YAML 
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
geojson:
  key: LAD21CD
  data: geojson.leeds_city_region
key: code
tooltip: LAD21NM
value: Aged 15 years and under
scale: Viridis
background:
  geojson: geojson.england
  colour: silver
bounds:
  lat:
    min: 53.3
    max: 54.45
  lon:
    min: -3
    max: -0.3
tools:
  filter:
    label: filterLabel
columns:
  - name: filterLabel
    template: '{{ LAD21NM }} ({{ code }})'
JSON 
{
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"geojson": {
		"key": "LAD21CD",
		"data": "geojson.leeds_city_region"
	},
	"key": "code",
	"tooltip": "LAD21NM",
	"value": "Aged 15 years and under",
	"scale": "Viridis",
	"background": {
		"geojson": "geojson.england",
		"colour": "silver"
	},
	"bounds": {
		"lat": {
			"min": 53.3,
			"max": 54.45
		},
		"lon": {
			"min": -3,
			"max": -0.3
		}
	},
	"tools": {
		"filter": {
			"label": "filterLabel"
		}
	},
	"columns": [{
			"name": "filterLabel",
			"template": "{{ LAD21NM }} ({{ code }})"
		}]
}

14. Display a line§

Embeddable version

So far we've been showing polygons but we can also show lines. Here's the route of a bike trip along the Atlantic Coast of Europe.

17 Jun 2017
Distance: 120.4 km (74.8 miles)
Total distance: 120.4 km (74.8 miles)
Elevation gain: 1097 m
Total elevation gain: 1097 m18 Jun 2017
Distance: 121.1 km (75.2 miles)
Total distance: 241.5 km (150.0 miles)
Elevation gain: 1267 m
Total elevation gain: 2364 m19 Jun 2017
Distance: 102.9 km (63.9 miles)
Total distance: 344.4 km (214.0 miles)
Elevation gain: 1109 m
Total elevation gain: 3473 m20 Jun 2017
Distance: 62.5 km (38.8 miles)
Total distance: 406.9 km (252.8 miles)
Elevation gain: 1476 m
Total elevation gain: 4949 m21 Jun 2017
Distance: 89.7 km (55.7 miles)
Total distance: 496.6 km (308.5 miles)
Elevation gain: 436 m
Total elevation gain: 5385 m22 Jun 2017
Distance: 120.2 km (74.7 miles)
Total distance: 616.8 km (383.2 miles)
Elevation gain: 1100 m
Total elevation gain: 6485 m23 Jun 2017
Distance: 30.0 km (18.6 miles)
Total distance: 646.8 km (401.8 miles)
Elevation gain: 263 m
Total elevation gain: 6748 m24 Jun 2017
Distance: 95.1 km (59.1 miles)
Total distance: 741.9 km (460.9 miles)
Elevation gain: 798 m
Total elevation gain: 7546 m25 Jun 2017
Distance: 65.8 km (40.9 miles)
Total distance: 807.7 km (501.8 miles)
Elevation gain: 915 m
Total elevation gain: 8461 m26 Jun 2017
Distance: 80.5 km (50.0 miles)
Total distance: 888.2 km (551.8 miles)
Elevation gain: 791 m
Total elevation gain: 9252 m27 Jun 2017
Distance: 3.7 km (2.3 miles)
Total distance: 964.1 km (599.0 miles)
Elevation gain: 44 m
Total elevation gain: 9960 m28 Jun 2017
Distance: ()
Total distance: ()
Elevation gain:
Total elevation gain: 29 Jun 2017
Distance: 107.3 km (66.7 miles)
Total distance: 1071.4 km (665.6 miles)
Elevation gain: 888 m
Total elevation gain: 10848 m30 Jun 2017
Distance: 126.7 km (78.7 miles)
Total distance: 1198.1 km (744.3 miles)
Elevation gain: 981 m
Total elevation gain: 11829 m1 Jul 2017
Distance: 113.5 km (70.5 miles)
Total distance: 1311.6 km (814.8 miles)
Elevation gain: 530 m
Total elevation gain: 12359 m2 Jul 2017
Distance: 91.2 km (56.7 miles)
Total distance: 1402.8 km (871.5 miles)
Elevation gain: 632 m
Total elevation gain: 12991 m3 Jul 2017
Distance: ()
Total distance: ()
Elevation gain:
Total elevation gain: 4 Jul 2017
Distance: 84.0 km (52.2 miles)
Total distance: 1622.9 km (1008.2 miles)
Elevation gain: 1168 m
Total elevation gain: 15219 m5 Jul 2017
Distance: 87.7 km (54.5 miles)
Total distance: 1710.6 km (1062.7 miles)
Elevation gain: 606 m
Total elevation gain: 15825 m6 Jul 2017
Distance: 120.4 km (74.8 miles)
Total distance: 1831.0 km (1137.5 miles)
Elevation gain: 1238 m
Total elevation gain: 17063 m7 Jul 2017
Distance: 119.6 km (74.3 miles)
Total distance: 1950.6 km (1211.8 miles)
Elevation gain: 802 m
Total elevation gain: 17865 m8 Jul 2017
Distance: 119.6 km (74.3 miles)
Total distance: 1950.6 km (1211.8 miles)
Elevation gain: 665 m
Total elevation gain: 18530 m9 Jul 2017
Distance: 92.3 km (57.3 miles)
Total distance: 2042.9 km (1269.2 miles)
Elevation gain: 1104 m
Total elevation gain: 19634 m10 Jul 2017
Distance: 115.8 km (71.9 miles)
Total distance: 2158.7 km (1341.1 miles)
Elevation gain: 1076 m
Total elevation gain: 20710 m11 Jul 2017
Distance: 120.4 km (74.8 miles)
Total distance: 2279.1 km (1415.9 miles)
Elevation gain: 1405 m
Total elevation gain: 22115 m12 Jul 2017
Distance: 85.4 km (53.1 miles)
Total distance: 2364.5 km (1469.0 miles)
Elevation gain: 840 m
Total elevation gain: 22955 m13 Jul 2017
Distance: 115.9 km (72.0 miles)
Total distance: 2480.4 km (1541.0 miles)
Elevation gain: 1554 m
Total elevation gain: 24509 m14 Jul 2017
Distance: 85.0 km (52.8 miles)
Total distance: 2565.4 km (1593.8 miles)
Elevation gain: 931 m
Total elevation gain: 25440 m15 Jul 2017
Distance: 108.4 km (67.3 miles)
Total distance: 2673.8 km (1661.1 miles)
Elevation gain: 765 m
Total elevation gain: 26205 m16 Jul 2017
Distance: 103.9 km (64.5 miles)
Total distance: 2777.7 km (1725.7 miles)
Elevation gain: 983 m
Total elevation gain: 27188 m17 Jul 2017
Distance: 71.2 km (44.2 miles)
Total distance: 2848.9 km (1769.9 miles)
Elevation gain: 1026 m
Total elevation gain: 28214 m18 Jul 2017
Distance: 119.3 km (74.1 miles)
Total distance: 2968.2 km (1844.0 miles)
Elevation gain: 1840 m
Total elevation gain: 30054 m19 Jul 2017
Distance: 96.4 km (59.9 miles)
Total distance: 3064.6 km (1903.9 miles)
Elevation gain: 1423 m
Total elevation gain: 31477 m20 Jul 2017
Distance: 118.6 km (73.7 miles)
Total distance: 3183.2 km (1977.6 miles)
Elevation gain: 1455 m
Total elevation gain: 32932 m21 Jul 2017
Distance: 63.7 km (39.6 miles)
Total distance: 3246.9 km (2017.1 miles)
Elevation gain: 1455 m
Total elevation gain: 32932 m22 Jul 2017
Distance: 8.4 km (5.2 miles)
Total distance: 3272.5 km (2033.1 miles)
Elevation gain: 82 m
Total elevation gain: 33227 m23 Jul 2017
Distance: 114.9 km (71.4 miles)
Total distance: 3387.4 km (2104.4 miles)
Elevation gain: 82 m
Total elevation gain: 33227 m24 Jul 2017
Distance: 53.8 km (33.4 miles)
Total distance: 3441.2 km (2137.9 miles)
Elevation gain: 441 m
Total elevation gain: 33668 m25 Jul 2017
Distance: 84.2 km (52.3 miles)
Total distance: 3525.4 km (2190.2 miles)
Elevation gain: 772 m
Total elevation gain: 34440 m26 Jul 2017
Distance: 43.9 km (27.3 miles)
Total distance: 3569.3 km (2217.4 miles)
Elevation gain: 696 m
Total elevation gain: 35136 m27 Jul 2017
Distance: 87.3 km (54.2 miles)
Total distance: 3656.6 km (2271.7 miles)
Elevation gain: 927 m
Total elevation gain: 36063 m28 Jul 2017
Distance: 82.7 km (51.4 miles)
Total distance: 3739.3 km (2323.1 miles)
Elevation gain: 1604 m
Total elevation gain: 37667 m29 Jul 2017
Distance: 31.5 km (19.6 miles)
Total distance: 3770.8 km (2342.6 miles)
Elevation gain: 366 m
Total elevation gain: 38033 m30 Jul 2017
Distance: 94.4 km (58.6 miles)
Total distance: 3865.2 km (2401.3 miles)
Elevation gain: 1109 m
Total elevation gain: 39142 m31 Jul 2017
Distance: 94.5 km (58.7 miles)
Total distance: 3959.7 km (2460.0 miles)
Elevation gain: 1109 m
Total elevation gain: 40251 m1 Aug 2017
Distance: 91.2 km (56.7 miles)
Total distance: 4050.9 km (2516.6 miles)
Elevation gain: 1522 m
Total elevation gain: 41773 m2 Aug 2017
Distance: 82.1 km (51.0 miles)
Total distance: 4133.0 km (2567.6 miles)
Elevation gain: 903 m
Total elevation gain: 42676 m3 Aug 2017
Distance: 82.4 km (51.2 miles)
Total distance: 4215.4 km (2618.8 miles)
Elevation gain: 1097 m
Total elevation gain: 43773 m4 Aug 2017
Distance: 93.7 km (58.2 miles)
Total distance: 4309.1 km (2677.0 miles)
Elevation gain: 956 m
Total elevation gain: 44729 m5 Aug 2017
Distance: 101.0 km (62.7 miles)
Total distance: 4410.1 km (2739.8 miles)
Elevation gain: 1083 m
Total elevation gain: 45812 m6 Aug 2017
Distance: 84.8 km (52.7 miles)
Total distance: 4494.9 km (2792.5 miles)
Elevation gain: 863 m
Total elevation gain: 46675 m7 Aug 2017
Distance: 49.3 km (30.6 miles)
Total distance: 4544.2 km (2823.1 miles)
Elevation gain: 298 m
Total elevation gain: 46973 m8 Aug 2017
Distance: 72.4 km (45.0 miles)
Total distance: 4616.6 km (2868.1 miles)
Elevation gain: 827 m
Total elevation gain: 47800 m9 Aug 2017
Distance: 87.5 km (54.4 miles)
Total distance: 4704.1 km (2922.4 miles)
Elevation gain: 504 m
Total elevation gain: 48304 m10 Aug 2017
Distance: 68.7 km (42.7 miles)
Total distance: 4772.8 km (2965.1 miles)
Elevation gain: 1065 m
Total elevation gain: 49369 m11 Aug 2017
Distance: 105.9 km (65.8 miles)
Total distance: 4878.7 km (3030.9 miles)
Elevation gain: 1233 m
Total elevation gain: 50602 m12 Aug 2017
Distance: 133.3 km (82.8 miles)
Total distance: 5012.0 km (3113.7 miles)
Elevation gain: 1412 m
Total elevation gain: 52014 m13 Aug 2017
Distance: 133.3 km (82.8 miles)
Total distance: 5012.0 km (3113.7 miles)
Elevation gain: 1412 m
Total elevation gain: 52014 m14 Aug 2017
Distance: 114.2 km (70.9 miles)
Total distance: 5126.2 km (3184.7 miles)
Elevation gain: 942 m
Total elevation gain: 52956 m15 Aug 2017
Distance: 134.0 km (83.2 miles)
Total distance: 5260.2 km (3267.9 miles)
Elevation gain: 862 m
Total elevation gain: 53818 m16 Aug 2017
Distance: ()
Total distance: ()
Elevation gain:
Total elevation gain: 17 Aug 2017
Distance: 102.4 km (63.6 miles)
Total distance: 5464.4 km (3394.8 miles)
Elevation gain: 804 m
Total elevation gain: 55255 m18 Aug 2017
Distance: 179.0 km (111.2 miles)
Total distance: 5643.4 km (3506.0 miles)
Elevation gain: 1002 m
Total elevation gain: 56257 m19 Aug 2017
Distance: 97.1 km (60.3 miles)
Total distance: 5740.5 km (3566.3 miles)
Elevation gain: 575 m
Total elevation gain: 56832 m21 Aug 2017
Distance: 86.3 km (53.6 miles)
Total distance: 5826.8 km (3619.9 miles)
Elevation gain: 911 m
Total elevation gain: 57743 m22 Aug 2017
Distance: 149.1 km (92.6 miles)
Total distance: 5975.9 km (3712.5 miles)
Elevation gain: 1131 m
Total elevation gain: 58874 m23 Aug 2017
Distance: 43.3 km (26.9 miles)
Total distance: 6019.2 km (3739.4 miles)
Elevation gain: 590 m
Total elevation gain: 59464 m24 Aug 2017
Distance: 101.0 km (62.7 miles)
Total distance: 6120.2 km (3802.2 miles)
Elevation gain: 701 m
Total elevation gain: 60165 m25 Aug 2017
Distance: 120.5 km (74.9 miles)
Total distance: 6240.7 km (3877.1 miles)
Elevation gain: 1176 m
Total elevation gain: 61341 m26 Aug 2017
Distance: 114.0 km (70.8 miles)
Total distance: 6354.7 km (3947.9 miles)
Elevation gain: 1288 m
Total elevation gain: 62629 m27 Aug 2017
Distance: 115.6 km (71.8 miles)
Total distance: 6470.3 km (4019.7 miles)
Elevation gain: 1410 m
Total elevation gain: 64039 m28 Aug 2017
Distance: 126.6 km (78.7 miles)
Total distance: 6596.9 km (4098.3 miles)
Elevation gain: 1330 m
Total elevation gain: 65369 m29 Aug 2017
Distance: 116.0 km (72.1 miles)
Total distance: 6712.9 km (4170.4 miles)
Elevation gain: 935 m
Total elevation gain: 66304 m30 Aug 2017
Distance: 97.7 km (60.7 miles)
Total distance: 6810.6 km (4231.1 miles)
Elevation gain: 666 m
Total elevation gain: 66970 m31 Aug 2017
Distance: 126.5 km (78.6 miles)
Total distance: 6937.1 km (4309.7 miles)
Elevation gain: 1749 m
Total elevation gain: 68719 m1 Sep 2017
Distance: 177.6 km (110.3 miles)
Total distance: 7114.7 km (4420.0 miles)
Elevation gain: 1391 m
Total elevation gain: 70110 m3 Sep 2017
Distance: 100.7 km (62.6 miles)
Total distance: 7215.4 km (4482.6 miles)
Elevation gain: 572 m
Total elevation gain: 70682 m4 Sep 2017
Distance: 57.4 km (35.7 miles)
Total distance: 7272.8 km (4518.2 miles)
Elevation gain: 134 m
Total elevation gain: 70816 m5 Sep 2017
Distance: 93.3 km (58.0 miles)
Total distance: 7366.1 km (4576.2 miles)
Elevation gain: 1145 m
Total elevation gain: 71961 m6 Sep 2017
Distance: 82.7 km (51.4 miles)
Total distance: 7448.8 km (4627.6 miles)
Elevation gain: 1299 m
Total elevation gain: 73260 m7 Sep 2017
Distance: 110.5 km (68.6 miles)
Total distance: 7559.3 km (4696.2 miles)
Elevation gain: 1502 m
Total elevation gain: 74762 m8 Sep 2017
Distance: 105.9 km (65.8 miles)
Total distance: 7665.2 km (4762.0 miles)
Elevation gain: 1465 m
Total elevation gain: 76227 m9 Sep 2017
Distance: 119.6 km (74.3 miles)
Total distance: 7784.8 km (4836.3 miles)
Elevation gain: 1499 m
Total elevation gain: 77726 m10 Sep 2017
Distance: 84.3 km (52.4 miles)
Total distance: 7869.1 km (4888.7 miles)
Elevation gain: 1229 m
Total elevation gain: 78955 m11 Sep 2017
Distance: 124.3 km (77.2 miles)
Total distance: 7993.4 km (4965.9 miles)
Elevation gain: 855 m
Total elevation gain: 79810 m12 Sep 2017
Distance: 98.4 km (61.1 miles)
Total distance: 8091.8 km (5027.1 miles)
Elevation gain: 1117 m
Total elevation gain: 80927 m13 Sep 2017
Distance: 132.1 km (82.1 miles)
Total distance: 8223.9 km (5109.1 miles)
Elevation gain: 1430 m
Total elevation gain: 82357 m14 Sep 2017
Distance: 108.6 km (67.5 miles)
Total distance: 8332.5 km (5176.6 miles)
Elevation gain: 774 m
Total elevation gain: 83131 m15 Sep 2017
Distance: 149.1 km (92.6 miles)
Total distance: 8481.6 km (5269.2 miles)
Elevation gain: 818 m
Total elevation gain: 83949 m16 Sep 2017
Distance: 175.2 km (108.8 miles)
Total distance: 8656.8 km (5378.1 miles)
Elevation gain: 400 m
Total elevation gain: 84349 m17 Sep 2017
Distance: 131.6 km (81.8 miles)
Total distance: 8788.4 km (5459.8 miles)
Elevation gain: 487 m
Total elevation gain: 84836 m19 Sep 2017
Distance: 136.4 km (84.7 miles)
Total distance: 8924.8 km (5544.6 miles)
Elevation gain: 480 m
Total elevation gain: 85316 m20 Sep 2017
Distance: 128.1 km (79.6 miles)
Total distance: 9052.9 km (5624.1 miles)
Elevation gain: 458 m
Total elevation gain: 85774 m21 Sep 2017
Distance: 119.2 km (74.1 miles)
Total distance: 9172.1 km (5698.2 miles)
Elevation gain: 1400 m
Total elevation gain: 87174 m22 Sep 2017
Distance: 108.0 km (67.1 miles)
Total distance: 9280.1 km (5765.3 miles)
Elevation gain: 2529 m
Total elevation gain: 89703 m23 Sep 2017
Distance: 70.0 km (43.5 miles)
Total distance: 9350.1 km (5808.8 miles)
Elevation gain: 1619 m
Total elevation gain: 91322 m24 Sep 2017
Distance: 86.2 km (53.6 miles)
Total distance: 9436.3 km (5862.3 miles)
Elevation gain: 1325 m
Total elevation gain: 92647 m25 Sep 2017
Distance: 36.3 km (22.6 miles)
Total distance: 9472.6 km (5884.9 miles)
Elevation gain: 138 m
Total elevation gain: 92785 m26 Sep 2017
Distance: 150.0 km (93.2 miles)
Total distance: 9622.6 km (5978.1 miles)
Elevation gain: 1737 m
Total elevation gain: 94522 m27 Sep 2017
Distance: 140.4 km (87.2 miles)
Total distance: 9763.0 km (6065.3 miles)
Elevation gain: 2223 m
Total elevation gain: 96745 m28 Sep 2017
Distance: 154.3 km (95.9 miles)
Total distance: 9917.3 km (6161.2 miles)
Elevation gain: 1809 m
Total elevation gain: 98554 m30 Sep 2017
Distance: 112.5 km (69.9 miles)
Total distance: 10029.8 km (6231.0 miles)
Elevation gain: 1899 m
Total elevation gain: 100453 m1 Oct 2017
Distance: 152.8 km (94.9 miles)
Total distance: 10182.6 km (6326.0 miles)
Elevation gain: 2281 m
Total elevation gain: 102734 m2 Oct 2017
Distance: 136.1 km (84.6 miles)
Total distance: 10318.7 km (6410.5 miles)
Elevation gain: 2140 m
Total elevation gain: 104874 m3 Oct 2017
Distance: 147.3 km (91.5 miles)
Total distance: 10466.0 km (6502.0 miles)
Elevation gain: 1842 m
Total elevation gain: 106716 m4 Oct 2017
Distance: 112.7 km (70.0 miles)
Total distance: 10578.7 km (6572.0 miles)
Elevation gain: 764 m
Total elevation gain: 107480 m5 Oct 2017
Distance: 138.5 km (86.0 miles)
Total distance: 10717.2 km (6658.1 miles)
Elevation gain: 817 m
Total elevation gain: 108297 m7 Oct 2017
Distance: 120.5 km (74.9 miles)
Total distance: 10837.7 km (6733.0 miles)
Elevation gain: 664 m
Total elevation gain: 108961 m8 Oct 2017
Distance: 108.5 km (67.4 miles)
Total distance: 10946.2 km (6800.4 miles)
Elevation gain: 1000 m
Total elevation gain: 109961 m9 Oct 2017
Distance: 146.7 km (91.1 miles)
Total distance: 11092.9 km (6891.5 miles)
Elevation gain: 1974 m
Total elevation gain: 111935 m10 Oct 2017
Distance: 141.3 km (87.8 miles)
Total distance: 11234.2 km (6979.3 miles)
Elevation gain: 881 m
Total elevation gain: 112816 m11 Oct 2017
Distance: 137.7 km (85.5 miles)
Total distance: 11371.9 km (7064.8 miles)
Elevation gain: 1182 m
Total elevation gain: 113998 m12 Oct 2017
Distance: 100.1 km (62.2 miles)
Total distance: 11472.0 km (7127.0 miles)
Elevation gain: 646 m
Total elevation gain: 114644 m13 Oct 2017
Distance: 121.8 km (75.7 miles)
Total distance: 11593.8 km (7202.7 miles)
Elevation gain: 592 m
Total elevation gain: 115236 m14 Oct 2017
Distance: 119.1 km (74.0 miles)
Total distance: 11712.9 km (7276.7 miles)
Elevation gain: 288 m
Total elevation gain: 115524 m15 Oct 2017
Distance: 83.6 km (51.9 miles)
Total distance: 11796.5 km (7328.6 miles)
Elevation gain: 423 m
Total elevation gain: 115947 m16 Oct 2017
Distance: 96.4 km (59.9 miles)
Total distance: 11892.9 km (7388.5 miles)
Elevation gain: 854 m
Total elevation gain: 116801 m

This example was made with config:

YAML 
data:
  - name: '2017-06-17'
  - name: '2017-06-18'
  - name: '2017-06-19'
  - name: '2017-06-20'
  - name: '2017-06-21'
  - name: '2017-06-22'
  - name: '2017-06-23'
  - name: '2017-06-24'
  - name: '2017-06-25'
  - name: '2017-06-26'
  - name: '2017-06-27'
  - name: '2017-06-28'
  - name: '2017-06-29'
  - name: '2017-06-30'
  - name: '2017-07-01'
  - name: '2017-07-02'
  - name: '2017-07-03'
  - name: '2017-07-04'
  - name: '2017-07-05'
  - name: '2017-07-06'
  - name: '2017-07-07'
  - name: '2017-07-08'
  - name: '2017-07-09'
  - name: '2017-07-10'
  - name: '2017-07-11'
  - name: '2017-07-12'
  - name: '2017-07-13'
  - name: '2017-07-14'
  - name: '2017-07-15'
  - name: '2017-07-16'
  - name: '2017-07-17'
  - name: '2017-07-18'
  - name: '2017-07-19'
  - name: '2017-07-20'
  - name: '2017-07-21'
  - name: '2017-07-22'
  - name: '2017-07-23'
  - name: '2017-07-24'
  - name: '2017-07-25'
  - name: '2017-07-26'
  - name: '2017-07-27'
  - name: '2017-07-28'
  - name: '2017-07-29'
  - name: '2017-07-30'
  - name: '2017-07-31'
  - name: '2017-08-01'
  - name: '2017-08-02'
  - name: '2017-08-03'
  - name: '2017-08-04'
  - name: '2017-08-05'
  - name: '2017-08-06'
  - name: '2017-08-07'
  - name: '2017-08-08'
  - name: '2017-08-09'
  - name: '2017-08-10'
  - name: '2017-08-11'
  - name: '2017-08-12'
  - name: '2017-08-13'
  - name: '2017-08-14'
  - name: '2017-08-15'
  - name: '2017-08-16'
  - name: '2017-08-17'
  - name: '2017-08-18'
  - name: '2017-08-19'
  - name: '2017-08-21'
  - name: '2017-08-22'
  - name: '2017-08-23'
  - name: '2017-08-24'
  - name: '2017-08-25'
  - name: '2017-08-26'
  - name: '2017-08-27'
  - name: '2017-08-28'
  - name: '2017-08-29'
  - name: '2017-08-30'
  - name: '2017-08-31'
  - name: '2017-09-01'
  - name: '2017-09-03'
  - name: '2017-09-04'
  - name: '2017-09-05'
  - name: '2017-09-06'
  - name: '2017-09-07'
  - name: '2017-09-08'
  - name: '2017-09-09'
  - name: '2017-09-10'
  - name: '2017-09-11'
  - name: '2017-09-12'
  - name: '2017-09-13'
  - name: '2017-09-14'
  - name: '2017-09-15'
  - name: '2017-09-16'
  - name: '2017-09-17'
  - name: '2017-09-19'
  - name: '2017-09-20'
  - name: '2017-09-21'
  - name: '2017-09-22'
  - name: '2017-09-23'
  - name: '2017-09-24'
  - name: '2017-09-25'
  - name: '2017-09-26'
  - name: '2017-09-27'
  - name: '2017-09-28'
  - name: '2017-09-30'
  - name: '2017-10-01'
  - name: '2017-10-02'
  - name: '2017-10-03'
  - name: '2017-10-04'
  - name: '2017-10-05'
  - name: '2017-10-07'
  - name: '2017-10-08'
  - name: '2017-10-09'
  - name: '2017-10-10'
  - name: '2017-10-11'
  - name: '2017-10-12'
  - name: '2017-10-13'
  - name: '2017-10-14'
  - name: '2017-10-15'
  - name: '2017-10-16'
geojson:
  key: name
  data: geojson.lowe2017real
key: name
projection:
  name: orthographic
  lat: 52
  lon: 10
min: 0
columns:
  - name: Tooltip
    template: >-
      <strong>{{ name | strftime('%e %b %Y') }}</strong><br />Distance:
      <strong>{{ geojson.properties.day_km }}</strong> ({{
      geojson.properties.day_miles }})<br />Total distance: <strong>{{
      geojson.properties.total_km }}</strong> ({{ geojson.properties.total_miles
      }})<br />Elevation gain: <strong>{{ geojson.properties.elevation_gain
      }}</strong><br />Total elevation gain: <strong>{{
      geojson.properties.elevation_total }}</strong>
  - name: colour
    template: '{{ geojson.properties.stroke }}'
tooltip: Tooltip
background:
  geojson: geojson.europe
  colour: '#dfdfdf'
bounds:
  lat:
    min: 34.5
    max: 71
  lon:
    min: -10
    max: 34
JSON 
{
	"data": [{
			"name": "2017-06-17"
		},{
			"name": "2017-06-18"
		},{
			"name": "2017-06-19"
		},{
			"name": "2017-06-20"
		},{
			"name": "2017-06-21"
		},{
			"name": "2017-06-22"
		},{
			"name": "2017-06-23"
		},{
			"name": "2017-06-24"
		},{
			"name": "2017-06-25"
		},{
			"name": "2017-06-26"
		},{
			"name": "2017-06-27"
		},{
			"name": "2017-06-28"
		},{
			"name": "2017-06-29"
		},{
			"name": "2017-06-30"
		},{
			"name": "2017-07-01"
		},{
			"name": "2017-07-02"
		},{
			"name": "2017-07-03"
		},{
			"name": "2017-07-04"
		},{
			"name": "2017-07-05"
		},{
			"name": "2017-07-06"
		},{
			"name": "2017-07-07"
		},{
			"name": "2017-07-08"
		},{
			"name": "2017-07-09"
		},{
			"name": "2017-07-10"
		},{
			"name": "2017-07-11"
		},{
			"name": "2017-07-12"
		},{
			"name": "2017-07-13"
		},{
			"name": "2017-07-14"
		},{
			"name": "2017-07-15"
		},{
			"name": "2017-07-16"
		},{
			"name": "2017-07-17"
		},{
			"name": "2017-07-18"
		},{
			"name": "2017-07-19"
		},{
			"name": "2017-07-20"
		},{
			"name": "2017-07-21"
		},{
			"name": "2017-07-22"
		},{
			"name": "2017-07-23"
		},{
			"name": "2017-07-24"
		},{
			"name": "2017-07-25"
		},{
			"name": "2017-07-26"
		},{
			"name": "2017-07-27"
		},{
			"name": "2017-07-28"
		},{
			"name": "2017-07-29"
		},{
			"name": "2017-07-30"
		},{
			"name": "2017-07-31"
		},{
			"name": "2017-08-01"
		},{
			"name": "2017-08-02"
		},{
			"name": "2017-08-03"
		},{
			"name": "2017-08-04"
		},{
			"name": "2017-08-05"
		},{
			"name": "2017-08-06"
		},{
			"name": "2017-08-07"
		},{
			"name": "2017-08-08"
		},{
			"name": "2017-08-09"
		},{
			"name": "2017-08-10"
		},{
			"name": "2017-08-11"
		},{
			"name": "2017-08-12"
		},{
			"name": "2017-08-13"
		},{
			"name": "2017-08-14"
		},{
			"name": "2017-08-15"
		},{
			"name": "2017-08-16"
		},{
			"name": "2017-08-17"
		},{
			"name": "2017-08-18"
		},{
			"name": "2017-08-19"
		},{
			"name": "2017-08-21"
		},{
			"name": "2017-08-22"
		},{
			"name": "2017-08-23"
		},{
			"name": "2017-08-24"
		},{
			"name": "2017-08-25"
		},{
			"name": "2017-08-26"
		},{
			"name": "2017-08-27"
		},{
			"name": "2017-08-28"
		},{
			"name": "2017-08-29"
		},{
			"name": "2017-08-30"
		},{
			"name": "2017-08-31"
		},{
			"name": "2017-09-01"
		},{
			"name": "2017-09-03"
		},{
			"name": "2017-09-04"
		},{
			"name": "2017-09-05"
		},{
			"name": "2017-09-06"
		},{
			"name": "2017-09-07"
		},{
			"name": "2017-09-08"
		},{
			"name": "2017-09-09"
		},{
			"name": "2017-09-10"
		},{
			"name": "2017-09-11"
		},{
			"name": "2017-09-12"
		},{
			"name": "2017-09-13"
		},{
			"name": "2017-09-14"
		},{
			"name": "2017-09-15"
		},{
			"name": "2017-09-16"
		},{
			"name": "2017-09-17"
		},{
			"name": "2017-09-19"
		},{
			"name": "2017-09-20"
		},{
			"name": "2017-09-21"
		},{
			"name": "2017-09-22"
		},{
			"name": "2017-09-23"
		},{
			"name": "2017-09-24"
		},{
			"name": "2017-09-25"
		},{
			"name": "2017-09-26"
		},{
			"name": "2017-09-27"
		},{
			"name": "2017-09-28"
		},{
			"name": "2017-09-30"
		},{
			"name": "2017-10-01"
		},{
			"name": "2017-10-02"
		},{
			"name": "2017-10-03"
		},{
			"name": "2017-10-04"
		},{
			"name": "2017-10-05"
		},{
			"name": "2017-10-07"
		},{
			"name": "2017-10-08"
		},{
			"name": "2017-10-09"
		},{
			"name": "2017-10-10"
		},{
			"name": "2017-10-11"
		},{
			"name": "2017-10-12"
		},{
			"name": "2017-10-13"
		},{
			"name": "2017-10-14"
		},{
			"name": "2017-10-15"
		},{
			"name": "2017-10-16"
		}],
	"geojson": {
		"key": "name",
		"data": "geojson.lowe2017real"
	},
	"key": "name",
	"projection": {
		"name": "orthographic",
		"lat": 52,
		"lon": 10
	},
	"min": 0,
	"columns": [{
			"name": "Tooltip",
			"template": "<strong>{{ name | strftime('%e %b %Y') }}</strong><br />Distance: <strong>{{ geojson.properties.day_km }}</strong> ({{ geojson.properties.day_miles }})<br />Total distance: <strong>{{ geojson.properties.total_km }}</strong> ({{ geojson.properties.total_miles }})<br />Elevation gain: <strong>{{ geojson.properties.elevation_gain }}</strong><br />Total elevation gain: <strong>{{ geojson.properties.elevation_total }}</strong>"
		},{
			"name": "colour",
			"template": "{{ geojson.properties.stroke }}"
		}],
	"tooltip": "Tooltip",
	"background": {
		"geojson": "geojson.europe",
		"colour": "#dfdfdf"
	},
	"bounds": {
		"lat": {
			"min": 34.5,
			"max": 71
		},
		"lon": {
			"min": -10,
			"max": 34
		}
	}
}

15. Projection: Aitoff§

Embeddable version

The default projection is "web-mercator" but we can change that to Aitoff by setting the projection➝name value to aitoff.

This example was made with config:

YAML 
geojson:
  key: ISO_A3_EH
  data: geojson.world
projection:
  name: aitoff
key: code
JSON 
{
	"geojson": {
		"key": "ISO_A3_EH",
		"data": "geojson.world"
	},
	"projection": {
		"name": "aitoff"
	},
	"key": "code"
}

16. Projection: Equirectangular§

Embeddable version

The default projection is "web-mercator" but we can change that to equirectangular by setting the projection➝name value to equirectangular. As the map would automatically adjust the size to the GeoJSON data (which doesn't have land above ~85°), we'll explicitly set the bounds to the full range of latitude/longitude.

This example was made with config:

YAML 
geojson:
  key: ISO_A3_EH
  data: geojson.world
projection:
  name: equirectangular
key: code
bounds:
  lat:
    min: -90
    max: 90
  lon:
    min: -180
    max: 180
JSON 
{
	"geojson": {
		"key": "ISO_A3_EH",
		"data": "geojson.world"
	},
	"projection": {
		"name": "equirectangular"
	},
	"key": "code",
	"bounds": {
		"lat": {
			"min": -90,
			"max": 90
		},
		"lon": {
			"min": -180,
			"max": 180
		}
	}
}

17. Projection: Gall-Peters§

Embeddable version

The default projection is "web-mercator" but we can change that to Gall-Peters by setting the projection➝name value to gall-peters.

This example was made with config:

YAML 
geojson:
  key: ISO_A3_EH
  data: geojson.world
projection:
  name: gall-peters
key: code
JSON 
{
	"geojson": {
		"key": "ISO_A3_EH",
		"data": "geojson.world"
	},
	"projection": {
		"name": "gall-peters"
	},
	"key": "code"
}

18. Projection: Orthographic§

Embeddable version

The default projection is "web-mercator" but we can change that to Orthographic by setting the projection➝name value to orthographic. Orthographic projection behaves as if we are viewing the Earth from a distance. Let's make a choropleth map showing total populations by country in Africa. We can rotate the globe by setting projection➝lon.

>200m
150m
100m
50m
0
Tanzania / TZA Population (2019): 58,005,463Western Sahara / B28 Population (2017): 603,253Democratic Republic of the Congo / COD Population (2019): 86,790,567Somalia / SOM Population (2019): 10,192,317.3Kenya / KEN Population (2019): 52,573,973Sudan / SDN Population (2019): 42,813,238Chad / TCD Population (2019): 15,946,876South Africa / ZAF Population (2019): 58,558,270Lesotho / LSO Population (2019): 2,125,268Zimbabwe / ZWE Population (2019): 14,645,468Botswana / BWA Population (2019): 2,303,697Namibia / NAM Population (2019): 2,494,530Senegal / SEN Population (2019): 16,296,364Mali / MLI Population (2019): 19,658,031Mauritania / MRT Population (2019): 4,525,696Benin / BEN Population (2019): 11,801,151Niger / NER Population (2019): 23,310,715Nigeria / NGA Population (2019): 200,963,599Cameroon / CMR Population (2019): 25,876,380Togo / TGO Population (2019): 8,082,366Ghana / GHA Population (2019): 30,417,856Côte d'Ivoire / CIV Population (2019): 25,716,544Guinea / GIN Population (2019): 12,771,246Guinea-Bissau / GNB Population (2019): 1,920,922Liberia / LBR Population (2019): 4,937,374Sierra Leone / SLE Population (2019): 7,813,215Burkina Faso / BFA Population (2019): 20,321,378Central African Republic / CAF Population (2019): 4,745,185Republic of the Congo / COG Population (2019): 5,380,508Gabon / GAB Population (2019): 2,172,579Equatorial Guinea / GNQ Population (2019): 1,355,986Zambia / ZMB Population (2019): 17,861,030Malawi / MWI Population (2019): 18,628,747Mozambique / MOZ Population (2019): 30,366,036Kingdom of eSwatini / SWZ Population (2019): 1,148,130Angola / AGO Population (2019): 31,825,295Burundi / BDI Population (2019): 11,530,580Madagascar / MDG Population (2019): 26,969,307The Gambia / GMB Population (2019): 2,347,706Tunisia / TUN Population (2019): 11,694,719Algeria / DZA Population (2019): 43,053,054Eritrea / ERI Population (2020): 6,081,196Morocco / MAR Population (2019): 36,471,769Egypt / EGY Population (2019): 100,388,073Libya / LBY Population (2019): 6,777,452Ethiopia / ETH Population (2019): 112,078,730Djibouti / DJI Population (2019): 973,560Somaliland / SOL Population (2014): 5,096,159Uganda / UGA Population (2019): 44,269,594Rwanda / RWA Population (2019): 12,626,950South Sudan / SDS Population (2019): 11,062,113

This example was made with config:

YAML 
data:
  - code: TZA
  - code: B28
  - code: COD
  - code: SOM
  - code: KEN
  - code: SDN
  - code: TCD
  - code: ZAF
  - code: LSO
  - code: ZWE
  - code: BWA
  - code: NAM
  - code: SEN
  - code: MLI
  - code: MRT
  - code: BEN
  - code: NER
  - code: NGA
  - code: CMR
  - code: TGO
  - code: GHA
  - code: CIV
  - code: GIN
  - code: GNB
  - code: LBR
  - code: SLE
  - code: BFA
  - code: CAF
  - code: COG
  - code: GAB
  - code: GNQ
  - code: ZMB
  - code: MWI
  - code: MOZ
  - code: SWZ
  - code: AGO
  - code: BDI
  - code: MDG
  - code: GMB
  - code: TUN
  - code: DZA
  - code: ERI
  - code: MAR
  - code: EGY
  - code: LBY
  - code: ETH
  - code: DJI
  - code: UGA
  - code: RWA
  - code: SDS
  - code: SOL
geojson:
  key: BRK_A3
  data: geojson.world
key: code
projection:
  name: orthographic
  lon: 16
scale: Viridis
value: geojson.properties.POP_EST
min: 0
max: 200000000
legend:
  position: top left
  items:
    - value: 200000000
      label: '>200m'
    - value: 150000000
      label: 150m
    - value: 100000000
      label: 100m
    - value: 50000000
      label: 50m
    - value: 0
      label: '0'
columns:
  - name: Tooltip
    template: >-
      {{ geojson.properties.NAME_LONG }} / {{ code }}

      Population ({{ geojson.properties.POP_YEAR }}): {{
      geojson.properties.POP_EST | toLocaleString() }}
  - name: filterLabel
    template: '{{ geojson.properties.NAME_LONG }} ({{ code }})'
tooltip: Tooltip
tools:
  filter:
    label: filterLabel
JSON 
{
	"data": [{
			"code": "TZA"
		},{
			"code": "B28"
		},{
			"code": "COD"
		},{
			"code": "SOM"
		},{
			"code": "KEN"
		},{
			"code": "SDN"
		},{
			"code": "TCD"
		},{
			"code": "ZAF"
		},{
			"code": "LSO"
		},{
			"code": "ZWE"
		},{
			"code": "BWA"
		},{
			"code": "NAM"
		},{
			"code": "SEN"
		},{
			"code": "MLI"
		},{
			"code": "MRT"
		},{
			"code": "BEN"
		},{
			"code": "NER"
		},{
			"code": "NGA"
		},{
			"code": "CMR"
		},{
			"code": "TGO"
		},{
			"code": "GHA"
		},{
			"code": "CIV"
		},{
			"code": "GIN"
		},{
			"code": "GNB"
		},{
			"code": "LBR"
		},{
			"code": "SLE"
		},{
			"code": "BFA"
		},{
			"code": "CAF"
		},{
			"code": "COG"
		},{
			"code": "GAB"
		},{
			"code": "GNQ"
		},{
			"code": "ZMB"
		},{
			"code": "MWI"
		},{
			"code": "MOZ"
		},{
			"code": "SWZ"
		},{
			"code": "AGO"
		},{
			"code": "BDI"
		},{
			"code": "MDG"
		},{
			"code": "GMB"
		},{
			"code": "TUN"
		},{
			"code": "DZA"
		},{
			"code": "ERI"
		},{
			"code": "MAR"
		},{
			"code": "EGY"
		},{
			"code": "LBY"
		},{
			"code": "ETH"
		},{
			"code": "DJI"
		},{
			"code": "UGA"
		},{
			"code": "RWA"
		},{
			"code": "SDS"
		},{
			"code": "SOL"
		}],
	"geojson": {
		"key": "BRK_A3",
		"data": "geojson.world"
	},
	"key": "code",
	"projection": {
		"name": "orthographic",
		"lon": 16
	},
	"scale": "Viridis",
	"value": "geojson.properties.POP_EST",
	"min": 0,
	"max": 200000000,
	"legend": {
		"position": "top left",
		"items": [{
				"value": 200000000,
				"label": ">200m"
			},{
				"value": 150000000,
				"label": "150m"
			},{
				"value": 100000000,
				"label": "100m"
			},{
				"value": 50000000,
				"label": "50m"
			},{
				"value": 0,
				"label": "0"
			}]
	},
	"columns": [{
			"name": "Tooltip",
			"template": "{{ geojson.properties.NAME_LONG }} / {{ code }}\nPopulation ({{ geojson.properties.POP_YEAR }}): {{ geojson.properties.POP_EST | toLocaleString() }}"
		},{
			"name": "filterLabel",
			"template": "{{ geojson.properties.NAME_LONG }} ({{ code }})"
		}],
	"tooltip": "Tooltip",
	"tools": {
		"filter": {
			"label": "filterLabel"
		}
	}
}

19. Projection: Orthographic zoomed§

Embeddable version

Let's create an Orthographic view centred on Europe and highlight a few countries. We set the projection➝name value to orthographic, set the projection➝lat and projection➝lon of the centre of the view, then use bounds to set an approximate latitude/longitude bounding box. To create the tooltip we create a virtual column that uses both the data structure (e.g. {{ code }}) and the properties of the geojson file (e.g. {{ geojson.properties.POP_EST }}).

France / FRA Population (2019): 67,059,887Austria / AUT Population (2019): 8,877,067Germany / DEU Population (2019): 83,132,799Switzerland / CHE Population (2019): 8,574,832Luxembourg / LUX Population (2019): 619,896Belgium / BEL Population (2019): 11,484,055Netherlands / NLD Population (2019): 17,332,850Portugal / PRT Population (2019): 10,269,417Spain / ESP Population (2019): 47,076,781Ireland / IRL Population (2019): 4,941,444Italy / ITA Population (2019): 60,297,396United Kingdom / GBR Population (2019): 66,834,405

This example was made with config:

YAML 
data:
  - code: AUT
  - code: BEL
  - code: CHE
  - code: DEU
  - code: ESP
  - code: FRA
  - code: GBR
  - code: IRL
  - code: ITA
  - code: LUX
  - code: NLD
  - code: PRT
columns:
  - name: Tooltip
    template: >-
      {{ geojson.properties.NAME_LONG }} / {{ code }}

      Population ({{ geojson.properties.POP_YEAR }}): {{
      geojson.properties.POP_EST | toLocaleString() }}
key: code
tooltip: Tooltip
geojson:
  key: ISO_A3_EH
  data: geojson.world
scale: Viridis
value: geojson.properties.POP_EST
min: 0
projection:
  name: orthographic
  lat: 48
  lon: 10
bounds:
  lat:
    min: 33
    max: 60
  lon:
    min: -12
    max: 25
JSON 
{
	"data": [{
			"code": "AUT"
		},{
			"code": "BEL"
		},{
			"code": "CHE"
		},{
			"code": "DEU"
		},{
			"code": "ESP"
		},{
			"code": "FRA"
		},{
			"code": "GBR"
		},{
			"code": "IRL"
		},{
			"code": "ITA"
		},{
			"code": "LUX"
		},{
			"code": "NLD"
		},{
			"code": "PRT"
		}],
	"columns": [{
			"name": "Tooltip",
			"template": "{{ geojson.properties.NAME_LONG }} / {{ code }}\nPopulation ({{ geojson.properties.POP_YEAR }}): {{ geojson.properties.POP_EST | toLocaleString() }}"
		}],
	"key": "code",
	"tooltip": "Tooltip",
	"geojson": {
		"key": "ISO_A3_EH",
		"data": "geojson.world"
	},
	"scale": "Viridis",
	"value": "geojson.properties.POP_EST",
	"min": 0,
	"projection": {
		"name": "orthographic",
		"lat": 48,
		"lon": 10
	},
	"bounds": {
		"lat": {
			"min": 33,
			"max": 60
		},
		"lon": {
			"min": -12,
			"max": 25
		}
	}
}

20. Projection: Web-Mercator§

Embeddable version

The default projection is "web-mercator". In this example we'll display countries of the world and explicitly set the bounds to make sure we get the full planet (otherwise the North Pole area will be cropped).

This example was made with config:

YAML 
geojson:
  key: SOV_A3
  data: geojson.world
key: code
bounds:
  lat:
    min: -90
    max: 90
  lon:
    min: -180
    max: 180
JSON 
{
	"geojson": {
		"key": "SOV_A3",
		"data": "geojson.world"
	},
	"key": "code",
	"bounds": {
		"lat": {
			"min": -90,
			"max": 90
		},
		"lon": {
			"min": -180,
			"max": 180
		}
	}
}

21. Projection: Web-Mercator zoomed§

Embeddable version

Let's show a map of UK local authorities 2023 (ONS) using the default projection. We could optionally set the centre of the projection using projection➝lat and projection➝lon but not doing so will make sure the view resembles that used in Open Street Map/Google Maps etc. We can zoom in to a portion of the map by setting bounds. We will add a graticule with 1° spacing under the data and background layers.

Hartlepool / E06000001 North East / E12000001Middlesbrough / E06000002 North East / E12000001Redcar and Cleveland / E06000003 North East / E12000001Stockton-on-Tees / E06000004 North East / E12000001Darlington / E06000005 North East / E12000001Halton / E06000006 North West / E12000002Warrington / E06000007 North West / E12000002Blackburn with Darwen / E06000008 North West / E12000002Blackpool / E06000009 North West / E12000002Kingston upon Hull, City of / E06000010 Yorkshire and the Humber / E12000003East Riding of Yorkshire / E06000011 Yorkshire and the Humber / E12000003North East Lincolnshire / E06000012 Yorkshire and the Humber / E12000003North Lincolnshire / E06000013 Yorkshire and the Humber / E12000003York / E06000014 Yorkshire and the Humber / E12000003Derby / E06000015 East Midlands / E12000004Leicester / E06000016 East Midlands / E12000004Rutland / E06000017 East Midlands / E12000004Nottingham / E06000018 East Midlands / E12000004Herefordshire, County of / E06000019 West Midlands / E12000005Telford and Wrekin / E06000020 West Midlands / E12000005Stoke-on-Trent / E06000021 West Midlands / E12000005Bath and North East Somerset / E06000022 South West / E12000009Bristol, City of / E06000023 South West / E12000009North Somerset / E06000024 South West / E12000009South Gloucestershire / E06000025 South West / E12000009Plymouth / E06000026 South West / E12000009Torbay / E06000027 South West / E12000009Swindon / E06000030 South West / E12000009Peterborough / E06000031 East of England / E12000006Luton / E06000032 East of England / E12000006Southend-on-Sea / E06000033 East of England / E12000006Thurrock / E06000034 East of England / E12000006Medway / E06000035 South East / E12000008Bracknell Forest / E06000036 South East / E12000008West Berkshire / E06000037 South East / E12000008Reading / E06000038 South East / E12000008Slough / E06000039 South East / E12000008Windsor and Maidenhead / E06000040 South East / E12000008Wokingham / E06000041 South East / E12000008Milton Keynes / E06000042 South East / E12000008Brighton and Hove / E06000043 South East / E12000008Portsmouth / E06000044 South East / E12000008Southampton / E06000045 South East / E12000008Isle of Wight / E06000046 South East / E12000008County Durham / E06000047 North East / E12000001Cheshire East / E06000049 North West / E12000002Cheshire West and Chester / E06000050 North West / E12000002Shropshire / E06000051 West Midlands / E12000005Cornwall / E06000052 South West / E12000009Isles of Scilly / E06000053 South West / E12000009Wiltshire / E06000054 South West / E12000009Bedford / E06000055 East of England / E12000006Central Bedfordshire / E06000056 East of England / E12000006Northumberland / E06000057 North East / E12000001Bournemouth, Christchurch and Poole / E06000058 South West / E12000009Dorset / E06000059 South West / E12000009Buckinghamshire / E06000060 South East / E12000008North Northamptonshire / E06000061 East Midlands / E12000004West Northamptonshire / E06000062 East Midlands / E12000004Cumberland / E06000063 North West / E12000002Westmorland and Furness / E06000064 North West / E12000002North Yorkshire / E06000065 Yorkshire and the Humber / E12000003Somerset / E06000066 South West / E12000009Cambridge / E07000008 East of England / E12000006East Cambridgeshire / E07000009 East of England / E12000006Fenland / E07000010 East of England / E12000006Huntingdonshire / E07000011 East of England / E12000006South Cambridgeshire / E07000012 East of England / E12000006Amber Valley / E07000032 East Midlands / E12000004Bolsover / E07000033 East Midlands / E12000004Chesterfield / E07000034 East Midlands / E12000004Derbyshire Dales / E07000035 East Midlands / E12000004Erewash / E07000036 East Midlands / E12000004High Peak / E07000037 East Midlands / E12000004North East Derbyshire / E07000038 East Midlands / E12000004South Derbyshire / E07000039 East Midlands / E12000004East Devon / E07000040 South West / E12000009Exeter / E07000041 South West / E12000009Mid Devon / E07000042 South West / E12000009North Devon / E07000043 South West / E12000009South Hams / E07000044 South West / E12000009Teignbridge / E07000045 South West / E12000009Torridge / E07000046 South West / E12000009West Devon / E07000047 South West / E12000009Eastbourne / E07000061 South East / E12000008Hastings / E07000062 South East / E12000008Lewes / E07000063 South East / E12000008Rother / E07000064 South East / E12000008Wealden / E07000065 South East / E12000008Basildon / E07000066 East of England / E12000006Braintree / E07000067 East of England / E12000006Brentwood / E07000068 East of England / E12000006Castle Point / E07000069 East of England / E12000006Chelmsford / E07000070 East of England / E12000006Colchester / E07000071 East of England / E12000006Epping Forest / E07000072 East of England / E12000006Harlow / E07000073 East of England / E12000006Maldon / E07000074 East of England / E12000006Rochford / E07000075 East of England / E12000006Tendring / E07000076 East of England / E12000006Uttlesford / E07000077 East of England / E12000006Cheltenham / E07000078 South West / E12000009Cotswold / E07000079 South West / E12000009Forest of Dean / E07000080 South West / E12000009Gloucester / E07000081 South West / E12000009Stroud / E07000082 South West / E12000009Tewkesbury / E07000083 South West / E12000009Basingstoke and Deane / E07000084 South East / E12000008East Hampshire / E07000085 South East / E12000008Eastleigh / E07000086 South East / E12000008Fareham / E07000087 South East / E12000008Gosport / E07000088 South East / E12000008Hart / E07000089 South East / E12000008Havant / E07000090 South East / E12000008New Forest / E07000091 South East / E12000008Rushmoor / E07000092 South East / E12000008Test Valley / E07000093 South East / E12000008Winchester / E07000094 South East / E12000008Broxbourne / E07000095 East of England / E12000006Dacorum / E07000096 East of England / E12000006Hertsmere / E07000098 East of England / E12000006North Hertfordshire / E07000099 East of England / E12000006Three Rivers / E07000102 East of England / E12000006Watford / E07000103 East of England / E12000006Ashford / E07000105 South East / E12000008Canterbury / E07000106 South East / E12000008Dartford / E07000107 South East / E12000008Dover / E07000108 South East / E12000008Gravesham / E07000109 South East / E12000008Maidstone / E07000110 South East / E12000008Sevenoaks / E07000111 South East / E12000008Folkestone and Hythe / E07000112 South East / E12000008Swale / E07000113 South East / E12000008Thanet / E07000114 South East / E12000008Tonbridge and Malling / E07000115 South East / E12000008Tunbridge Wells / E07000116 South East / E12000008Burnley / E07000117 North West / E12000002Chorley / E07000118 North West / E12000002Fylde / E07000119 North West / E12000002Hyndburn / E07000120 North West / E12000002Lancaster / E07000121 North West / E12000002Pendle / E07000122 North West / E12000002Preston / E07000123 North West / E12000002Ribble Valley / E07000124 North West / E12000002Rossendale / E07000125 North West / E12000002South Ribble / E07000126 North West / E12000002West Lancashire / E07000127 North West / E12000002Wyre / E07000128 North West / E12000002Blaby / E07000129 East Midlands / E12000004Charnwood / E07000130 East Midlands / E12000004Harborough / E07000131 East Midlands / E12000004Hinckley and Bosworth / E07000132 East Midlands / E12000004Melton / E07000133 East Midlands / E12000004North West Leicestershire / E07000134 East Midlands / E12000004Oadby and Wigston / E07000135 East Midlands / E12000004Boston / E07000136 East Midlands / E12000004East Lindsey / E07000137 East Midlands / E12000004Lincoln / E07000138 East Midlands / E12000004North Kesteven / E07000139 East Midlands / E12000004South Holland / E07000140 East Midlands / E12000004South Kesteven / E07000141 East Midlands / E12000004West Lindsey / E07000142 East Midlands / E12000004Breckland / E07000143 East of England / E12000006Broadland / E07000144 East of England / E12000006Great Yarmouth / E07000145 East of England / E12000006King's Lynn and West Norfolk / E07000146 East of England / E12000006North Norfolk / E07000147 East of England / E12000006Norwich / E07000148 East of England / E12000006South Norfolk / E07000149 East of England / E12000006Ashfield / E07000170 East Midlands / E12000004Bassetlaw / E07000171 East Midlands / E12000004Broxtowe / E07000172 East Midlands / E12000004Gedling / E07000173 East Midlands / E12000004Mansfield / E07000174 East Midlands / E12000004Newark and Sherwood / E07000175 East Midlands / E12000004Rushcliffe / E07000176 East Midlands / E12000004Cherwell / E07000177 South East / E12000008Oxford / E07000178 South East / E12000008South Oxfordshire / E07000179 South East / E12000008Vale of White Horse / E07000180 South East / E12000008West Oxfordshire / E07000181 South East / E12000008Cannock Chase / E07000192 West Midlands / E12000005East Staffordshire / E07000193 West Midlands / E12000005Lichfield / E07000194 West Midlands / E12000005Newcastle-under-Lyme / E07000195 West Midlands / E12000005South Staffordshire / E07000196 West Midlands / E12000005Stafford / E07000197 West Midlands / E12000005Staffordshire Moorlands / E07000198 West Midlands / E12000005Tamworth / E07000199 West Midlands / E12000005Babergh / E07000200 East of England / E12000006Ipswich / E07000202 East of England / E12000006Mid Suffolk / E07000203 East of England / E12000006Elmbridge / E07000207 South East / E12000008Epsom and Ewell / E07000208 South East / E12000008Guildford / E07000209 South East / E12000008Mole Valley / E07000210 South East / E12000008Reigate and Banstead / E07000211 South East / E12000008Runnymede / E07000212 South East / E12000008Spelthorne / E07000213 South East / E12000008Surrey Heath / E07000214 South East / E12000008Tandridge / E07000215 South East / E12000008Waverley / E07000216 South East / E12000008Woking / E07000217 South East / E12000008North Warwickshire / E07000218 West Midlands / E12000005Nuneaton and Bedworth / E07000219 West Midlands / E12000005Rugby / E07000220 West Midlands / E12000005Stratford-on-Avon / E07000221 West Midlands / E12000005Warwick / E07000222 West Midlands / E12000005Adur / E07000223 South East / E12000008Arun / E07000224 South East / E12000008Chichester / E07000225 South East / E12000008Crawley / E07000226 South East / E12000008Horsham / E07000227 South East / E12000008Mid Sussex / E07000228 South East / E12000008Worthing / E07000229 South East / E12000008Bromsgrove / E07000234 West Midlands / E12000005Malvern Hills / E07000235 West Midlands / E12000005Redditch / E07000236 West Midlands / E12000005Worcester / E07000237 West Midlands / E12000005Wychavon / E07000238 West Midlands / E12000005Wyre Forest / E07000239 West Midlands / E12000005St Albans / E07000240 East of England / E12000006Welwyn Hatfield / E07000241 East of England / E12000006East Hertfordshire / E07000242 East of England / E12000006Stevenage / E07000243 East of England / E12000006East Suffolk / E07000244 East of England / E12000006West Suffolk / E07000245 East of England / E12000006Bolton / E08000001 North West / E12000002Bury / E08000002 North West / E12000002Manchester / E08000003 North West / E12000002Oldham / E08000004 North West / E12000002Rochdale / E08000005 North West / E12000002Salford / E08000006 North West / E12000002Stockport / E08000007 North West / E12000002Tameside / E08000008 North West / E12000002Trafford / E08000009 North West / E12000002Wigan / E08000010 North West / E12000002Knowsley / E08000011 North West / E12000002Liverpool / E08000012 North West / E12000002St. Helens / E08000013 North West / E12000002Sefton / E08000014 North West / E12000002Wirral / E08000015 North West / E12000002Barnsley / E08000016 Yorkshire and the Humber / E12000003Doncaster / E08000017 Yorkshire and the Humber / E12000003Rotherham / E08000018 Yorkshire and the Humber / E12000003Sheffield / E08000019 Yorkshire and the Humber / E12000003Newcastle upon Tyne / E08000021 North East / E12000001North Tyneside / E08000022 North East / E12000001South Tyneside / E08000023 North East / E12000001Sunderland / E08000024 North East / E12000001Birmingham / E08000025 West Midlands / E12000005Coventry / E08000026 West Midlands / E12000005Dudley / E08000027 West Midlands / E12000005Sandwell / E08000028 West Midlands / E12000005Solihull / E08000029 West Midlands / E12000005Walsall / E08000030 West Midlands / E12000005Wolverhampton / E08000031 West Midlands / E12000005Bradford / E08000032 Yorkshire and the Humber / E12000003Calderdale / E08000033 Yorkshire and the Humber / E12000003Kirklees / E08000034 Yorkshire and the Humber / E12000003Leeds / E08000035 Yorkshire and the Humber / E12000003Wakefield / E08000036 Yorkshire and the Humber / E12000003Gateshead / E08000037 North East / E12000001City of London / E09000001 London / E12000007Barking and Dagenham / E09000002 London / E12000007Barnet / E09000003 London / E12000007Bexley / E09000004 London / E12000007Brent / E09000005 London / E12000007Bromley / E09000006 London / E12000007Camden / E09000007 London / E12000007Croydon / E09000008 London / E12000007Ealing / E09000009 London / E12000007Enfield / E09000010 London / E12000007Greenwich / E09000011 London / E12000007Hackney / E09000012 London / E12000007Hammersmith and Fulham / E09000013 London / E12000007Haringey / E09000014 London / E12000007Harrow / E09000015 London / E12000007Havering / E09000016 London / E12000007Hillingdon / E09000017 London / E12000007Hounslow / E09000018 London / E12000007Islington / E09000019 London / E12000007Kensington and Chelsea / E09000020 London / E12000007Kingston upon Thames / E09000021 London / E12000007Lambeth / E09000022 London / E12000007Lewisham / E09000023 London / E12000007Merton / E09000024 London / E12000007Newham / E09000025 London / E12000007Redbridge / E09000026 London / E12000007Richmond upon Thames / E09000027 London / E12000007Southwark / E09000028 London / E12000007Sutton / E09000029 London / E12000007Tower Hamlets / E09000030 London / E12000007Waltham Forest / E09000031 London / E12000007Wandsworth / E09000032 London / E12000007Westminster / E09000033 London / E12000007Antrim and Newtownabbey / N09000001 Northern Ireland / N92000002Armagh City, Banbridge and Craigavon / N09000002 Northern Ireland / N92000002Belfast / N09000003 Northern Ireland / N92000002Causeway Coast and Glens / N09000004 Northern Ireland / N92000002Derry City and Strabane / N09000005 Northern Ireland / N92000002Fermanagh and Omagh / N09000006 Northern Ireland / N92000002Lisburn and Castlereagh / N09000007 Northern Ireland / N92000002Mid and East Antrim / N09000008 Northern Ireland / N92000002Mid Ulster / N09000009 Northern Ireland / N92000002Newry, Mourne and Down / N09000010 Northern Ireland / N92000002Ards and North Down / N09000011 Northern Ireland / N92000002Clackmannanshire / S12000005 Scotland / S92000003Dumfries and Galloway / S12000006 Scotland / S92000003East Ayrshire / S12000008 Scotland / S92000003East Lothian / S12000010 Scotland / S92000003East Renfrewshire / S12000011 Scotland / S92000003Na h-Eileanan Siar / S12000013 Scotland / S92000003Falkirk / S12000014 Scotland / S92000003Highland / S12000017 Scotland / S92000003Inverclyde / S12000018 Scotland / S92000003Midlothian / S12000019 Scotland / S92000003Moray / S12000020 Scotland / S92000003North Ayrshire / S12000021 Scotland / S92000003Orkney Islands / S12000023 Scotland / S92000003Scottish Borders / S12000026 Scotland / S92000003Shetland Islands / S12000027 Scotland / S92000003South Ayrshire / S12000028 Scotland / S92000003South Lanarkshire / S12000029 Scotland / S92000003Stirling / S12000030 Scotland / S92000003Aberdeen City / S12000033 Scotland / S92000003Aberdeenshire / S12000034 Scotland / S92000003Argyll and Bute / S12000035 Scotland / S92000003City of Edinburgh / S12000036 Scotland / S92000003Renfrewshire / S12000038 Scotland / S92000003West Dunbartonshire / S12000039 Scotland / S92000003West Lothian / S12000040 Scotland / S92000003Angus / S12000041 Scotland / S92000003Dundee City / S12000042 Scotland / S92000003East Dunbartonshire / S12000045 Scotland / S92000003Fife / S12000047 Scotland / S92000003Perth and Kinross / S12000048 Scotland / S92000003Glasgow City / S12000049 Scotland / S92000003North Lanarkshire / S12000050 Scotland / S92000003Isle of Anglesey / W06000001 Wales / W92000004Gwynedd / W06000002 Wales / W92000004Conwy / W06000003 Wales / W92000004Denbighshire / W06000004 Wales / W92000004Flintshire / W06000005 Wales / W92000004Wrexham / W06000006 Wales / W92000004Ceredigion / W06000008 Wales / W92000004Pembrokeshire / W06000009 Wales / W92000004Carmarthenshire / W06000010 Wales / W92000004Swansea / W06000011 Wales / W92000004Neath Port Talbot / W06000012 Wales / W92000004Bridgend / W06000013 Wales / W92000004Vale of Glamorgan / W06000014 Wales / W92000004Cardiff / W06000015 Wales / W92000004Rhondda Cynon Taf / W06000016 Wales / W92000004Caerphilly / W06000018 Wales / W92000004Blaenau Gwent / W06000019 Wales / W92000004Torfaen / W06000020 Wales / W92000004Monmouthshire / W06000021 Wales / W92000004Newport / W06000022 Wales / W92000004Powys / W06000023 Wales / W92000004Merthyr Tydfil / W06000024 Wales / W92000004
South West
South East
London
East of England
East Midlands
West Midlands
Wales
Yorks and the Humber
North West
North East
Northern Ireland
Scotland

This example was made with config:

YAML 
data: test.data.uk_local_authorities_2023
columns:
  - name: Tooltip
    template: |-
      {{ geojson.properties.LAD23NM }} / {{ geojson.properties.LAD23CD }}
      {{ region }} / {{ region code }}
geojson:
  key: LAD23CD
  data: geojson.Local_Authority_Districts_(May_2023)_UK_BUC
bounds:
  lat:
    min: 49.8
    max: 60.8
  lon:
    min: -8.4
    max: 2
layers:
  - type: graticule
    step:
      - 1
      - 1
  - type: background
    geojson: geojson.IRL
    colour: '#dfdfdf'
  - type: data
    key: code
    tooltip: Tooltip
legend:
  position: bottom
  items:
    - label: Scotland
      colour: '#2254F4'
    - label: Northern Ireland
      colour: '#722EA5'
    - label: North East
      colour: '#D60303'
    - label: North West
      colour: '#1DD3A7'
    - label: Yorks and the Humber
      colour: '#F9BC26'
    - label: Wales
      colour: '#0DBC37'
    - label: West Midlands
      colour: '#E6007C'
    - label: East Midlands
      colour: '#00B6FF'
    - label: East of England
      colour: '#FF6700'
    - label: London
      colour: '#D73058'
    - label: South East
      colour: '#67E767'
    - label: South West
      colour: '#178CFF'
JSON 
{
	"data": "test.data.uk_local_authorities_2023",
	"columns": [{
			"name": "Tooltip",
			"template": "{{ geojson.properties.LAD23NM }} / {{ geojson.properties.LAD23CD }}\n{{ region }} / {{ region code }}"
		}],
	"geojson": {
		"key": "LAD23CD",
		"data": "geojson.Local_Authority_Districts_(May_2023)_UK_BUC"
	},
	"bounds": {
		"lat": {
			"min": 49.8,
			"max": 60.8
		},
		"lon": {
			"min": -8.4,
			"max": 2
		}
	},
	"layers": [{
			"type": "graticule",
			"step": [
				1,
				1
			]
		},{
			"type": "background",
			"geojson": "geojson.IRL",
			"colour": "#dfdfdf"
		},{
			"type": "data",
			"key": "code",
			"tooltip": "Tooltip"
		}],
	"legend": {
		"position": "bottom",
		"items": [{
				"label": "Scotland",
				"colour": "#2254F4"
			},{
				"label": "Northern Ireland",
				"colour": "#722EA5"
			},{
				"label": "North East",
				"colour": "#D60303"
			},{
				"label": "North West",
				"colour": "#1DD3A7"
			},{
				"label": "Yorks and the Humber",
				"colour": "#F9BC26"
			},{
				"label": "Wales",
				"colour": "#0DBC37"
			},{
				"label": "West Midlands",
				"colour": "#E6007C"
			},{
				"label": "East Midlands",
				"colour": "#00B6FF"
			},{
				"label": "East of England",
				"colour": "#FF6700"
			},{
				"label": "London",
				"colour": "#D73058"
			},{
				"label": "South East",
				"colour": "#67E767"
			},{
				"label": "South West",
				"colour": "#178CFF"
			}]
	}
}

22. Projection: OS Grid§

Embeddable version

We can set the projection to "osgb" which is shorthand for applying a Transverse Mercator projection centred on 49°,-2°. This replicates the look of a map shown in Ordanance Survey's National Grid coordinates. We can also add a graticule to see longitudes/latitudes lines with 1° spacing. Outside of the UK things will look increasingly distorted.

Hartlepool / E06000001 North East / E12000001Middlesbrough / E06000002 North East / E12000001Redcar and Cleveland / E06000003 North East / E12000001Stockton-on-Tees / E06000004 North East / E12000001Darlington / E06000005 North East / E12000001Halton / E06000006 North West / E12000002Warrington / E06000007 North West / E12000002Blackburn with Darwen / E06000008 North West / E12000002Blackpool / E06000009 North West / E12000002Kingston upon Hull, City of / E06000010 Yorkshire and the Humber / E12000003East Riding of Yorkshire / E06000011 Yorkshire and the Humber / E12000003North East Lincolnshire / E06000012 Yorkshire and the Humber / E12000003North Lincolnshire / E06000013 Yorkshire and the Humber / E12000003York / E06000014 Yorkshire and the Humber / E12000003Derby / E06000015 East Midlands / E12000004Leicester / E06000016 East Midlands / E12000004Rutland / E06000017 East Midlands / E12000004Nottingham / E06000018 East Midlands / E12000004Herefordshire, County of / E06000019 West Midlands / E12000005Telford and Wrekin / E06000020 West Midlands / E12000005Stoke-on-Trent / E06000021 West Midlands / E12000005Bath and North East Somerset / E06000022 South West / E12000009Bristol, City of / E06000023 South West / E12000009North Somerset / E06000024 South West / E12000009South Gloucestershire / E06000025 South West / E12000009Plymouth / E06000026 South West / E12000009Torbay / E06000027 South West / E12000009Swindon / E06000030 South West / E12000009Peterborough / E06000031 East of England / E12000006Luton / E06000032 East of England / E12000006Southend-on-Sea / E06000033 East of England / E12000006Thurrock / E06000034 East of England / E12000006Medway / E06000035 South East / E12000008Bracknell Forest / E06000036 South East / E12000008West Berkshire / E06000037 South East / E12000008Reading / E06000038 South East / E12000008Slough / E06000039 South East / E12000008Windsor and Maidenhead / E06000040 South East / E12000008Wokingham / E06000041 South East / E12000008Milton Keynes / E06000042 South East / E12000008Brighton and Hove / E06000043 South East / E12000008Portsmouth / E06000044 South East / E12000008Southampton / E06000045 South East / E12000008Isle of Wight / E06000046 South East / E12000008County Durham / E06000047 North East / E12000001Cheshire East / E06000049 North West / E12000002Cheshire West and Chester / E06000050 North West / E12000002Shropshire / E06000051 West Midlands / E12000005Cornwall / E06000052 South West / E12000009Isles of Scilly / E06000053 South West / E12000009Wiltshire / E06000054 South West / E12000009Bedford / E06000055 East of England / E12000006Central Bedfordshire / E06000056 East of England / E12000006Northumberland / E06000057 North East / E12000001Bournemouth, Christchurch and Poole / E06000058 South West / E12000009Dorset / E06000059 South West / E12000009Buckinghamshire / E06000060 South East / E12000008North Northamptonshire / E06000061 East Midlands / E12000004West Northamptonshire / E06000062 East Midlands / E12000004Cumberland / E06000063 North West / E12000002Westmorland and Furness / E06000064 North West / E12000002North Yorkshire / E06000065 Yorkshire and the Humber / E12000003Somerset / E06000066 South West / E12000009Cambridge / E07000008 East of England / E12000006East Cambridgeshire / E07000009 East of England / E12000006Fenland / E07000010 East of England / E12000006Huntingdonshire / E07000011 East of England / E12000006South Cambridgeshire / E07000012 East of England / E12000006Amber Valley / E07000032 East Midlands / E12000004Bolsover / E07000033 East Midlands / E12000004Chesterfield / E07000034 East Midlands / E12000004Derbyshire Dales / E07000035 East Midlands / E12000004Erewash / E07000036 East Midlands / E12000004High Peak / E07000037 East Midlands / E12000004North East Derbyshire / E07000038 East Midlands / E12000004South Derbyshire / E07000039 East Midlands / E12000004East Devon / E07000040 South West / E12000009Exeter / E07000041 South West / E12000009Mid Devon / E07000042 South West / E12000009North Devon / E07000043 South West / E12000009South Hams / E07000044 South West / E12000009Teignbridge / E07000045 South West / E12000009Torridge / E07000046 South West / E12000009West Devon / E07000047 South West / E12000009Eastbourne / E07000061 South East / E12000008Hastings / E07000062 South East / E12000008Lewes / E07000063 South East / E12000008Rother / E07000064 South East / E12000008Wealden / E07000065 South East / E12000008Basildon / E07000066 East of England / E12000006Braintree / E07000067 East of England / E12000006Brentwood / E07000068 East of England / E12000006Castle Point / E07000069 East of England / E12000006Chelmsford / E07000070 East of England / E12000006Colchester / E07000071 East of England / E12000006Epping Forest / E07000072 East of England / E12000006Harlow / E07000073 East of England / E12000006Maldon / E07000074 East of England / E12000006Rochford / E07000075 East of England / E12000006Tendring / E07000076 East of England / E12000006Uttlesford / E07000077 East of England / E12000006Cheltenham / E07000078 South West / E12000009Cotswold / E07000079 South West / E12000009Forest of Dean / E07000080 South West / E12000009Gloucester / E07000081 South West / E12000009Stroud / E07000082 South West / E12000009Tewkesbury / E07000083 South West / E12000009Basingstoke and Deane / E07000084 South East / E12000008East Hampshire / E07000085 South East / E12000008Eastleigh / E07000086 South East / E12000008Fareham / E07000087 South East / E12000008Gosport / E07000088 South East / E12000008Hart / E07000089 South East / E12000008Havant / E07000090 South East / E12000008New Forest / E07000091 South East / E12000008Rushmoor / E07000092 South East / E12000008Test Valley / E07000093 South East / E12000008Winchester / E07000094 South East / E12000008Broxbourne / E07000095 East of England / E12000006Dacorum / E07000096 East of England / E12000006Hertsmere / E07000098 East of England / E12000006North Hertfordshire / E07000099 East of England / E12000006Three Rivers / E07000102 East of England / E12000006Watford / E07000103 East of England / E12000006Ashford / E07000105 South East / E12000008Canterbury / E07000106 South East / E12000008Dartford / E07000107 South East / E12000008Dover / E07000108 South East / E12000008Gravesham / E07000109 South East / E12000008Maidstone / E07000110 South East / E12000008Sevenoaks / E07000111 South East / E12000008Folkestone and Hythe / E07000112 South East / E12000008Swale / E07000113 South East / E12000008Thanet / E07000114 South East / E12000008Tonbridge and Malling / E07000115 South East / E12000008Tunbridge Wells / E07000116 South East / E12000008Burnley / E07000117 North West / E12000002Chorley / E07000118 North West / E12000002Fylde / E07000119 North West / E12000002Hyndburn / E07000120 North West / E12000002Lancaster / E07000121 North West / E12000002Pendle / E07000122 North West / E12000002Preston / E07000123 North West / E12000002Ribble Valley / E07000124 North West / E12000002Rossendale / E07000125 North West / E12000002South Ribble / E07000126 North West / E12000002West Lancashire / E07000127 North West / E12000002Wyre / E07000128 North West / E12000002Blaby / E07000129 East Midlands / E12000004Charnwood / E07000130 East Midlands / E12000004Harborough / E07000131 East Midlands / E12000004Hinckley and Bosworth / E07000132 East Midlands / E12000004Melton / E07000133 East Midlands / E12000004North West Leicestershire / E07000134 East Midlands / E12000004Oadby and Wigston / E07000135 East Midlands / E12000004Boston / E07000136 East Midlands / E12000004East Lindsey / E07000137 East Midlands / E12000004Lincoln / E07000138 East Midlands / E12000004North Kesteven / E07000139 East Midlands / E12000004South Holland / E07000140 East Midlands / E12000004South Kesteven / E07000141 East Midlands / E12000004West Lindsey / E07000142 East Midlands / E12000004Breckland / E07000143 East of England / E12000006Broadland / E07000144 East of England / E12000006Great Yarmouth / E07000145 East of England / E12000006King's Lynn and West Norfolk / E07000146 East of England / E12000006North Norfolk / E07000147 East of England / E12000006Norwich / E07000148 East of England / E12000006South Norfolk / E07000149 East of England / E12000006Ashfield / E07000170 East Midlands / E12000004Bassetlaw / E07000171 East Midlands / E12000004Broxtowe / E07000172 East Midlands / E12000004Gedling / E07000173 East Midlands / E12000004Mansfield / E07000174 East Midlands / E12000004Newark and Sherwood / E07000175 East Midlands / E12000004Rushcliffe / E07000176 East Midlands / E12000004Cherwell / E07000177 South East / E12000008Oxford / E07000178 South East / E12000008South Oxfordshire / E07000179 South East / E12000008Vale of White Horse / E07000180 South East / E12000008West Oxfordshire / E07000181 South East / E12000008Cannock Chase / E07000192 West Midlands / E12000005East Staffordshire / E07000193 West Midlands / E12000005Lichfield / E07000194 West Midlands / E12000005Newcastle-under-Lyme / E07000195 West Midlands / E12000005South Staffordshire / E07000196 West Midlands / E12000005Stafford / E07000197 West Midlands / E12000005Staffordshire Moorlands / E07000198 West Midlands / E12000005Tamworth / E07000199 West Midlands / E12000005Babergh / E07000200 East of England / E12000006Ipswich / E07000202 East of England / E12000006Mid Suffolk / E07000203 East of England / E12000006Elmbridge / E07000207 South East / E12000008Epsom and Ewell / E07000208 South East / E12000008Guildford / E07000209 South East / E12000008Mole Valley / E07000210 South East / E12000008Reigate and Banstead / E07000211 South East / E12000008Runnymede / E07000212 South East / E12000008Spelthorne / E07000213 South East / E12000008Surrey Heath / E07000214 South East / E12000008Tandridge / E07000215 South East / E12000008Waverley / E07000216 South East / E12000008Woking / E07000217 South East / E12000008North Warwickshire / E07000218 West Midlands / E12000005Nuneaton and Bedworth / E07000219 West Midlands / E12000005Rugby / E07000220 West Midlands / E12000005Stratford-on-Avon / E07000221 West Midlands / E12000005Warwick / E07000222 West Midlands / E12000005Adur / E07000223 South East / E12000008Arun / E07000224 South East / E12000008Chichester / E07000225 South East / E12000008Crawley / E07000226 South East / E12000008Horsham / E07000227 South East / E12000008Mid Sussex / E07000228 South East / E12000008Worthing / E07000229 South East / E12000008Bromsgrove / E07000234 West Midlands / E12000005Malvern Hills / E07000235 West Midlands / E12000005Redditch / E07000236 West Midlands / E12000005Worcester / E07000237 West Midlands / E12000005Wychavon / E07000238 West Midlands / E12000005Wyre Forest / E07000239 West Midlands / E12000005St Albans / E07000240 East of England / E12000006Welwyn Hatfield / E07000241 East of England / E12000006East Hertfordshire / E07000242 East of England / E12000006Stevenage / E07000243 East of England / E12000006East Suffolk / E07000244 East of England / E12000006West Suffolk / E07000245 East of England / E12000006Bolton / E08000001 North West / E12000002Bury / E08000002 North West / E12000002Manchester / E08000003 North West / E12000002Oldham / E08000004 North West / E12000002Rochdale / E08000005 North West / E12000002Salford / E08000006 North West / E12000002Stockport / E08000007 North West / E12000002Tameside / E08000008 North West / E12000002Trafford / E08000009 North West / E12000002Wigan / E08000010 North West / E12000002Knowsley / E08000011 North West / E12000002Liverpool / E08000012 North West / E12000002St. Helens / E08000013 North West / E12000002Sefton / E08000014 North West / E12000002Wirral / E08000015 North West / E12000002Barnsley / E08000016 Yorkshire and the Humber / E12000003Doncaster / E08000017 Yorkshire and the Humber / E12000003Rotherham / E08000018 Yorkshire and the Humber / E12000003Sheffield / E08000019 Yorkshire and the Humber / E12000003Newcastle upon Tyne / E08000021 North East / E12000001North Tyneside / E08000022 North East / E12000001South Tyneside / E08000023 North East / E12000001Sunderland / E08000024 North East / E12000001Birmingham / E08000025 West Midlands / E12000005Coventry / E08000026 West Midlands / E12000005Dudley / E08000027 West Midlands / E12000005Sandwell / E08000028 West Midlands / E12000005Solihull / E08000029 West Midlands / E12000005Walsall / E08000030 West Midlands / E12000005Wolverhampton / E08000031 West Midlands / E12000005Bradford / E08000032 Yorkshire and the Humber / E12000003Calderdale / E08000033 Yorkshire and the Humber / E12000003Kirklees / E08000034 Yorkshire and the Humber / E12000003Leeds / E08000035 Yorkshire and the Humber / E12000003Wakefield / E08000036 Yorkshire and the Humber / E12000003Gateshead / E08000037 North East / E12000001City of London / E09000001 London / E12000007Barking and Dagenham / E09000002 London / E12000007Barnet / E09000003 London / E12000007Bexley / E09000004 London / E12000007Brent / E09000005 London / E12000007Bromley / E09000006 London / E12000007Camden / E09000007 London / E12000007Croydon / E09000008 London / E12000007Ealing / E09000009 London / E12000007Enfield / E09000010 London / E12000007Greenwich / E09000011 London / E12000007Hackney / E09000012 London / E12000007Hammersmith and Fulham / E09000013 London / E12000007Haringey / E09000014 London / E12000007Harrow / E09000015 London / E12000007Havering / E09000016 London / E12000007Hillingdon / E09000017 London / E12000007Hounslow / E09000018 London / E12000007Islington / E09000019 London / E12000007Kensington and Chelsea / E09000020 London / E12000007Kingston upon Thames / E09000021 London / E12000007Lambeth / E09000022 London / E12000007Lewisham / E09000023 London / E12000007Merton / E09000024 London / E12000007Newham / E09000025 London / E12000007Redbridge / E09000026 London / E12000007Richmond upon Thames / E09000027 London / E12000007Southwark / E09000028 London / E12000007Sutton / E09000029 London / E12000007Tower Hamlets / E09000030 London / E12000007Waltham Forest / E09000031 London / E12000007Wandsworth / E09000032 London / E12000007Westminster / E09000033 London / E12000007Antrim and Newtownabbey / N09000001 Northern Ireland / N92000002Armagh City, Banbridge and Craigavon / N09000002 Northern Ireland / N92000002Belfast / N09000003 Northern Ireland / N92000002Causeway Coast and Glens / N09000004 Northern Ireland / N92000002Derry City and Strabane / N09000005 Northern Ireland / N92000002Fermanagh and Omagh / N09000006 Northern Ireland / N92000002Lisburn and Castlereagh / N09000007 Northern Ireland / N92000002Mid and East Antrim / N09000008 Northern Ireland / N92000002Mid Ulster / N09000009 Northern Ireland / N92000002Newry, Mourne and Down / N09000010 Northern Ireland / N92000002Ards and North Down / N09000011 Northern Ireland / N92000002Clackmannanshire / S12000005 Scotland / S92000003Dumfries and Galloway / S12000006 Scotland / S92000003East Ayrshire / S12000008 Scotland / S92000003East Lothian / S12000010 Scotland / S92000003East Renfrewshire / S12000011 Scotland / S92000003Na h-Eileanan Siar / S12000013 Scotland / S92000003Falkirk / S12000014 Scotland / S92000003Highland / S12000017 Scotland / S92000003Inverclyde / S12000018 Scotland / S92000003Midlothian / S12000019 Scotland / S92000003Moray / S12000020 Scotland / S92000003North Ayrshire / S12000021 Scotland / S92000003Orkney Islands / S12000023 Scotland / S92000003Scottish Borders / S12000026 Scotland / S92000003Shetland Islands / S12000027 Scotland / S92000003South Ayrshire / S12000028 Scotland / S92000003South Lanarkshire / S12000029 Scotland / S92000003Stirling / S12000030 Scotland / S92000003Aberdeen City / S12000033 Scotland / S92000003Aberdeenshire / S12000034 Scotland / S92000003Argyll and Bute / S12000035 Scotland / S92000003City of Edinburgh / S12000036 Scotland / S92000003Renfrewshire / S12000038 Scotland / S92000003West Dunbartonshire / S12000039 Scotland / S92000003West Lothian / S12000040 Scotland / S92000003Angus / S12000041 Scotland / S92000003Dundee City / S12000042 Scotland / S92000003East Dunbartonshire / S12000045 Scotland / S92000003Fife / S12000047 Scotland / S92000003Perth and Kinross / S12000048 Scotland / S92000003Glasgow City / S12000049 Scotland / S92000003North Lanarkshire / S12000050 Scotland / S92000003Isle of Anglesey / W06000001 Wales / W92000004Gwynedd / W06000002 Wales / W92000004Conwy / W06000003 Wales / W92000004Denbighshire / W06000004 Wales / W92000004Flintshire / W06000005 Wales / W92000004Wrexham / W06000006 Wales / W92000004Ceredigion / W06000008 Wales / W92000004Pembrokeshire / W06000009 Wales / W92000004Carmarthenshire / W06000010 Wales / W92000004Swansea / W06000011 Wales / W92000004Neath Port Talbot / W06000012 Wales / W92000004Bridgend / W06000013 Wales / W92000004Vale of Glamorgan / W06000014 Wales / W92000004Cardiff / W06000015 Wales / W92000004Rhondda Cynon Taf / W06000016 Wales / W92000004Caerphilly / W06000018 Wales / W92000004Blaenau Gwent / W06000019 Wales / W92000004Torfaen / W06000020 Wales / W92000004Monmouthshire / W06000021 Wales / W92000004Newport / W06000022 Wales / W92000004Powys / W06000023 Wales / W92000004Merthyr Tydfil / W06000024 Wales / W92000004
South West
South East
London
East of England
East Midlands
West Midlands
Wales
Yorks and the Humber
North West
North East
Northern Ireland
Scotland

This example was made with config:

YAML 
data: test.data.uk_local_authorities_2023
columns:
  - name: Tooltip
    template: |-
      {{ geojson.properties.LAD23NM }} / {{ geojson.properties.LAD23CD }}
      {{ region }} / {{ region code }}
geojson:
  key: LAD23CD
  data: geojson.Local_Authority_Districts_(May_2023)_UK_BUC
projection:
  name: osgb
layers:
  - type: graticule
    step:
      - 1
      - 1
  - type: data
    key: code
    tooltip: Tooltip
bounds:
  lat:
    min: 49.75
    max: 61.01
  lon:
    min: -8
    max: 3
legend:
  position: bottom
  items:
    - label: Scotland
      colour: '#2254F4'
    - label: Northern Ireland
      colour: '#722EA5'
    - label: North East
      colour: '#D60303'
    - label: North West
      colour: '#1DD3A7'
    - label: Yorks and the Humber
      colour: '#F9BC26'
    - label: Wales
      colour: '#0DBC37'
    - label: West Midlands
      colour: '#E6007C'
    - label: East Midlands
      colour: '#00B6FF'
    - label: East of England
      colour: '#FF6700'
    - label: London
      colour: '#D73058'
    - label: South East
      colour: '#67E767'
    - label: South West
      colour: '#178CFF'
JSON 
{
	"data": "test.data.uk_local_authorities_2023",
	"columns": [{
			"name": "Tooltip",
			"template": "{{ geojson.properties.LAD23NM }} / {{ geojson.properties.LAD23CD }}\n{{ region }} / {{ region code }}"
		}],
	"geojson": {
		"key": "LAD23CD",
		"data": "geojson.Local_Authority_Districts_(May_2023)_UK_BUC"
	},
	"projection": {
		"name": "osgb"
	},
	"layers": [{
			"type": "graticule",
			"step": [
				1,
				1
			]
		},{
			"type": "data",
			"key": "code",
			"tooltip": "Tooltip"
		}],
	"bounds": {
		"lat": {
			"min": 49.75,
			"max": 61.01
		},
		"lon": {
			"min": -8,
			"max": 3
		}
	},
	"legend": {
		"position": "bottom",
		"items": [{
				"label": "Scotland",
				"colour": "#2254F4"
			},{
				"label": "Northern Ireland",
				"colour": "#722EA5"
			},{
				"label": "North East",
				"colour": "#D60303"
			},{
				"label": "North West",
				"colour": "#1DD3A7"
			},{
				"label": "Yorks and the Humber",
				"colour": "#F9BC26"
			},{
				"label": "Wales",
				"colour": "#0DBC37"
			},{
				"label": "West Midlands",
				"colour": "#E6007C"
			},{
				"label": "East Midlands",
				"colour": "#00B6FF"
			},{
				"label": "East of England",
				"colour": "#FF6700"
			},{
				"label": "London",
				"colour": "#D73058"
			},{
				"label": "South East",
				"colour": "#67E767"
			},{
				"label": "South West",
				"colour": "#178CFF"
			}]
	}
}