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

Zoomable map Since 0.7.0

A simple, zoomable, slippy map.

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.zoomable', { "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.
  • 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:
    • tile - Set a tile layer. If your tile layer is on top of other layers it may hide them (unless it consists of transparent label tiles):
      • props - One of CartoDB.Positron, CartoDB.PositronOnlyLabels, CartoDB.DarkMatter, CartoDB.DarkMatterNoLabels, CartoDB.DarkMatterOnlyLabels, CartoDB.Voyager, CartoDB.VoyagerNoLabels, CartoDB.VoyagerOnlyLabels, ESRI.WorldImagery, OpenStreetMap.Mapnik, Stadia.OSMBright but you can also define your own site-wide tileLayer defaults.
    • 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.
    • 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.
  • mapAttribution - Add some text before the tileset credit.
  • 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 the opacity of the data layer
  5. Add a legend
  6. Custom tooltips
  7. Place labels
  8. Map markers
  9. Use a different background tile set
  10. Add a background
  11. Add tile layers on top of the data layer
  12. Display a line
  13. Out of this world example

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.

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
mapAttribution: OI
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",
	"mapAttribution": "OI"
}

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.

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
mapAttribution: OI
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",
	"mapAttribution": "OI"
}

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.

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
mapAttribution: OI
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",
	"mapAttribution": "OI"
}

4. Set the 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).

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
options:
  fillOpacity: 0.5
tooltip: LAD21NM
mapAttribution: OI
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",
	"options": {
		"fillOpacity": 0.5
	},
	"tooltip": "LAD21NM",
	"mapAttribution": "OI"
}

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 right") and add items to the legend. Each item has a value and label although the label can be empty.

160k
80k
0

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
columns:
  - name: Tooltip label
    template: >-
      Aged 15 and under<br />{{ LAD21NM }}: {{ Aged 15 years and under |
      toLocaleString() }}
key: LAD21CD
tooltip: Tooltip label
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'
mapAttribution: OI
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"
	},
	"columns": [{
			"name": "Tooltip label",
			"template": "Aged 15 and under<br />{{ LAD21NM }}: {{ Aged 15 years and under | toLocaleString() }}"
		}],
	"key": "LAD21CD",
	"tooltip": "Tooltip label",
	"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"
			}]
	},
	"mapAttribution": "OI"
}

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)

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: >-
      Aged 15 and under<br />{{ LAD21NM }}: {{ Aged 15 years and under |
      toLocaleString() }}
key: LAD21CD
tooltip: Tooltip label
value: colour
mapAttribution: OI
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": "Aged 15 and under<br />{{ LAD21NM }}: {{ Aged 15 years and under | toLocaleString() }}"
		}],
	"key": "LAD21CD",
	"tooltip": "Tooltip label",
	"value": "colour",
	"mapAttribution": "OI"
}

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

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

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
    colour: '#722EA5'
    border: '#1DD3A7'
    font-weight: bold
  - 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
mapAttribution: OI
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,
			"colour": "#722EA5",
			"border": "#1DD3A7",
			"font-weight": "bold"
		},{
			"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"
		}],
	"mapAttribution": "OI"
}

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.

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
mapAttribution: OI
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
		}],
	"mapAttribution": "OI"
}

9. Use a different background tile set§

Embeddable version

This example is similar to an earlier one but we set the tileLayer to CartoDB.DarkMatter. The built-in options include: CartoDB.Positron, CartoDB.PositronNoLabels, CartoDB.PositronOnlyLabels, CartoDB.DarkMatter, CartoDB.DarkMatterNoLabels, CartoDB.DarkMatterOnlyLabels, CartoDB.Voyager, CartoDB.VoyagerNoLabels, CartoDB.VoyagerOnlyLabels, ESRI.WorldImagery, OpenStreetMap.Mapnik, Stadia.OSMBright but you can also define your own site-wide tileLayer defaults.

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
tileLayer: CartoDB.DarkMatter
mapAttribution: OI
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",
	"tileLayer": "CartoDB.DarkMatter",
	"mapAttribution": "OI"
}

10. 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 map will also depend on the aspect ratio that the map ends up on the end-user's display.

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
mapAttribution: OI
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
		}
	},
	"mapAttribution": "OI"
}

11. Add tile layers on top of the data layer§

Embeddable version

There may be times when you want to add a tile layer on top of the data layer e.g. if you want to add a tile-based label layer. To do this you should explictly set the order of your layers so that the label tile layer comes after the data layer.

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
layers:
  - type: tile
    props: CartoDB.VoyagerNoLabels
  - type: data
    key: code
    value: Aged 15 years and under
    scale: Viridis
    tooltip: LAD21NM
  - type: tile
    props: CartoDB.VoyagerOnlyLabels
bounds:
  lat:
    min: 53.3
    max: 54.45
  lon:
    min: -3
    max: -0.3
mapAttribution: OI
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"
	},
	"layers": [{
			"type": "tile",
			"props": "CartoDB.VoyagerNoLabels"
		},{
			"type": "data",
			"key": "code",
			"value": "Aged 15 years and under",
			"scale": "Viridis",
			"tooltip": "LAD21NM"
		},{
			"type": "tile",
			"props": "CartoDB.VoyagerOnlyLabels"
		}],
	"bounds": {
		"lat": {
			"min": 53.3,
			"max": 54.45
		},
		"lon": {
			"min": -3,
			"max": -0.3
		}
	},
	"mapAttribution": "OI"
}

12. Display a line Since 0.16.1§

Embeddable version

So far we've been showing polygons but we can also show lines. Here's the routes of power transmission lines in the UK

110kV
132kV
220kV
275kV
320kV
400kV

This example was made with config:

YAML 
data:
  - voltage: '110000'
    name: 110kV
  - voltage: '132000'
    name: 132kV
  - voltage: '220000'
    name: 220kV
  - voltage: '275000'
    name: 275kV
  - voltage: '320000'
    name: 320kV
  - voltage: '400000'
    name: 400kV
geojson:
  data: geojson.HVPowerRoutesSimplified
  key: voltage
key: voltage
height: 1200
legend:
  position: top
  items:
    - label: 400kV
      colour: '#aa014c'
    - label: 320kV
      colour: '#cc6793'
    - label: 275kV
      colour: '#d7501d'
    - label: 220kV
      colour: '#df7349'
    - label: 132kV
      colour: '#Feb300'
    - label: 110kV
      colour: '#fec333'
options:
  weight: 2
  opacity: 1
tooltip: name
columns:
  - name: colour
    template: '{{ geojson.properties.stroke }}'
bounds:
  lat:
    min: 50
    max: 60
  lon:
    min: -10
    max: 2
mapAttribution: OpenStreetMap (ODbL)
JSON 
{
	"data": [{
			"voltage": "110000",
			"name": "110kV"
		},{
			"voltage": "132000",
			"name": "132kV"
		},{
			"voltage": "220000",
			"name": "220kV"
		},{
			"voltage": "275000",
			"name": "275kV"
		},{
			"voltage": "320000",
			"name": "320kV"
		},{
			"voltage": "400000",
			"name": "400kV"
		}],
	"geojson": {
		"data": "geojson.HVPowerRoutesSimplified",
		"key": "voltage"
	},
	"key": "voltage",
	"height": 1200,
	"legend": {
		"position": "top",
		"items": [{
				"label": "400kV",
				"colour": "#aa014c"
			},{
				"label": "320kV",
				"colour": "#cc6793"
			},{
				"label": "275kV",
				"colour": "#d7501d"
			},{
				"label": "220kV",
				"colour": "#df7349"
			},{
				"label": "132kV",
				"colour": "#Feb300"
			},{
				"label": "110kV",
				"colour": "#fec333"
			}]
	},
	"options": {
		"weight": 2,
		"opacity": 1
	},
	"tooltip": "name",
	"columns": [{
			"name": "colour",
			"template": "{{ geojson.properties.stroke }}"
		}],
	"bounds": {
		"lat": {
			"min": 50,
			"max": 60
		},
		"lon": {
			"min": -10,
			"max": 2
		}
	},
	"mapAttribution": "OpenStreetMap (ODbL)"
}

13. Out of this world example§

Embeddable version

Let's journey to Mars. This example is inspired by maps by 65dBnoise and shows locations in Kim Stanley Robinson's "Mars Trilogy".

The first thing we need to do is change the tileLayer so that we are using martian tiles from OpenPlanetaryMap. The tileLayer must have a url defined which should be the URL of some XYZ raster tiles. Make sure that the domain has CORS enabled otherwise the tiles may not load. We can now add a bunch of markers to the map using martian latitude/longitude.

This example was made with config:

YAML 
key: code
tooltip: name
tileLayer:
  url: >-
    https://cartocdn-gusc.global.ssl.fastly.net/opmbuilder/api/v1/map/named/opm-mars-basemap-v0-2/all/{z}/{x}/{y}.png
  attribution: >-
    Tiles &copy; <a
    href="https://www.openplanetary.org/opm-basemaps/opm-mars-basemap-v0-2">OpenPlanetaryMap</a>
markers:
  - icon: circle
    tooltip: Underhill<br />2027
    latitude: -1
    longitude: -72
  - icon: pentagon
    tooltip: Zygote<br />2030s
    latitude: -85
    longitude: 104
  - icon: pentagon
    tooltip: Burrows<br />2040s
    latitude: 12
    longitude: 76
  - icon: pentagon
    tooltip: Acheron<br />2040s
    latitude: 38
    longitude: -147
  - icon: pentagon
    tooltip: Sheffield<br />2040s
    latitude: 0.7
    longitude: -108
  - icon: pentagon
    tooltip: Senzeni Na<br />2040s
    latitude: -43
    longitude: -84
  - icon: pentagon
    tooltip: Nicosia<br />2056
    latitude: -6
    longitude: -103
  - icon: circle
    tooltip: Sabishii<br />2040s
    latitude: -9
    longitude: 96
  - icon: pentagon
    tooltip: Cairo<br />Declared neutral in 2061
    latitude: -2.5
    longitude: -79
  - icon: pentagon
    tooltip: Christianopolis ?
    latitude: -21
    longitude: -12
  - icon: pentagon
    tooltip: Bakhuysen
    latitude: -15
    longitude: 53
  - icon: pentagon
    tooltip: Rumi ? (Soufi)
    latitude: -39
    longitude: 35
  - icon: pentagon
    tooltip: Polynesians
    latitude: -78
    longitude: 276
  - icon: pentagon
    tooltip: Bologna
    latitude: -78
    longitude: 291
  - icon: pentagon
    tooltip: Mangala
    latitude: 51
    longitude: -7
  - icon: pentagon
    tooltip: Lyell
    latitude: -70
    longitude: -11
  - icon: circle
    tooltip: Lakefront
    latitude: -34
    longitude: 66
  - icon: circle
    tooltip: Industrial hartland
    latitude: -74.7
    longitude: 67
  - icon: circle
    tooltip: Bradbury Point
    latitude: 35
    longitude: 83
  - icon: circle
    tooltip: Arena
    latitude: 19
    longitude: 70
  - icon: star
    tooltip: Space elevator<br />2057
    latitude: 0.6
    longitude: -112.8
  - icon:
      svg: >-
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
        fill="currentColor" class="bi bi-airplane-fill" viewBox="0 0 16
        16"><path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572
        1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83
        1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0
        1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5
        0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6
        6.691V3c0-.568.14-1.271.428-1.849Z"/></svg>
      size:
        - 20
        - 20
      anchor:
        - 10
        - 10
    tooltip: Peter's airport
    latitude: -52
    longitude: 110
mapAttribution: OI
JSON 
{
	"key": "code",
	"tooltip": "name",
	"tileLayer": {
		"url": "https://cartocdn-gusc.global.ssl.fastly.net/opmbuilder/api/v1/map/named/opm-mars-basemap-v0-2/all/{z}/{x}/{y}.png",
		"attribution": "Tiles &copy; <a href=\"https://www.openplanetary.org/opm-basemaps/opm-mars-basemap-v0-2\">OpenPlanetaryMap</a>"
	},
	"markers": [{
			"icon": "circle",
			"tooltip": "Underhill<br />2027",
			"latitude": -1,
			"longitude": -72
		},{
			"icon": "pentagon",
			"tooltip": "Zygote<br />2030s",
			"latitude": -85,
			"longitude": 104
		},{
			"icon": "pentagon",
			"tooltip": "Burrows<br />2040s",
			"latitude": 12,
			"longitude": 76
		},{
			"icon": "pentagon",
			"tooltip": "Acheron<br />2040s",
			"latitude": 38,
			"longitude": -147
		},{
			"icon": "pentagon",
			"tooltip": "Sheffield<br />2040s",
			"latitude": 0.7,
			"longitude": -108
		},{
			"icon": "pentagon",
			"tooltip": "Senzeni Na<br />2040s",
			"latitude": -43,
			"longitude": -84
		},{
			"icon": "pentagon",
			"tooltip": "Nicosia<br />2056",
			"latitude": -6,
			"longitude": -103
		},{
			"icon": "circle",
			"tooltip": "Sabishii<br />2040s",
			"latitude": -9,
			"longitude": 96
		},{
			"icon": "pentagon",
			"tooltip": "Cairo<br />Declared neutral in 2061",
			"latitude": -2.5,
			"longitude": -79
		},{
			"icon": "pentagon",
			"tooltip": "Christianopolis ?",
			"latitude": -21,
			"longitude": -12
		},{
			"icon": "pentagon",
			"tooltip": "Bakhuysen",
			"latitude": -15,
			"longitude": 53
		},{
			"icon": "pentagon",
			"tooltip": "Rumi ? (Soufi)",
			"latitude": -39,
			"longitude": 35
		},{
			"icon": "pentagon",
			"tooltip": "Polynesians",
			"latitude": -78,
			"longitude": 276
		},{
			"icon": "pentagon",
			"tooltip": "Bologna",
			"latitude": -78,
			"longitude": 291
		},{
			"icon": "pentagon",
			"tooltip": "Mangala",
			"latitude": 51,
			"longitude": -7
		},{
			"icon": "pentagon",
			"tooltip": "Lyell",
			"latitude": -70,
			"longitude": -11
		},{
			"icon": "circle",
			"tooltip": "Lakefront",
			"latitude": -34,
			"longitude": 66
		},{
			"icon": "circle",
			"tooltip": "Industrial hartland",
			"latitude": -74.7,
			"longitude": 67
		},{
			"icon": "circle",
			"tooltip": "Bradbury Point",
			"latitude": 35,
			"longitude": 83
		},{
			"icon": "circle",
			"tooltip": "Arena",
			"latitude": 19,
			"longitude": 70
		},{
			"icon": "star",
			"tooltip": "Space elevator<br />2057",
			"latitude": 0.6,
			"longitude": -112.8
		},{
			"icon": {
				"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-airplane-fill\" viewBox=\"0 0 16 16\"><path d=\"M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z\"/></svg>",
				"size": [
					20,
					20
				],
				"anchor": [
					10,
					10
				]
			},
			"tooltip": "Peter's airport",
			"latitude": -52,
			"longitude": 110
		}],
	"mapAttribution": "OI"
}