3D map

Map for displaying regions, lines and points with optional time slider

Updated 2 years ago to v9.1.4 by Flourish team

How to use this template

Use this template for visualizing large geographic datasets over time. You can input any data with locations in latitude and longitude format as well as GeoJSON regions and polyline features, but it becomes especially powerful with data including timestamps, such as website traffic or financial transactions. Events are shown as pulses on an interactive map, optionally scaled and coloured based on the data.

In addition to the points layer, you can also add GeoJSON regions to this template. This is useful if you'd like to add (optionally extruded) regions on top of a base map along with your points.

How to get started with a 3D point map

For creating a point map, at a minimum, you just need a spreadsheet of points with columns for latitude and longitude:

latitude	longitude
-6.081689835	145.3919983
-5.207079887	145.7890015
-5.826789856	144.2960052

This will display points on the map, but the timeline will be hidden without a Start time binding for your points. Be sure to set the date format in the "Points" section of the settings panel so that it matches your data. Keep in mind you can also overwrite the date format by using d3-time-format syntax.

timestamp
2019-04-17T06:53:30.000Z
2019-04-17T08:33:30.000Z
2019-04-17T09:28:30.000Z

The following bindings are also available:

Counter category: Used to categorize points, and to determine their color when using a categorical color palette.
Counter value: Determines how much each row is counted for by the counter. If not bound to a column, each row's count is treated as one.
End time: the end time of the event in the same format as the main timestamp.
Scale: numerical data, used to determine the scale at which to draw the event.
Animation group: Use this to animate points between different values at different times in the timeline. Rows with the same content will animate from one set of values to another based on their start time.
Extra info for popups: One or more columns to show in the popups.
Label: Labels to display next to the points.

In addition to displaying your data as a point map, you can choose to visualize the points as a heatmap. Learn more about this in our help doc.

How to get started with a 3D regions map

If you would like to have a regions layer, upload your regins to the Regions tab and make sure your Geometry and Name columns are bound. You can learn more about this here.

TIP: Struggling to find the right regions for your map? Check out our GeoJSON repository where we've sourced, checked, and resized various region files ready for you to download and use in Flourish.

You can also supply the following information in your Regions layer:

Value: Used to shade regions by a numerical value. Used with a sequential or diverging color palette.
Height: Used to extrude regions by a numerical value.
Category: Used to shade regions by a categorical value. Used with a categorical color
Metadata for popups: One or more columns to show in the popups.

TIP: To extrude your regions by a value in your data, you can add a Height column binding and extrude them in the Regions settings. Learn more about this in this help doc.

How to get started with a 3D lines map

Just like your regions, your lines can be supplied in GeoJSON format. In addition to Polygons and MultiPolygons which are used in the Regions sheet, the GeoJSON uploaded to the Lines sheet can also contain Line and MultiLine features. If you upload Polygons or MultiPolygons to the Lines sheet, they won't have a fill and will look like closed lines. That means you can upload any regions to your Lines sheet and they will be rendered as lines.

You can also supply the following information in your Lines layer:

Series: Used to describe the type of line. You may want to include both rivers and borders on your map. This binding lets you distinguish between the types of lines and will allow you to style them differently later on.

Customizing the inset map

The inset map helps the viewer put the current map view in the context of a larger area: a country in the context of the world, say, or a city in the context of a country. By default, if enabled, the inset map shows a globe. But you can set the map to show any region you like by uploading one or more regions (in GeoJSON format) to the "Inset map regions" data sheet. Alternatively, if you just want one or more countries, you can copy the relevant row(s) from Regions datasheet of our Projection Map template.

Not sure how to upload your data to Flourish? See our handy guide

FAQ

I don't have lat or lng locations, only place names You'll need to geocode your data. Various online tools, for example latlong.net, can help with this.

How do I reset the initial zoom and centre of the map? The map automatically sets its initial zoom and centre to contain all your points. If you want to override this you have two options. First: restrict the bounds of the map (under Base Map > Viewport). Second, create a story: hit the "Create a story" button and drag the map into whatever zoom/pan state you like, and it will be automatically saved. If you don't want the navigation bar at the top, choose "None" from the "Navigation" menu. You can learn more about stories here.

How can I tell a story with my map? If you'd like to give the audience a tour of the data and highlight different locations or regions one by one, create a Flourish story from your visualization, then add multiple slides to highlight different places. You can learn more about this here.

Credits

Created by the Flourish team, using open source tools including twemoji by Twitter under CC-BY 4.0, regl and mapbox-gl-js.

The default data comes from the World Bank and is licensed under CC-BY 4.0.

API information

This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.

template: @flourish/time-map

version: 9

Template `data`

There are three different formats in which you can supply data to this template. The most convenient for you to use likely depends on the source of your data, as described below.

1. Array of arrays, and a bindings object

You can supply arrays of arrays to opts.data, which might look like:

{
    data: {
        regions_map: [
            [ "Regions_mapColumn1Value1", "Regions_mapColumn2Value1",
            [ "Regions_mapColumn1Value2", "Regions_mapColumn2Value2",
            [ "Regions_mapColumn1Value3", "Regions_mapColumn2Value3",
            ...
        ],
        events: [
            [ "EventsColumn1Value1", "EventsColumn2Value1",
            [ "EventsColumn1Value2", "EventsColumn2Value2",
            [ "EventsColumn1Value3", "EventsColumn2Value3",
            ...
        ],
        lines: [
            [ "LinesColumn1Value1", "LinesColumn2Value1",
            [ "LinesColumn1Value2", "LinesColumn2Value2",
            [ "LinesColumn1Value3", "LinesColumn2Value3",
            ...
        ],
        regions: [
            [ "RegionsColumn1Value1", "RegionsColumn2Value1",
            [ "RegionsColumn1Value2", "RegionsColumn2Value2",
            [ "RegionsColumn1Value3", "RegionsColumn2Value3",
            ...
        ]
    }
}

where each array of arrays represents the rows in a data sheet.

To tell the API how the values from each column should be associated with the keys that the template is expecting, you must also supply an object attached to opts.bindings. (The meanings of the keys in the bindings object are documented below.) The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@flourish/time-map",
    version: "9",
    bindings: {
        regions_map: {
            
        },
        events: {
            lat: 0, // index of a column in your data
            lon: 1, // index of a column in your data
        },
        lines: {
            
        },
        regions: {
            
        }
    },
    data: {
        regions_map: [
            [ "Regions_mapColumn1Value1", "Regions_mapColumn2Value1",
            [ "Regions_mapColumn1Value2", "Regions_mapColumn2Value2",
            [ "Regions_mapColumn1Value3", "Regions_mapColumn2Value3",
            ...
        ],
        events: [
            [ "EventsColumn1Value1", "EventsColumn2Value1",
            [ "EventsColumn1Value2", "EventsColumn2Value2",
            [ "EventsColumn1Value3", "EventsColumn2Value3",
            ...
        ],
        lines: [
            [ "LinesColumn1Value1", "LinesColumn2Value1",
            [ "LinesColumn1Value2", "LinesColumn2Value2",
            [ "LinesColumn1Value3", "LinesColumn2Value3",
            ...
        ],
        regions: [
            [ "RegionsColumn1Value1", "RegionsColumn2Value1",
            [ "RegionsColumn1Value2", "RegionsColumn2Value2",
            [ "RegionsColumn1Value3", "RegionsColumn2Value3",
            ...
        ]
    }
}

All possible bindings that you can supply are shown in this example:

{
    template: "@flourish/time-map",
    version: "9",
    bindings: {
        regions_map: {
            geojson: 0, // index of a column in your data
            name: 1, // index of a column in your data
            value: [2, 3, ...], // index(es) of column(s) in your data
            height: 4, // index of a column in your data
            category: 5, // index of a column in your data
            metadata: [6, 7, ...], // index(es) of column(s) in your data
        },
        events: {
            lat: 0, // index of a column in your data
            lon: 1, // index of a column in your data
            scale: 2, // index of a column in your data
            color: 3, // index of a column in your data
            start_timestamp: 4, // index of a column in your data
            end_timestamp: 5, // index of a column in your data
            group: 6, // index of a column in your data
            category: 7, // index of a column in your data
            count: 8, // index of a column in your data
            metadata: [9, 10, ...], // index(es) of column(s) in your data
            label: 11, // index of a column in your data
        },
        lines: {
            geojson: 0, // index of a column in your data
            series: 1, // index of a column in your data
        },
        regions: {
            geojson: 0, // index of a column in your data
        }
    },
    data: {
        regions_map: [
            [ "Regions_mapColumn1Value1", "Regions_mapColumn2Value1",
            [ "Regions_mapColumn1Value2", "Regions_mapColumn2Value2",
            [ "Regions_mapColumn1Value3", "Regions_mapColumn2Value3",
            ...
        ],
        events: [
            [ "EventsColumn1Value1", "EventsColumn2Value1",
            [ "EventsColumn1Value2", "EventsColumn2Value2",
            [ "EventsColumn1Value3", "EventsColumn2Value3",
            ...
        ],
        lines: [
            [ "LinesColumn1Value1", "LinesColumn2Value1",
            [ "LinesColumn1Value2", "LinesColumn2Value2",
            [ "LinesColumn1Value3", "LinesColumn2Value3",
            ...
        ],
        regions: [
            [ "RegionsColumn1Value1", "RegionsColumn2Value1",
            [ "RegionsColumn1Value2", "RegionsColumn2Value2",
            [ "RegionsColumn1Value3", "RegionsColumn2Value3",
            ...
        ]
    }
}

2. Array of objects with arbitrary keys, and a bindings object

This format is most likely useful when you have data from an external source, such as CSV data loaded from d3-dsv. You should supply this attached to the opts.data, which might look like:

{
        regions_map: [
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            ...
        ],
        events: [
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            ...
        ],
        lines: [
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            ...
        ],
        regions: [
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            ...
        ]
    }

... but with the keys being the column headers from your source data instead. You must also supply an object attached to opts.bindings. The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@flourish/time-map",
    version: "9",
    bindings: {
        regions_map: {
            
        },
        events: {
            lat: "EventsHeader1",
            lon: "EventsHeader2",
        },
        lines: {
            
        },
        regions: {
            
        }
    },
    data: {
        regions_map: [
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            ...
        ],
        events: [
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            ...
        ],
        lines: [
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            ...
        ],
        regions: [
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            ...
        ]
    }
}

All possible bindings that you can supply are shown in this example:

{
    template: "@flourish/time-map",
    version: "9",
    bindings: {
        regions_map: {
            geojson: "Regions_mapHeader1",
            name: "Regions_mapHeader2",
            value: ["Regions_mapHeader3", "Regions_mapHeader4", ...],
            height: "Regions_mapHeader5",
            category: "Regions_mapHeader6",
            metadata: ["Regions_mapHeader7", "Regions_mapHeader8", ...],
        },
        events: {
            lat: "EventsHeader1",
            lon: "EventsHeader2",
            scale: "EventsHeader3",
            color: "EventsHeader4",
            start_timestamp: "EventsHeader5",
            end_timestamp: "EventsHeader6",
            group: "EventsHeader7",
            category: "EventsHeader8",
            count: "EventsHeader9",
            metadata: ["EventsHeader10", "EventsHeader11", ...],
            label: "EventsHeader12",
        },
        lines: {
            geojson: "LinesHeader1",
            series: "LinesHeader2",
        },
        regions: {
            geojson: "RegionsHeader1",
        }
    },
    data: {
        regions_map: [
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            { "Regions_mapHeader1": ..., "Regions_mapHeader2": ..., ... },
            ...
        ],
        events: [
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            { "EventsHeader1": ..., "EventsHeader2": ..., ... },
            ...
        ],
        lines: [
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            { "LinesHeader1": ..., "LinesHeader2": ..., ... },
            ...
        ],
        regions: [
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            { "RegionsHeader1": ..., "RegionsHeader2": ..., ... },
            ...
        ]
    }
}

(As before, the keys containing "Header" would be replaced by column names from your data source.)

3. Array of objects with template-defined keys

There is an alternative format you can use, which is likely to be easier to use if your data is not from a spreadsheet source. With this alternative format you supply your data to the template as an array of objects, attached to opts.data, where the keys must be those used by the template, as documented below. In this case there is no need to supply a bindings object, since the key names are already those expected by the template. The required properties in the data object are as follows (scroll down for a description of what each property is):

{
    template: "@flourish/time-map",
    version: "9",
    data: {
    regions_map: [
        {
            value: [...],
            metadata: [...]
        },
        ...
    ],
    events: [
        {
            lat: ...,
            lon: ...,
            metadata: [...]
        },
        ...
    ]
},
    ...
}

And the full list of all possible properties is as follows:

{
    template: "@flourish/time-map",
    version: "9",
    data: {
    regions_map: [
        {
            geojson: ...,
            name: ...,
            value: [...],
            height: ...,
            category: ...,
            metadata: [...]
        },
        ...
    ],
    events: [
        {
            lat: ...,
            lon: ...,
            scale: ...,
            color: ...,
            start_timestamp: ...,
            end_timestamp: ...,
            group: ...,
            category: ...,
            count: ...,
            metadata: [...],
            label: ...
        },
        ...
    ],
    lines: [
        {
            geojson: ...,
            series: ...
        },
        ...
    ],
    regions: [
        {
            geojson: ...
        },
        ...
    ]
},
    ...
}

Meanings of the template data keys:

regions_map.geojson: geojson
regions_map.name: The name that appears in popups and panels.
regions_map.value: value
regions_map.height: A numerical column to extrude your regions by.
regions_map.category: category
regions_map.metadata: metadata
events.lat: lat
events.lon: lon
events.scale: Determines the size of the circles.
events.color: Determines the color of the circles.
events.start_timestamp: Determines when the circles appear. If left blank all the points will appear at once. If selected, creates a timeline and shows dots over time. The date format must be specified in the settings panel.
events.end_timestamp: Determines when the circles disappear. If not specified the circle remains for the default duration specified in the settings panel.
events.group: Use this to animate points between different values at different times in the timeline. Rows with the same content will animate from one set of values to another based on their start time.
events.category: Used to categorise points, and to determine their color when using a categorical color palette.
events.count: Determines how much each row is counted for by the counter. If not bound to a column, each row's count is treated as one.
events.metadata: One or more columns to show in the popups
events.label: label
lines.geojson: Columns containing GeoJSON geometry that describe a line (typically geometry type will be Line and MultiLine, but you can also use MultiPolygon or Polygon).
lines.series: Values in the selected column can be used to define specific color and line styles in the settings panel.
regions.geojson: geojson

Template `settings`

Options for opts.state.

Base map

`map.map_type` string

Map type.

Allowed values:

tiles (Vector)
raster (Raster)
projection (Projection)

`map.style_enabled` boolean

Background map.

Allowed values:

true (Enabled)
false (Disabled)

`map.style_base` string

Map style.

Allowed values:

flourish-light (Flourish Light)
flourish-dark (Flourish Dark)
flourish-2-tone (Flourish 2-Tone)
positron (Positron)
osm-bright (OSM Bright)
klokantech-basic (Klokantech Basic)
klokantech-3d (Klokantech 3D)
fiord-color (Fiord)
toner (Toner)
dark-matter (Dark Matter)
custom-monochrome (Custom: Monochrome)
custom-palette (Custom: Palette)
custom-json (Custom: JSON)

`map.style_custom_enabled` boolean

Customize layers.

`map.style_monochrome_color` color

Map base color.

`map.style_custom_toner.primary` color

Primary.

`map.style_custom_toner.secondary` color

Secondary.

`map.style_custom_json` code

Custom JSON style data. Include your own custom mapbox-gl-js style for full control over your maps' appearance. Note that we use tiles that match the OpenMapTiles schema, so it's recommended that you use Maputnik to create your styles.

`map.style_custom_palette.ground` color

Ground.

`map.style_custom_palette.ocean` color

Ocean.

`map.style_custom_palette.grass` color

Nature.

`map.style_custom_palette.buildings` color

Buildings.

`map.style_custom_palette.road` color

Roads.

`map.style_custom_palette.road_outline` color

Road outlines.

`map.style_custom_palette.text_fill` color

Text.

`map.style_custom_palette.text_opacity` number

Text opacity.

Max: 1

`map.style_custom_palette.text_stroke` color

Text outlines.

`map.style_custom_palette.halo_opacity` number

Outline opacity.

Max: 1

`map.style_custom_palette.border` color

State/national borders.

`map.style_font_face` string

Font override. Replace the map's default fonts with a font of your choice.

Allowed values:

none (None)
layout (Use layout settings)
Cabin Sketch
Coda
Fira Mono
Lobster
Lora
Merriweather
Metropolis
Montserrat
Noto Sans
Nunito
Open Sans
Oswald
Overpass Mono
Playfair Display
PT Sans Narrow
PT Sans Caption
PT Sans
Quicksand
Roboto Condensed
Roboto
Source Sans Pro

`map.style_font_weight` number

Weight.

Min: 100

Max: 900

`map.style_show_borders` boolean

Display borders.

`map.style_show_roads` boolean

Display transport.

`map.style_show_labels` boolean

Display labels.

`map.style_show_landuse` boolean

Display land use.

`map.style_show_water` boolean

Display water.

`map.projection_type` string

Projection.

Allowed values:

Albers (30° & 45°)
Albers USA
August
Azimuthal Equidistant
Aitoff
Baker
Boggs
Braun's Stereographic
Bromley
Craster Parabolic
Eckert I
Eckert II
Eckert III
Eckert IV
Eckert V
Eckert VI
Eisenlohr
Equirectangular
Fahey
Foucaut
Ginzburg IV
Ginzburg V
Ginzburg VI
Ginzburg VIII
Ginzburg IX
Gnomonic
Hammer
Kavrayskiy VII
McBryde–Thomas Flat-Polar Parabolic
McBryde–Thomas Flat-Polar Quartic
McBryde–Thomas Flat-Polar Sinusoidal
Miller (modified Mercator)
Mollweide
Natural Earth I
Natural Earth II
Orthographic
Robinson
Sinusoidal
Stereographic
Wagner IV
Wagner VI
Winkel Tripel

`map.projection_background_color` color

Background color.

`map.projection_ocean_color` color

Ocean color.

`map.style_raster.tile_url` string

Tile URL.

`map.style_raster.scheme` string

Tile scheme.

Allowed values:

xyz (Web Mercator (xyz))
tms (OSGeo (tms))

`map.style_raster.tile_size` string

Tile size.

Allowed values:

128 (128)
256 (256)
512 (512)
1024 (1024)

`map.style_raster.minzoom` number

Min. tile zoom.

Max: 22

`map.style_raster.maxzoom` number

Max. tile zoom.

Max: 22

`map.style_raster.attribution` text

Tile attribution.

`map.map_language_auto` boolean

Detect language. Automatically changes the language used on the base map to match the viewer's language settings.

`map.map_language_alts` boolean

Display alternatives. Whether or not to display latin alternatives for non-latin languages (or vice versa)

`map.map_language` string

Language.

Allowed values:

native (Local language)
ar (Arabic)
az (Azerbaijani)
be (Belarusian)
bg (Bulgarian)
br (Breton)
bs (Bosnian)
ca (Catalan)
cs (Czech)
cy (Welsh)
da (Danish)
de (German)
el (Greek)
en (English)
eo (Esperanto)
es (Spanish)
et (Estonian)
fi (Finnish)
fr (French)
fy (Western Frisian)
ga (Irish)
gd (Scottish Gaelic)
he (Hebrew)
hr (Croatian)
hu (Hungarian)
hy (Armenian)
is (Icelandic)
it (Italian)
ja (Japanese)
ja_kana (Japanese Kana form)
ja_rm (Romanization of Japanese)
ka (Georgian)
kk (Kazakh)
kn (Kannada)
ko (Korean)
ko_rm (Romanization of Korean)
la (Latin)
lb (Luxembourgish)
lt (Lithuanian)
lv (Latvian)
mk (Macedonian)
mt (Maltese)
ml (Malayalam)
nl (Dutch)
no (Norwegian)
pl (Polish)
pt (Portuguese)
rm (Romansh)
ro (Romania)
ru (Russian)
sk (Slovak)
sl (Slovene)
sq (Albanian)
sr (Serbian (Cyrillic))
sr-Latn (Serbian (Latin))
sv (Swedish)
th (Thai)
tr (Turkish)
uk (Ukrainian)
zh (Chinese)

`map.projection_longitude` number

Centre long..

`map.projection_latitude` number

Centre lat..

`map.projection_roll` number

Rotation.

Viewport and interaction

`map.map_initial_type` string

Initial viewport. By default, the initial viewport of the map is automatically set to include every visible object. The "centroid" option allows you to select a custom latitude, longitude and zoom. The "bounds" option lets you specify a custom bounding box for the viewport to enclose. Selecting "world" will display the whole world within the viewport, regardless of your data or settings.

Allowed values:

auto (Auto)
centroid_zoom (Centroid)
bounding_box (Bounds)
world (World)

`map.map_initial_pitch_tiles` number

Pitch. The amount of vertical rotation to apply to the map when it first loads. At zero the map will face completely top-down. Increasing the value to larger values will give the map the illusion of a 3D perspective.

Max: 60

`map.map_initial_bearing_tiles` number

Bearing. The direction the map should face when it first loads, in degrees. When set to zero the map will load facing north, at 180 the map will face south, and so on.

Min: -180

Max: 180

`map.map_initial_pitch_projection` number

Max: 60

`map.map_initial_bearing_projection` number

Bearing. The direction the map should face when it first loads, in degrees. When set to zero the map will load facing north, at 180 the map will face south, and so on.

Min: -180

Max: 180

`map.map_initial_padding` number

Padding. The amount of space you want around the edge of your data on the map.

Max: 10

`map.map_initial_lat` number

Latitude.

Min: -90

Max: 90

`map.map_initial_lng` number

Longitude.

Min: -180

Max: 180

`map.map_initial_zoom` number

Zoom.

Max: 22

`map.map_initial_bounds_lng_min` number

Min longitude.

Min: -180

Max: 180

`map.map_initial_bounds_lat_min` number

Min latitude.

Min: -90

Max: 90

`map.map_initial_bounds_lng_max` number

Max longitude.

Min: -180

Max: 180

`map.map_initial_bounds_lat_max` number

Max latitude.

Min: -90

Max: 90

`map.map_aspect_type` string

Resize by aspect ratio.

Allowed values:

none (None)
custom (Custom)

`map.map_aspect_w` number

Width.

Min: 1

`map.map_aspect_h` number

Height.

Min: 1

`map.map_zoom_min` number

Min zoom. Limit the map's zoom level so that the user cannot zoom out past a certain point.

Max: 22

`map.map_zoom_max` number

Max zoom. Limit the map's zoom level so that the user cannot zoom in past a certain point.

Max: 22

`map.map_bound_position` boolean

Limit viewport bounds. Enable this setting to restrict the viewport within a specific bounding box.

`map.map_lng_min` number

Min viewport longitude.

Min: -180

Max: 180

`map.map_lat_min` number

Min viewport latitude.

Min: -90

Max: 90

`map.map_lng_max` number

Max viewport longitude.

Min: -180

Max: 180

`map.map_lat_max` number

Max viewport latitude.

Min: -90

Max: 90

`map.map_render_world_copies` boolean

Repeat map horizontally. The map will display copies of the world on either side at higher zoom levels by default. Disable this if you would prefer only the one copy be visible.

`map.animation_enabled` boolean

Animate zoom & panning.

`map.animation_type` string

Animation type.

Allowed values:

speed (Speed)
duration (Duration)

`map.animation_duration` number

Duration (seconds).

Min: 0.01

Max: 60

`map.animation_speed` number

Speed.

Min: 0.01

Max: 4

`map.map_interactive` boolean

Allow user interaction.

`map.hijack_scroll` boolean

Require user to hold down cmd/ctrl to zoom. This is enabled by default to prevent the map interfering with navigation as the user scrolls through the page. You might want to enable it if the map fills the full page.

`map.controls_allow_rotation` boolean

Allow rotation.

`map.controls_geolocator_enabled` boolean

Use geolocator control.

`map.controls_geolocator_alignment` string

Geolocator control position.

Allowed values:

top-left (Top left)
top-right (Top right)
bottom-left (Bottom left)
bottom-right (Bottom right)

`map.controls_fullscreen_enabled` boolean

Use fullscreen control.

`map.controls_fullscreen_alignment` string

Fullscreen control position.

Allowed values:

top-left (Top left)
top-right (Top right)
bottom-left (Bottom left)
bottom-right (Bottom right)

Graticules

`map.graticules.enabled` boolean

Allowed values:

true (Enabled)
false (Disabled)

`map.graticules.color` color

Color.

`map.graticules.width` number

Width.

Max: 10

`map.graticules.opacity` number

Opacity.

Max: 100

`map.graticules.longitude_step` number

Longitude separation (°).

Max: 90

`map.graticules.latitude_step` number

Latitude separation (°).

Max: 90

Regions

`map.regions.extrude.enabled` boolean

Extrude regions.

`map.regions.extrude.min_height` number

Min height.

`map.regions.extrude.max_height` number

Max height.

`map.regions.colors.scale_type` string

Scale type.

Allowed values:

categorical (Categorical)
numeric (Numeric)

`map.regions.colors.categorical_palette` colors

Palette.

`map.regions.colors.categorical_extend` boolean

Extend. Automatically generate additional colours when needed to avoid the palette colours being used more than once.

`map.regions.colors.categorical_custom_palette` text

Custom overrides. Type the name of the entity whose colour you want to set, a colon and then a colour (using a name, hex-code or rgb declaration). Multiple colours can be set using multiple lines. For example:

Party 1: red
Party 2: #4455AA
Party 3: rgb(30,168,26)

`map.regions.colors.numeric_type` string

Scale type.

Allowed values:

sequential (Sequential)
diverging (Diverging)

`map.regions.colors.binning` boolean

In linear mode, the color scale will run as a smooth gradient between 2 colors. In binned mode, the gradient will be divided in smaller blocks.

Allowed values:

false (Linear)
true (Binned)

`map.regions.colors.bin_mode` string

Binning mode.

Allowed values:

fixed (Fixed width)
quantile (Quantile)
custom (Custom thresholds)

`map.regions.colors.bin_count` number

Number of bins.

`map.regions.colors.bin_thresholds` string

Custom thresholds. Write your custom thresholds, separated by a ";" For example 5;10;15

`map.regions.colors.sequential_palette` string

Palette.

Allowed values:

Oranges
Reds
Blues
Greens
Greys
Purples
Viridis
Inferno
Magma
Plasma
Warm
Cool
CubehelixDefault (Cubehelix)
BuGn (Blue/Green)
BuPu (Blue/Purple)
GnBu (Green/Blue)
OrRd (Orange/Red)
PuBuGn (Purple/Blue/Green)
PuBu (Purple/Blue)
PuRd (Purple/Red)
RdPu (Red/Purple)
YlGnBu (Yellow/Blue/Green)
YlGn (Yellow/Green)
YlOrBr (Yellow/Orange/Brown)
YlOrRd (Yellow/Orange/Red)
Carrots
Custom

`map.regions.colors.sequential_reverse` boolean

Reverse.

`map.regions.colors.sequential_custom_min` color

Minimum color.

`map.regions.colors.sequential_custom_max` color

Maximum color.

`map.regions.colors.sequential_color_space` string

Color space.

Allowed values:

rgb (RGB)
lab (LAB)
hcl (HCL)
hsl (HSL)

`map.regions.colors.sequential_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`map.regions.colors.sequential_domain_min` number

Min.

`map.regions.colors.sequential_domain_max` number

Max.

`map.regions.colors.diverging_palette` string

Palette.

Allowed values:

RdBu (Red/Blue)
RdYlGn (Red/Yellow/Green)
PiYG (Pink/Yellow/Green)
BrBG (Brown/Blue/Green)
PRGn (Purple/Red/Green)
PuOr (Purple/Orange)
RdGy (Red/Grey)
RdYlBu (Red/Yellow/Blue)
Spectral
Custom

`map.regions.colors.diverging_reverse` boolean

Reverse.

`map.regions.colors.diverging_custom_min` color

Minimum color.

`map.regions.colors.diverging_custom_mid` color

Midpoint color.

`map.regions.colors.diverging_custom_max` color

Maximum color.

`map.regions.colors.diverging_color_space` string

Color space.

Allowed values:

rgb (RGB)
lab (LAB)
hcl (HCL)
hsl (HSL)

`map.regions.colors.diverging_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`map.regions.colors.diverging_domain_min` number

Min.

`map.regions.colors.diverging_domain_mid` number

Mid.

`map.regions.colors.diverging_domain_max` number

Max.

`map.regions.use_fallback` boolean

Use fallback color. When enabled, a color of your choice is used when the value or category binding has not been enabled for your map, or if a value is invalid. Otherwise invalid numbers will be treated as zero, and empty categories will be included in the color palette.

Allowed values:

true (Enable)
false (Disable)

`map.regions.fill_default` color

Fallback color.

`map.regions.opacity` number

Region fill opacity.

Max: 100

`map.regions.outline.enabled` boolean

Enabled.

`map.regions.outline.width` number

Width.

Min: 0.2

Max: 4

`map.regions.outline.color` color

Color.

`controls_region_value.control_type` string

Control type. These controls will show up when more than 1 value column has been selected

Allowed values:

dropdown (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAKCAYAAAFXtOeCAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAALaADAAQAAAABAAAACgAAAAAWgdR+AAAAtklEQVQ4EdVV3QnEIAw25TbSB2foNI7iMu0MbuUR4ZOQy4OFCL2AmN8vMQallNLVez+DosNSsg/FGLtyDkR0H1rJMqOMiJxz4KWp1jpUsLNsptCBkD/MlFIgzx3IsD9GflTGTLvImN1ajP1x043dVrlr1fIY4xZZYd2kdATfWgu8NCEedtdWcJ+R1BVYnmIbsEzizW8bDO9CJd4cOijxCEH22DGIq1iyBiv2P8eDP4jVDrzE7/oCOyRFCckULykAAAAASUVORK5CYII=)
buttons (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAKCAYAAAFaqpfFAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAK6ADAAQAAAABAAAACgAAAACxtWN2AAAA5klEQVQ4EdVUwQ2DMAwkqBuFBzO0y2QUlqEz5AEzpTrUiyzLEEPbRy2F2D7n4tgWYRiGuZRy75T0lhMxIcZYoKzrWvUeDi0VTSlt2DRN9dQ4jh0WBP4avHneH3kF/SGE5w0GWXPOHRaFfrDiEW5mEJjBZJY7UoPNakjM0s0KWYFnfa6MUbRlWR573daXurLlhHDXJNreugan7D2D0K09YUeJy467no+D1iyRUO+u5+tDLdudaYuIOEcQtncMeba1/6QCrUuv4nWwJIE1ZBKHLgdJY0f2J9z/NQb4cRxV4iQ2y/hvc78ACNVvxtjAMtcAAAAASUVORK5CYII=)
slider (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAKCAYAAAFeX0f4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAKaADAAQAAAABAAAACgAAAABlifOxAAABz0lEQVQ4Ea1UvU7CUBSml05EHoBEB3gFGpg0fQE0Tk6suDC4uKBuxsXJ6BswGZaq0bnRqaR9CglPwEJCW79Dem5Of2iq8Sbk/H/349zTU7Msy6nhdLvdJUk+Ko7jk8RosbNcAupKZhjAjMkRBIHWG41GbTQayTzSP1IOIL32er3DlDMxTEI1DGPh+/4BSA7CMBxMp9N8LlAu2EtF+IVsS6m5maZpeZ4XcDApUGzX6/Wj+Xz+xXaZ1EWg59m2vSeSdYx8URRdili52u/394syqFlgu6TGFcV3+dRms/lGoS8TCAysP+FrUYN39U3WsG4mCmq2b3+Kt3cA9swJiVR4se1sZPw5kwEp8EBgpOD5fWJGOp/hcGiwXiap+atOp2MCTI8HZukY/ogLcUFqlNlfJHl8Vii6abfbj7PZrHDOuBiPNAH7W9hZxhFhgMwd5/6XZJIaDxeFIPHUbDavXddd6QAUmqJse2WcdNS/JV3Lhv5s50gyEi5bQB/jwhf2YcBoYZXuph3LhiF+LcHjXQ4kAQTYGudya0hUbIwzTL8LX+qjFznRer22MbyVtoqoK1UNPKGDy8cgRp2rdOi7p22Ep7eoAP/WV0rdV115lS4RST+YjrA2q0ehBQAAAABJRU5ErkJggg==)

`controls_region_value.control_styles` boolean

Adv..

`controls_region_value.control_title` string

Control title.

`controls_region_value.button_group` boolean

Grouped.

Allowed values:

true (On)
false (Off)

`controls_region_value.button_group_width_mode` string

Button group width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`controls_region_value.button_group_width_fixed` number

Width.

Max: 100

`controls_region_value.dropdown_width_mode` string

Dropdown width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`controls_region_value.dropdown_width_fixed` number

Width.

Max: 100

`controls_region_value.slider_background_color` color

Background.

`controls_region_value.slider_font_color` color

Text.

`controls_region_value.slider_handle_color` color

Handle.

`controls_region_value.slider_width` number

Width.

Max: 100

`controls_region_value.slider_margin` number

Label width.

Max: 50

`controls_region_value.slider_handle_height` number

Height.

Max: 10

`controls_region_value.slider_track_height` number

Track height.

Max: 10

`controls_region_value.slider_play_button` boolean

Play button.

`controls_region_value.slider_loop` boolean

Loop.

`controls_region_value.slider_step_time` number

Time between steps. Measured in seconds, positive values move the slider left to right, negative values move the slider right to left.

Min: -100

Max: 100

`controls_region_value.slider_restart_pause` number

Pause before loop. Measured in seconds and in addition to the regular step time displayed above.

Max: 100

`controls_region_value.sort` string

Sorting.

Allowed values:

unsorted (Unsorted)
categorical (Categories)
temporal (Dates/times)
numeric (Numbers)

`controls_region_value.sort_temporal_format` string

Date/time format in data. The date/time format in your data sheet. Used only to sort the data, if required. If your format isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

%Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
%Y-%m-%d (1986-01-28)
%m/%d/%Y (01/28/1986)
%d-%b-%y (28-Jan-86)
%m/%Y (01/1986)
%b %Y (Jan 1986)
%B %d (January 28)
%d %b (28 Jan)
%Y (1986)
%B (January)
%b (Jan)
%A (Tuesday)
%a (Tue)
%X (11:39:13)
%H:%M %p (11:39 AM)
%H:%M (11:39)

`controls_style.font_size` number

Text size.

Max: 5

`controls_style.font_weight` string

Text weight.

Allowed values:

bold (Bold)
normal (Normal)

`controls_style.padding` number

Height. Space below and above controls text

Max: 5

`button_style.background` color

Background.

`button_style.background_selected` color

Selected.

`button_style.background_hover` color

Mouse over.

`button_style.font_color` color

Text color.

`button_style.font_color_selected` color

Selected.

`button_style.font_color_hover` color

Mouse over.

`button_style.button_styles_advanced` boolean

Button border styles.

`button_style.border_width` number

Border width.

Max: 20

`button_style.border_color` color

Color.

`button_style.border_transparency` number

Transparency.

Max: 1

`button_style.border_radius` number

Radius.

Max: 100

`dropdown_style.background` color

Background.

`dropdown_style.font_color` color

Text color.

`dropdown_style.border_styles_advanced` boolean

Dropdown border styles.

`dropdown_style.border_style` string

Border style. Show border on all sides, or only at the bottom

Allowed values:

all (All sides)
bottom (Bottom)

`dropdown_style.border_width` number

Border width.

Max: 20

`dropdown_style.border_color` color

Color.

`dropdown_style.border_transparency` number

Transparency.

Max: 1

`dropdown_style.border_radius` number

Radius.

Max: 100

Points

`map.points.style` string

Appearance.

Allowed values:

pulse (Pulses)
circle (Circles)
heatmap (Heatmap)

`default_color` color

Default color.

`default_color_is_zero` boolean

Fallback to zero. When enabled, invalid or missing color values are treated as zero. When disabled, these values will fall back to the default color value intead.

`map.points.colors.scale_type` string

Scale type.

Allowed values:

categorical (Categorical)
numeric (Numeric)

`map.points.colors.categorical_palette` colors

Palette.

`map.points.colors.categorical_extend` boolean

Extend. Automatically generate additional colours when needed to avoid the palette colours being used more than once.

`map.points.colors.categorical_custom_palette` text

Party 1: red
Party 2: #4455AA
Party 3: rgb(30,168,26)

`map.points.colors.numeric_type` string

Scale type.

Allowed values:

sequential (Sequential)
diverging (Diverging)

`map.points.colors.binning` boolean

In linear mode, the color scale will run as a smooth gradient between 2 colors. In binned mode, the gradient will be divided in smaller blocks.

Allowed values:

false (Linear)
true (Binned)

`map.points.colors.bin_mode` string

Binning mode.

Allowed values:

fixed (Fixed width)
quantile (Quantile)
custom (Custom thresholds)

`map.points.colors.bin_count` number

Number of bins.

`map.points.colors.bin_thresholds` string

Custom thresholds. Write your custom thresholds, separated by a ";" For example 5;10;15

`map.points.colors.sequential_palette` string

Palette.

Allowed values:

Oranges
Reds
Blues
Greens
Greys
Purples
Viridis
Inferno
Magma
Plasma
Warm
Cool
CubehelixDefault (Cubehelix)
BuGn (Blue/Green)
BuPu (Blue/Purple)
GnBu (Green/Blue)
OrRd (Orange/Red)
PuBuGn (Purple/Blue/Green)
PuBu (Purple/Blue)
PuRd (Purple/Red)
RdPu (Red/Purple)
YlGnBu (Yellow/Blue/Green)
YlGn (Yellow/Green)
YlOrBr (Yellow/Orange/Brown)
YlOrRd (Yellow/Orange/Red)
Carrots
Custom

`map.points.colors.sequential_reverse` boolean

Reverse.

`map.points.colors.sequential_custom_min` color

Minimum color.

`map.points.colors.sequential_custom_max` color

Maximum color.

`map.points.colors.sequential_color_space` string

Color space.

Allowed values:

rgb (RGB)
lab (LAB)
hcl (HCL)
hsl (HSL)

`map.points.colors.sequential_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`map.points.colors.sequential_domain_min` number

Min.

`map.points.colors.sequential_domain_max` number

Max.

`map.points.colors.diverging_palette` string

Palette.

Allowed values:

RdBu (Red/Blue)
RdYlGn (Red/Yellow/Green)
PiYG (Pink/Yellow/Green)
BrBG (Brown/Blue/Green)
PRGn (Purple/Red/Green)
PuOr (Purple/Orange)
RdGy (Red/Grey)
RdYlBu (Red/Yellow/Blue)
Spectral
Custom

`map.points.colors.diverging_reverse` boolean

Reverse.

`map.points.colors.diverging_custom_min` color

Minimum color.

`map.points.colors.diverging_custom_mid` color

Midpoint color.

`map.points.colors.diverging_custom_max` color

Maximum color.

`map.points.colors.diverging_color_space` string

Color space.

Allowed values:

rgb (RGB)
lab (LAB)
hcl (HCL)
hsl (HSL)

`map.points.colors.diverging_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`map.points.colors.diverging_domain_min` number

Min.

`map.points.colors.diverging_domain_mid` number

Mid.

`map.points.colors.diverging_domain_max` number

Max.

`heatmap_min_value` number

Min value.

`heatmap_max_value` number

Max value.

`heatmap_downsample` string

Downsampling.

Allowed values:

1 (None)
2 (2x)
4 (4x)
8 (8x)

`heatmap_edge_sharpness` number

Edge sharpness.

Max: 5

`heatmap_step_count` number

No. of steps.

Min: 1

Max: 25

`heatmap_stepped` boolean

Terraced gradient.

`map.points.stroke_mode` string

Outline mode. Choose Auto for outline color to match point color. Choose Fixed to give all points a uniform outline color.

Allowed values:

none (None)
auto (Auto)
fixed (Fixed)

`map.points.stroke_opacity` number

Opacity.

Max: 100

`map.points.stroke_width` number

Width.

Max: 10

`map.points.stroke_color` color

Color.

`blend_mode` string

Blend mode. Determines how point colors mix with the map or points beneath them. Additive adds the colors together making points appear to glow, and works best on darker maps. Subtractive subtracts colors from their background like ink on paper, and works best on lighter maps.

Allowed values:

normal (Normal)
additive (Additive)
subtractive (Subtractive)

`map.points.opacity` number

Point opacity.

Max: 100

`heatmap_size` number

Point size.

`default_size` number

Default size.

`min_size` number

Min size.

`max_size` number

Max size.

`scale_with_zoom` boolean

Scale with zoom.

Allowed values:

true (On)
false (Off)

`min_scale_zoom` number

Min zoom.

Max: 24

`max_scale_zoom` number

Max zoom.

Max: 24

`date_format` string

Date/time format in data. The date/time format in your data sheet. If it isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

auto (Auto)
%Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
%Y-%m-%d (1986-01-28)
%m/%d/%Y (01/28/1986)
%d/%m/%Y (28/01/1986)
%d-%b-%y (28-Jan-86)
%m/%Y (01/1986)
%b %Y (Jan 1986)
%b '%y (Jan '86)
%B %d (January 28)
%d %b (28 Jan)
%Y (1986)
%B (January)
%b (Jan)
%A (Tuesday)
%a (Tue)
%H:%M:%S (11:39:13)
%I:%M %p (11:39 AM)
%H:%M (11:39)

`count_by` string

Count by. Determines how much each point contributes to the values in the counter and timeline graph, if applicable. Choosing 'count' will use the total number of points, whereas choosing 'scale' or 'color' will accumulate the scale or color values of each point.

Allowed values:

count (Count)
scale (Scale)
color (Color)

`map.points.transition_kind` string

Enter/exit transitions.

Allowed values:

none (None)
grow (Grow)
fade (Fade)

`empty_category_include` boolean

Fallback category. Creates a new "other" category for uncategorised points

Allowed values:

true (Enable)
false (Disable)

`empty_category_label` string

Label.

`display_below_labels` boolean

Draw map labels in front of points.

Lines

`line_stroke_color` color

Default.

`line_stroke_color_overrides` text

Overrides. Type the name of the series whose colour you want to set, a colon and then a color (using a name, hex-code or rgb declaration). Multiple colors can be set using multiple lines. For example:

Rivers: blue
Borders: #444444

`line_stroke_width` number

Default.

Max: 5

`line_stroke_width_overrides` text

Overrides. Type the name of the series whose width you want to set, a colon and then a number between 0 and 5. Multiple widths can be set using multiple lines. For example:

Rivers: 0.5
Borders: 2

`line_stroke_opacity` number

Default.

Max: 1

`line_stroke_opacity_overrides` text

Overrides. Type the name of the series whose opacity you want to set, a colon and then a number between 0 and 1. Multiple opacities can be set using multiple lines. For example:

Rivers: 0.5
Borders: 1

`line_stroke_dash` string

Default.

Allowed values:

solid (Solid)
long (Long)
short (Short)
mixed (Mixed)

`line_stroke_dash_overrides` text

Overrides. Type the name of the series whose line-dash style you want to set, a colon and then a line-dash style (“solid”, “long”, “short“ or “mixed”). Multiple line-dash styles can be set using multiple lines. For example:

Rivers: solid
Borders: long

Timeline

`timeline.enabled` boolean

Allowed values:

true (Enabled)
false (Disabled)

`timeline.style` string

Style.

Allowed values:

timeline (Timeline)
button (Playback button)

`timeline.play_on_load` boolean

Play on load.

`timeline.loop` boolean

Loop timeline. When turned on, the timeline will return to the beginning once complete. Otherwise, it will stop when it reaches the end.

`timeline.axes_custom_enabled` boolean

Advanced axes settings.

`timeline.color_axes` color

Axes color.

`timeline.axis_font_size` number

Font size.

Max: 3

`timeline.date_format_display` string

X axis date format.

Predefined values:

(Auto)
%Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
%Y-%m-%d (1986-01-28)
%m/%d/%Y (01/28/1986)
%d/%m/%Y (28/01/1986)
%d-%b-%y (28-Jan-86)
%m/%Y (01/1986)
%b %Y (Jan 1986)
%b '%y (Jan '86)
%B %d (January 28)
%d %b (28 Jan)
%Y (1986)
%B (January)
%b (Jan)
%A (Tuesday)
%a (Tue)
%H:%M:%S (11:39:13)
%I:%M %p (11:39 AM)
%H:%M (11:39)

`timeline.axis_nice_x` boolean

Clean X axis. Rounds out the X axis so that its start and end values are nice, round numbers

`timeline.axis_nice_y` boolean

Clean Y axis. Rounds out the Y axis so that its start and end values are nice, round dates

`timeline.scrubber_snap` boolean

Snap when scrubbing. When turned on, you can only jump to values that are supplied in the dataset and nothing in between

`timeline.scrubber_snap_paused` boolean

Snap when paused. Enabling this will cause the timeline to snap to the nearest interval when not animating. This is useful for ensuring the data visible in the visualisation always reflects the data you have supplied.

`timeline.scrubber_height` number

Scrubber height.

`timeline.margin.top` number

Top.

`timeline.margin.left` number

Left.

`timeline.margin.bottom` number

Bottom.

`timeline.margin.right` number

Right.

`timeline.playback_button.margin_right` number

Space between button and timeline.

`timeline.playback_button.margin_right_button` number

Space between button and text.

`timeline.graph` boolean

Visibility.

Allowed values:

true (Show)
false (Hide)

`timeline.color_background` color

Background.

`timeline.graph_height` number

Height.

`timeline.curve` boolean

Curved lines.

`timeline.playback_button.button_color` color

Button colour.

`timeline.playback_button.button_size` number

Button size.

Max: 8

`timeline.playback_button.icon_color` color

Icon colour.

`timeline.playback_button.icon_size` number

Icon size.

Max: 8

`timeline.playback_button.label_size` number

Label size.

Max: 8

`timeline.duration` number

Timeline duration. Total duration of the timeline during normal playback (in seconds).

`timeline.duration_wait_at_end` number

Duration before loop. Amount of time to wait at the end of the timeline before looping (in seconds).

`timeline.duration_tween` number

Time jump duration. Duration of transitions between different points in time on the timeline. This is the transition you see in the story player when switching between slides with a different time one the timeline (in seconds).

`timeline.duration_pulse` number

Pulse duration. The amount of time that it takes for an point to appear and disappear (in seconds).

`counter_bin_mode` string

Aggregation options.

Allowed values:

both (User controllable)
rate (Rate)
total (Total)

`counter_label_rate` string

"Rate" button.

`counter_label_total` string

"Total" button.

`counter_options_type` string

Aggregation rate interval.

Allowed values:

auto (Auto)
custom (Custom)

`counter_options_seconds` boolean

Seconds.

`counter_options_minutes` boolean

Minutes.

`counter_options_hours` boolean

Hours.

`counter_options_days` boolean

Days.

`counter_options_weeks` boolean

Weeks.

`counter_options_months` boolean

Months.

`counter_options_years` boolean

Years.

Counter

`counter_enabled` boolean

Enable counter.

Allowed values:

true (Enabled)
false (Disabled)

`counter_layout` string

Layout.

Allowed values:

vertical (Vertical)
horizontal (Horizontal)
legend (Legend)

`counter_position` string

Position.

Allowed values:

top (fa-arrow-up)
bottom (fa-arrow-down)

`counter_hide_values` boolean

Hide counter values.

`counter_colorize` boolean

Color values based on category.

`counter_category_order_enabled` boolean

Manually select category order.

`counter_category_order` text

Category order. Include your categories in the order you want them to appear, with one category per line.

`counter_color_text` color

Color.

`counter_color_shadow` color

Shadow.

`counter_alpha_shadow` number

Shadow opacity.

Max: 100

`counter_color_text_legend` color

Text color.

`counter_legend_background` color

Background color.

Inset map

`minimap.minimap_display` boolean

Display map.

`minimap.minimap_rotate` boolean

Rotate with camera.

`minimap.minimap_custom_colors` boolean

Customise colours.

`minimap.minimap_fill` color

Region fill color.

`minimap.minimap_ocean_color` color

Ocean color.

`minimap.minimap_stroke` color

Region stroke color.

`minimap.minimap_outline` color

Outline color.

`minimap.minimap_show_bounds` boolean

Display viewport bounds.

`minimap.minimap_bounds_color` color

Region bounds color.

`minimap.minimap_bounds_opacity` number

Region bounds opacity.

Max: 1

`minimap.minimap_size_type` string

Size units.

Allowed values:

px (px)
vh (vh)
vw (vw)
vmin (vmin)
vmax (vmax)

`minimap.minimap_size_desktop_pixels` number

Pixels (desktop).

Min: 1

`minimap.minimap_size_mobile_pixels` number

Pixels (mobile).

Min: 1

`minimap.minimap_size_desktop_viewport` number

Screen % (desktop).

Min: 1

Max: 100

`minimap.minimap_size_mobile_viewport` number

Screen % (mobile).

Min: 1

Max: 100

Legend

`legend.region_color_show` boolean

Show region color legend.

`legend.container.alignment` string

Alignment.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

`legend.container.orientation` string

Orientation.

Allowed values:

horizontal (Horizontal)
vertical (Vertical)

`legend.container.title_weight` string

Title weight.

Allowed values:

bold (Bold)
normal (Normal)

`legend.container.text_weight` string

Text Weight.

Allowed values:

bold (Bold)
normal (Normal)

`legend.container.text_color` color

Color.

`legend.container.text_size` number

Size.

Max: 10

`legend.region_color_continuous.show_legend` boolean

Allowed values:

true (Enabled)
false (Disabled)

`legend.region_color_continuous.title_mode` string

Title mode.

Allowed values:

auto (Auto)
custom (Custom)

`legend.region_color_continuous.title` string

Title.

`legend.region_color_continuous.color_band_width` number

Width.

`legend.region_color_continuous.color_band_height` number

Height.

`legend.region_color_continuous.color_band_radius` number

Roundness. The radius of the corners of the color band (in pixels)

`legend.region_color_continuous.binned_label_mode` string

Binned label mode.

Allowed values:

thresholds (Thresholds)
centers (Centers)
custom (Custom)

`legend.region_color_continuous.binned_label_custom` string

Custom bin labels. List numeric values, separated by semi-colons.

`legend.region_color_continuous.legend_min` number

Legend min.

`legend.region_color_continuous.legend_max` number

Legend max.

`legend.region_color_discrete.show_legend` boolean

Allowed values:

true (Enabled)
false (Disabled)

`legend.region_color_discrete.title_mode` string

Title mode.

Allowed values:

auto (Auto)
custom (Custom)

`legend.region_color_discrete.title` string

Title.

`legend.region_color_discrete.swatch_width` number

Width.

`legend.region_color_discrete.swatch_height` number

Height.

`legend.region_color_discrete.swatch_radius` number

Roundness. The radius of the corners of the swatch (in pixels)

`legend.region_color_discrete.legend_items_padding` number

Padding. Padding between legend items (in rems)

`legend.region_color_discrete.order_override` text

Custom order override. Manually specify the order of legend entries (one entry per line)

`legend.region_color_discrete.icon_height` number

Height. Height of icon (relative to the base font size)

`legend.region_color_discrete.icon_color` color

Color. Fallback color (icon color if not determined by template)

`legend.region_color_discrete.max_width` number

Max width.

`legend.region_color_discrete.orientation` string

Orientation.

Allowed values:

horizontal (Horizontal)
vertical (Vertical)

Labels

`labels.anchor` string

Anchor.

Allowed values:

default (Default)
center (Center)
left (Left)
right (Right)
top (Top)
bottom (Bottom)
top-left (Top left)
top-right (Top right)
bottom-left (Bottom left)
bottom-right (Bottom right)

`labels.text_transform` string

Text transform.

Allowed values:

default (Default)
none (None)
uppercase (Uppercase)
lowercase (Lowercase)

`labels.align_to` string

Align to.

Allowed values:

viewport (Viewport)
map (Map)

`labels.text_color` color

Text color.

`labels.halo_color` color

Halo color.

`labels.size_label` number

Label size.

Min: 1

Max: 40

`labels.size_sublabel` number

Sublabel size.

Min: 1

Max: 40

`labels.allow_overlap` boolean

Allow labels to overlap.

Popups

Allowed values:

none (None)
popup (Popup)
panel (Panel)
both (Both)

Popup content.

Allowed values:

false (Auto)
true (Custom)

Show popup styles.

Popup custom header. The text to appear in the popup. You can use {{column_name}} to add a value from your data. It must be in a selected column, but you can add columns to “Metadata” if you just want to include them for use in the popup. Advanced users can include HTML to apply layouts, formatting, images, etc. You can also hide content based on a column name being empty using {{# if column_name}}Text to display when column_name is not empty{{/if}}. For example: {{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}

Popup custom main content. The text to appear in the popup. You can use {{column_name}} to add a value from your data. It must be in a selected column, but you can add columns to “Metadata” if you just want to include them for use in the popup. Advanced users can include HTML to apply layouts, formatting, images, etc. You can also hide content based on a column name being empty using {{# if column_name}}Text to display when column_name is not empty{{/if}}. For example: {{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}

Max width. In rems, multiples of base font size. Leave blank to let the width adjust based on the contents.

Text size.

Text color.

Align.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

Fill color.

Fill opacity.

Max: 1

Padding.

Radius. Corner radius of popup

Header style.

Allowed values:

block (Header block)
inline (Header inline)

Background.

Text.

List type.

Allowed values:

table (fa-table)
ul (fa-list)

Label weight.

Allowed values:

normal (Normal)
bold (Bold)

List separator.

Predefined values:

: (:)
– (–)
(Empty space)
<br /> (Line break)

Shadow.

Pointer.

Allowed values:

overlay (Overlay)
left (Left)
right (Right)
top (Top)
bottom (Bottom)

Open duration.

Max: 2000

Always show.

Placeholder content.

Panel content.

Allowed values:

false (Auto)
true (Custom)

Show panel styles.

Panel custom header. The text to appear in the panel. You can use {{column_name}} to add a value from your data. It must be in a selected column, but you can add columns to “Metadata” if you just want to include them for use in the popup. Advanced users can include HTML to apply layouts, formatting, images, etc. You can also hide content based on a column name being empty using {{# if column_name}}Text to display when column_name is not empty{{/if}}. For example: {{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}

Panel custom main content. The text to appear in the panel. You can use {{column_name}} to add a value from your data. It must be in a selected column, but you can add columns to “Metadata” if you just want to include them for use in the popup. Advanced users can include HTML to apply layouts, formatting, images, etc. You can also hide content based on a column name being empty using {{# if column_name}}Text to display when column_name is not empty{{/if}}. For example: {{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}

Width (%).

Height (%).

Width (%).

Height (%).

Max width (px).

Max height (px).

Vertical position. Choosing "Click position" is especially useful when your visualisation is really tall, this will make sure the panel content is always on top of the element you've clicked on

Allowed values:

click (Click position)
center (Center)

Text color.

Text size.

Alignment.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

Fill color.

Fill opacity.

Max: 1

Padding.

Radius. Corner radius of panel

List type.

Allowed values:

table (fa-table)
ul (fa-list)

Label weight.

Allowed values:

normal (Normal)
bold (Bold)

List separator.

Predefined values:

: (:)
– (–)
(Empty space)
<br /> (Line break)

Shadow.

`popup_periodic_enabled` boolean

Cycle through popups over time.

`popup_periodic_cull` boolean

Only cycle through visible points. Points out of the frame will not be selected when cycling through popups.

`popup_periodic_interval` number

Cycle interval (s). Only update popups at the beginning of every cycle interval, measured in seconds. This can be useful if you have lots of points to cycle through, as it can help the visualisation run more smoothly and provide less erratic results. Set this to zero to disable.

Annotations

`annotations.defaults.text_weight` string

Weight.

Allowed values:

normal (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCA3IDMwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2My4xICg5MjQ1MikgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+bm9ybWFsPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Im5vcm1hbCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTEuMTA1OTQ3OTYsMTkgTDEuOTI1NjUwNTYsMTYuNTYwOTc1NiBMNS4wMzUzMTU5OSwxNi41NjA5NzU2IEw1Ljg0MjAwNzQzLDE5IEw3LDE5IEw0LjExMTUyNDE2LDExIEwyLjg4ODQ3NTg0LDExIEwwLDE5IEwxLjEwNTk0Nzk2LDE5IFogTTQuNzYyMDgxNzgsMTUuNzQzOTAyNCBMMi4xOTg4ODQ3NiwxNS43NDM5MDI0IEwyLjYwMjIzMDQ4LDE0LjUyNDM5MDIgQzIuNzU4MzY0MzEsMTQuMDc3MjM1OCAyLjkwNTgyNDA0LDEzLjYzMjExMzggMy4wNDQ2MDk2NywxMy4xODkwMjQ0IEMzLjE4MzM5NTI5LDEyLjc0NTkzNSAzLjMxNzg0Mzg3LDEyLjI5MjY4MjkgMy40NDc5NTUzOSwxMS44MjkyNjgzIEwzLjQ0Nzk1NTM5LDExLjgyOTI2ODMgTDMuNSwxMS44MjkyNjgzIEMzLjYzODc4NTYzLDEyLjI5MjY4MjkgMy43Nzc1NzEyNSwxMi43NDU5MzUgMy45MTYzNTY4OCwxMy4xODkwMjQ0IEM0LjA1NTE0MjUsMTMuNjMyMTEzOCA0LjIwMjYwMjIzLDE0LjA3NzIzNTggNC4zNTg3MzYwNiwxNC41MjQzOTAyIEw0LjM1ODczNjA2LDE0LjUyNDM5MDIgTDQuNzYyMDgxNzgsMTUuNzQzOTAyNCBaIiBpZD0iQSIgZmlsbD0iIzMzMzMzMyIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==)
bold (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCA4IDMwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2My4xICg5MjQ1MikgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+Ym9sZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJib2xkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMi4zMzExMjU4MywxOSBMMi43NTQ5NjY4OSwxNy4wODkyMzA4IEw1LjE2NTU2MjkxLDE3LjA4OTIzMDggTDUuNTg5NDAzOTcsMTkgTDgsMTkgTDUuMzc3NDgzNDQsMTAgTDIuNjIyNTE2NTYsMTAgTDAsMTkgTDIuMzMxMTI1ODMsMTkgWiBNNC43NTQ5NjY4OSwxNS4yNDc2OTIzIEwzLjE2NTU2MjkxLDE1LjI0NzY5MjMgTDMuMzExMjU4MjgsMTQuNjI0NjE1NCBDMy40MTcyMTg1NCwxNC4xOTA3NjkyIDMuNTIwOTcxMywxMy43MjIzMDc3IDMuNjIyNTE2NTYsMTMuMjE5MjMwOCBDMy43MjQwNjE4MSwxMi43MTYxNTM4IDMuODIzMzk5NTYsMTIuMjMzODQ2MiAzLjkyMDUyOTgsMTEuNzcyMzA3NyBMMy45MjA1Mjk4LDExLjc3MjMwNzcgTDMuOTczNTA5OTMsMTEuNzcyMzA3NyBDNC4wNzk0NzAyLDEyLjIyNDYxNTQgNC4xODU0MzA0NiwxMi43MDQ2MTU0IDQuMjkxMzkwNzMsMTMuMjEyMzA3NyBDNC4zOTczNTA5OSwxMy43MiA0LjUwMzMxMTI2LDE0LjE5MDc2OTIgNC42MDkyNzE1MiwxNC42MjQ2MTU0IEw0LjYwOTI3MTUyLDE0LjYyNDYxNTQgTDQuNzU0OTY2ODksMTUuMjQ3NjkyMyBaIiBpZD0iQSIgZmlsbD0iIzMzMzMzMyIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==)

`annotations.defaults.text_size` number

Text size.

`annotations.defaults.label_width` number

Max text width.

Min: 2

Max: 20

`annotations.defaults.line_marker` string

Line marker.

Allowed values:

none (None)
arrowhead (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMTIgMzAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYzLjEgKDkyNDUyKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5jaXJjbGUgY29weSAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9ImNpcmNsZS1jb3B5LTMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDEzLjAwMDAwMCkgcm90YXRlKC00NS4wMDAwMDApIHRyYW5zbGF0ZSgtNS4wMDAwMDAsIC0xMy4wMDAwMDApIHRyYW5zbGF0ZSgxLjAwMDAwMCwgNi4wMDAwMDApIj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlRyaWFuZ2xlIiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjQgMCA4IDggMCA4Ij48L3BvbHlnb24+CiAgICAgICAgICAgIDxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjQiIHkyPSIxNCIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjMzMzMzMzIiBvcGFjaXR5PSIwLjIwMDAwMDAwMyIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+PC9saW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+)

`annotations.defaults.connector_extend_line` string

Extend line.

Allowed values:

enabled (Enable)
disabled (Disable)

`annotations.defaults.stroke_width` number

Stroke width.

Max: 4

`annotations.defaults.text_line_height` number

Line height.

Min: 0.5

Max: 3

`annotations.defaults.popup_position` string

Popup position.

Allowed values:

center (Center)
left (Left)
right (Right)
top (Top)
bottom (Bottom)

`annotations.defaults.text_color` color

Text.

`annotations.defaults.text_bg` color

Text Outline.

`annotations.defaults.point_text_color` color

Label.

`annotations.defaults.popup_bg` color

Popup.

`annotations.defaults.stroke_color` color

Stroke.

`annotations.defaults.subject_fill` color

Fill.

`annotations.defaults.subject_fill_opacity` number

Fill opacity.

Max: 1

Localization

`localization.input_decimal_separator` string

Decimal separator in data sheet. Used for interpreting your data. Only change if data is not displaying on the chart as expected.

Allowed values:

. (.)
, (,)

`localization.output_separators` string

Number format to display. How the numbers should appear on chart labels

Allowed values:

,. (12,235.67)
., (12.345,67)
. (12235.67)
, (12345,67)
. (12 235.67)
, (12 345,67)

`formatter.prefix` string

Prefix. Text to place in front of number

`formatter.suffix` string

Suffix. Text to place after number

`formatter.n_dec` number

Decimal places. Use negative integers to round to positive powers of ten (eg -2 rounds to the nearest 100)

Min: -10

Max: 10

`formatter.advanced` boolean

Advanced.

`formatter.negative_sign` string

Styling of negative numbers.

Allowed values:

-$nk (-$100k)
$-nk ($-100k)
($nk) (($100k))
$(n)k ($(100)k)
none ($100k)

`formatter.strip_zeros` boolean

Remove trailing zeros.

`formatter.strip_separator` boolean

Hide thousands separator below 10,000. Turn off if you want four-digit numbers to include a separator, e.g. “1,234” rather than “1234”.

`formatter.transform_labels` boolean

Multiply/divide values.

`formatter.transform` string

Allowed values:

multiply (Multiply by)
divide (Divide by)
exponentiate (×10 to the power of)

`formatter.multiply_divide_constant` number

`formatter.exponentiate_constant` number

Layout

`layout.body_font` font

Main font. This font will apply to the whole graphic by default, but you can optionally change the font for the title, subtitle, footer, etc in the Header and Footer settings panels.

`layout.font_color` color

Text color. This color will apply to the whole graphic by default, but you can optionally change the color for individual text elements, in other settings panels.

`layout.background_color_enabled` boolean

Color.

Allowed values:

true (On)
false (Off)

`layout.background_image_enabled` boolean

Image.

Allowed values:

true (On)
false (Off)

`layout.background_color` color

Background color.

`layout.background_image_src` url

Image URL.

`layout.background_image_size` string

Size.

Allowed values:

cover (Fill)
contain (Fit)
auto (Original)
100% 100% (Stretch)

`layout.background_image_position` string

Position.

Allowed values:

top left (Top left)
top center (Top center)
top right (Top right)
center left (Center left)
center center (Center)
center right (Center right)
bottom left (Bottom left)
bottom center (Bottom center)
bottom right (Bottom right)

`layout.max_width_target` string

Maximum width. Apply a maximum width to just the main graphic or everything (main graphic plus header, footer, etc)

Allowed values:

none (None)
wrapper (Everything)
primary (Main graphic)

`layout.max_width` number

Maximum width. Leave blank to stretch to container width

Min: 50

`layout.max_width_align` string

Align.

Allowed values:

left (fa-align-left)
center (fa-align-center)
right (fa-align-right)

`layout.layout_order` string

Layout order.

Allowed values:

stack-default (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANhJREFUSA3tVNEOwiAM7Iy/p2/wkTz6g5gjOVZZEepcjMmWLBTau95ugIh6lpzzLcb4wNpFJaRk9MIahxAyXmD7mC7BC2RlFbliQjFMpJTujOdGs/ECwRoP3rlKoEzNJlz3+CwutK0NLRVt2QhjggA9n2IGEKANMxmt0VVsEfxgzfX7zL3ZiqbXLjcKc8vEORk5/75mMB/7u11uuIpdbtDCc5R3l/s+e+pmHt1foza7Nv6IXOeHiqGk9zWtSk1cN2cPrItnYjZzHZEZYtacxHTiuANSO/xN8AS4uW8Rw1Gu2AAAAABJRU5ErkJggg==)
stack-2 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAAMpJREFUSA3tVMsKwyAQNKW/l970Iz32Bw0jjKTrSLUY0oOBsO5rnOwYnTs9W0ppDyG8EcsOkw8uauu9T3jR2+75yJxBnnC4JxMxxlezg0V9VsJsIGz75TfKdlkpg3aPcT8TsPNRMJjZEIf5xaAAahUyE+RtfcZvtFLoFh95aFXxH4hCWpUoTCg7fxqUfB4yEcl/CJlNy5qbfuZA8m8CwJ77q2djSj50lnuAWbOAOQlXxCuRHxcUje2XzfgrYzBpHUXLkmxh181SpnEAB4Vg0DSGhHsAAAAASUVORK5CYII=)
stack-3 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANFJREFUSA3tVEEOwyAMo9O+193gkRz3QSZHMmNRUkGp1guVqkCIHZMAITTfVkrZU0pv+B7NQpCV1vEdxxgLfmB9jEvwBBNzkjXn/HIRDOqzJs0GwS1eEmonAn52RITJaUYScd5KLl0fTQf58HVpIFlXMDPNBVMf2TDXPq7dZM2eelrMQ6uDucG50mlWzG/ooCWDvqENXldn1pcyhpgJWjYcPe5z5ZFrAgoe2LN0f2v1ZYq5UyofuiME99hFXKtUm1c9aoBmeEeRjVIQma6XpVblAwnpZjN/VjqsAAAAAElFTkSuQmCC)
stack-4 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANtJREFUSA3tVNEOwjAI3Iy/p2/tR/bRH6zekmuA1glO45bYZAHKcdDCOk1izbXWC+0zlJzzDVJ5sNGW9qSUKj4QKY8yWvBDUWnoKKVcTzS2yWHiIfeMwm2yIbLbRL3DRJYubi+0bAPCkcvapO3AdFgZvuDuyJZR2i4wSpBBP9ZD7RsOLQ9gD/Y5ZmaA3EEHWY6r3SEwrzDEHLpnlvOXa4/7xttZfhNwyPdKcqLPaz6JlXpr9bNgCfbobw2ch5iY0CQzyCOPR9ya5zleBPNy3LxknAbiv1YxExxH3gEqBW7I4zw3PQAAAABJRU5ErkJggg==)

`layout.space_between_sections` string

Space between sections.

Allowed values:

0.5 (▁)
1 (▃)
1.5 (▄)
custom (...)

`layout.space_between_sections_custom` number

Custom.

Max: 100

`layout.margin_top` number

Top.

`layout.margin_right` number

Right.

`layout.margin_bottom` number

Bottom.

`layout.margin_left` number

Left.

`layout.border.enabled` boolean

Show borders around visualisation.

`layout.border.top.width` number

Top.

`layout.border.top.style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.border.top.color` color

Color.

`layout.border.right.width` number

Right.

`layout.border.right.style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.border.right.color` color

Color.

`layout.border.bottom.width` number

Bottom.

`layout.border.bottom.style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.border.bottom.color` color

Color.

`layout.border.left.width` number

Left.

`layout.border.left.style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.border.left.color` color

Color.

Header

`layout.header_align` string

Alignment.

Allowed values:

left (fa-align-left)
center (fa-align-center)
right (fa-align-right)

`layout.title` string

`layout.title_styling` boolean

Change title styles.

`layout.title_font` font

Title Font.

`layout.title_size` string

Size.

Allowed values:

1.4 (ᴀ)
1.6 (A)
2 (fa-font)
custom (...)

`layout.title_size_custom` number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

`layout.title_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`layout.title_color` color

Color.

`layout.title_line_height` number

Line height.

Max: 3

`layout.title_space_above` string

Space above.

Allowed values:

0 (▁)
0.5 (▃)
1 (▄)
custom (...)

`layout.title_space_above_custom` number

Custom.

Max: 100

`layout.subtitle` string

`layout.subtitle_styling` boolean

Change subtitle styles.

`layout.subtitle_font` font

Subtitle Font.

`layout.subtitle_size` string

Size.

Allowed values:

1.4 (ᴀ)
1.6 (A)
2 (fa-font)
custom (...)

`layout.subtitle_size_custom` number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

`layout.subtitle_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`layout.subtitle_color` color

Color.

`layout.subtitle_line_height` number

Line height.

Max: 3

`layout.subtitle_space_above` string

Space above.

Allowed values:

0 (▁)
0.5 (▃)
1 (▄)
custom (...)

`layout.subtitle_space_above_custom` number

Custom.

Max: 100

`layout.header_text` string

`layout.header_text_styling` boolean

Styling.

`layout.header_text_size` string

Size.

Allowed values:

1.2 (ᴀ)
1.4 (A)
1.6 (fa-font)
custom (...)

`layout.header_text_size_custom` number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

`layout.header_text_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`layout.header_text_color` color

Color.

`layout.header_text_line_height` number

Line height.

Max: 3

`layout.header_text_space_above` string

Space above.

Allowed values:

0 (▁)
0.5 (▃)
1 (▄)
custom (...)

`layout.header_text_space_above_custom` number

Custom.

Max: 100

`layout.header_border` string

Allowed values:

top (Top)
bottom (Bottom)
none (None)

`layout.header_border_width` number

Width.

`layout.header_border_color` color

Color.

`layout.header_border_style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.header_border_space` number

Space. Space between border and header text

`layout.header_logo_enabled` boolean

Allowed values:

true (Enabled)
false (Disabled)

`layout.header_logo_src` url

URL.

`layout.header_logo_height` number

Height.

`layout.header_logo_align` string

Align. Align logo inside header or outer visualisation container

Allowed values:

outside (Outside)
inside (Inside)

`layout.header_logo_position_inside` string

Position.

Allowed values:

top (Top)
left (Left)
right (Right)

`layout.header_logo_position_outside` string

Position.

Allowed values:

left (Left)
right (Right)

`layout.header_logo_margin_top` number

Top.

`layout.header_logo_margin_right` number

Right.

`layout.header_logo_margin_bottom` number

Bottom.

`layout.header_logo_margin_left` number

Left.

Footer

`layout.footer_align` string

Alignment.

Allowed values:

left (fa-align-left)
center (fa-align-center)
right (fa-align-right)
justify (fa-align-justify)

`layout.footer_text_size` number

Size.

`layout.footer_text_color` color

Color.

`layout.footer_styling` boolean

Advanced footer styles.

`layout.footer_font` font

Font.

`layout.footer_text_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`layout.source_name` string

Source name.

`layout.source_url` string

Source url.

`layout.multiple_sources` boolean

Multiple sources.

`layout.source_name_2` string

Source name.

`layout.source_url_2` string

Source url.

`layout.source_name_3` string

Source name.

`layout.source_url_3` string

Source url.

`layout.source_label` string

Source label.

`layout.footer_note` string

Note.

`layout.footer_note_secondary` string

Note (secondary). The secondary note is placed below the source and primary note

`layout.footer_logo_enabled` boolean

Image.

Allowed values:

true (Enabled)
false (Disabled)

`layout.footer_logo_src` url

Image.

`layout.footer_logo_src_light` hidden

Image (light version). If provided this version will be used whenever the background colour is dark

`layout.footer_logo_link_url` string

Link.

`layout.footer_logo_height` number

Height.

`layout.footer_logo_margin` number

Margin.

`layout.footer_logo_order` string

Position.

Allowed values:

left (Left)
right (Right)

`layout.footer_align_vertical` string

V. align.

Allowed values:

flex-start (Top)
center (Center)
flex-end (Bottom)

`layout.footer_border` string

Allowed values:

top (Top)
bottom (Bottom)
none (None)

`layout.footer_border_width` number

Width.

`layout.footer_border_color` color

Color.

`layout.footer_border_style` string

Style.

Allowed values:

solid (Solid)
dashed (Dashed)
dotted (Dotted)

`layout.footer_border_space` number

Space. Space between border and footer text

Accessibility

`layout.screenreader_hide_primary` boolean

Screenreader mode for main visual container. Whether the main visual container is visible to screenreaders. (Text in the header and footer are always available to screenreaders.)

Allowed values:

true (Hidden)
false (Readable)

`layout.screenreader_text_primary` text

Screenreader description. A text alternative to the visual content that will only be visible to screenreaders, e.g. “The line chart shows China consistently higher than the other countries since 1990”. Do no replicate your title, since that will also be read by screenreaders.

3D map

Updated 2 years ago to v9.1.4 by Flourish team

How to use this template

How to get started with a 3D point map

How to get started with a 3D regions map

How to get started with a 3D lines map

Customizing the inset map

FAQ

Credits

API information

Template data

1. Array of arrays, and a bindings object

2. Array of objects with arbitrary keys, and a bindings object

3. Array of objects with template-defined keys

Meanings of the template data keys:

Template settings

Base map

map.map_type string

map.style_enabled boolean

map.style_base string

map.style_custom_enabled boolean

map.style_monochrome_color color

map.style_custom_toner.primary color

map.style_custom_toner.secondary color

map.style_custom_json code

map.style_custom_palette.ground color

map.style_custom_palette.ocean color

map.style_custom_palette.grass color

map.style_custom_palette.buildings color

map.style_custom_palette.road color

map.style_custom_palette.road_outline color

map.style_custom_palette.text_fill color

map.style_custom_palette.text_opacity number

map.style_custom_palette.text_stroke color

map.style_custom_palette.halo_opacity number

map.style_custom_palette.border color

map.style_font_face string

map.style_font_weight number

map.style_show_borders boolean

map.style_show_roads boolean

map.style_show_labels boolean

map.style_show_landuse boolean

map.style_show_water boolean

map.projection_type string

map.projection_background_color color

map.projection_ocean_color color

map.style_raster.tile_url string

map.style_raster.scheme string

map.style_raster.tile_size string

map.style_raster.minzoom number

map.style_raster.maxzoom number

map.style_raster.attribution text

map.map_language_auto boolean

map.map_language_alts boolean

map.map_language string

map.projection_longitude number

map.projection_latitude number

map.projection_roll number

Viewport and interaction

map.map_initial_type string

map.map_initial_pitch_tiles number

map.map_initial_bearing_tiles number

map.map_initial_pitch_projection number

map.map_initial_bearing_projection number

map.map_initial_padding number

map.map_initial_lat number

map.map_initial_lng number

map.map_initial_zoom number

map.map_initial_bounds_lng_min number

map.map_initial_bounds_lat_min number

map.map_initial_bounds_lng_max number

map.map_initial_bounds_lat_max number

map.map_aspect_type string

map.map_aspect_w number

map.map_aspect_h number

map.map_zoom_min number

map.map_zoom_max number

map.map_bound_position boolean

map.map_lng_min number

map.map_lat_min number

Template `data`

Template `settings`

`map.map_type` string

`map.style_enabled` boolean

`map.style_base` string

`map.style_custom_enabled` boolean

`map.style_monochrome_color` color

`map.style_custom_toner.primary` color

`map.style_custom_toner.secondary` color

`map.style_custom_json` code

`map.style_custom_palette.ground` color

`map.style_custom_palette.ocean` color

`map.style_custom_palette.grass` color

`map.style_custom_palette.buildings` color

`map.style_custom_palette.road` color

`map.style_custom_palette.road_outline` color

`map.style_custom_palette.text_fill` color

`map.style_custom_palette.text_opacity` number

`map.style_custom_palette.text_stroke` color

`map.style_custom_palette.halo_opacity` number

`map.style_custom_palette.border` color

`map.style_font_face` string

`map.style_font_weight` number

`map.style_show_borders` boolean

`map.style_show_roads` boolean

`map.style_show_labels` boolean

`map.style_show_landuse` boolean

`map.style_show_water` boolean

`map.projection_type` string

`map.projection_background_color` color

`map.projection_ocean_color` color

`map.style_raster.tile_url` string

`map.style_raster.scheme` string

`map.style_raster.tile_size` string

`map.style_raster.minzoom` number

`map.style_raster.maxzoom` number

`map.style_raster.attribution` text

`map.map_language_auto` boolean

`map.map_language_alts` boolean

`map.map_language` string

`map.projection_longitude` number

`map.projection_latitude` number

`map.projection_roll` number

`map.map_initial_type` string

`map.map_initial_pitch_tiles` number

`map.map_initial_bearing_tiles` number

`map.map_initial_pitch_projection` number

`map.map_initial_bearing_projection` number

`map.map_initial_padding` number

`map.map_initial_lat` number

`map.map_initial_lng` number

`map.map_initial_zoom` number

`map.map_initial_bounds_lng_min` number

`map.map_initial_bounds_lat_min` number

`map.map_initial_bounds_lng_max` number

`map.map_initial_bounds_lat_max` number

`map.map_aspect_type` string

`map.map_aspect_w` number

`map.map_aspect_h` number

`map.map_zoom_min` number

`map.map_zoom_max` number

`map.map_bound_position` boolean

`map.map_lng_min` number

`map.map_lat_min` number

`map.map_lng_max` number

`map.map_lat_max` number

`map.map_render_world_copies` boolean

`map.animation_enabled` boolean

`map.animation_type` string

`map.animation_duration` number

`map.animation_speed` number

`map.map_interactive` boolean

`map.hijack_scroll` boolean

`map.controls_allow_rotation` boolean

`map.controls_geolocator_enabled` boolean

`map.controls_geolocator_alignment` string

`map.controls_fullscreen_enabled` boolean

`map.controls_fullscreen_alignment` string

`map.graticules.enabled` boolean

`map.graticules.color` color