Home Components Maps Bubble Map

Bubble Map

Examples

Custom Basemap

You can add a different basemap by passing in a basemap URL. You can find examples here: https://leaflet-extras.github.io/leaflet-providers/preview/

Custom Tooltip

tooltipType=hover

Custom Color Palette

Custom Styling

Max Bubble Size

Pass in a link column to enable navigation on click of the point. These can be absolute or relative URLs

Use Map as Input

Use the name prop to set an input name for the map - when a point is clicked, it will set the input value to that row of data

Click a point on the map to see the input value get updated:

Selected value for {inputs.my_point_map}:

{
  "id": true,
  "point_name": true,
  "lat": true,
  "long": true,
  "sales": true,
  "link_col": true
}

Selected value for {inputs.my_point_map.point_name}:

true

Filtered Data
No Results

Legends

Categorical Legend

Custom Colors

Set custom legend colors using the colorPalette prop to match the number of categories; excess categorical options will default to standard colors.

Scalar Legend

Custom Colors

Define scalar legend colors using the colorPalette prop, allowing specified colors to create a gradient based on the range of values.

Options

Bubbles

data
Required

Query result, referenced using curly braces

Options:
query name
lat
Required

Column containing latitude values

Options:
column name
long
Required

Column containing longitude values

Options:
column name
size
Required

Column that determines the size displayed for each point.

Options:
column name
sizeFmt

Format string for displaying the size value in tooltips.

Options:
format string
maxSize

Maximum size of the bubbles

Options:
number
Default:
20
value

Column that determines the value displayed at each point (used for color scale)

Options:
column name
valueFmt

Format string for displaying the value.

Options:
format string
pointName

Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.

Options:
column name

Color Scale

colorPalette

Array of colors used for theming the points based on data

Options:
array of colors
min

Minimum value to use for the color scale.

Options:
number
Default:
min of value column
max

Maximum value to use for the color scale.

Options:
number
Default:
max of value column

Legend

legend
Turns legend on or off
Options:
Default:
true
legendType

Appends a categorical or scalar legend to the map

Options:
legendPosition

Determines the legend's position on the map, with options provided

Options:
Default:
bottomLeft

Interactivity

link

URL to navigate to when a point is clicked.

Options:
URL
name

Input name. Can be referenced on your page with {inputs.my_input_name}

Options:
string

Styling

color

Color for the points. Use when you want all points to be the same color.

Options:
CSS color value
borderWidth

Width of the border around each point.

Options:
pixel value
Default:
0.75
borderColor

Color of the border around each point.

Options:
CSS color value
opacity

Opacity of the points.

Options:
number between 0 and 1
Default:
0.8

Selected State

selectedColor

When point is selected: Color for the points. Use when you want all points to be the same color.

Options:
CSS color value
selectedBorderWidth

When point is selected: Width of the border around each point.

Options:
pixel value
Default:
0.75
selectedBorderColor

When point is selected: Color of the border around each point.

Options:
CSS color value
selectedOpacity

When point is selected: Opacity of the points.

Options:
number between 0 and 1
Default:
0.8

Tooltips

showTooltip

Whether to show tooltips

Options:
Default:
true
tooltipType

Determines whether tooltips are activated by hover or click.

Options:
Default:
hover
tooltipClass

CSS class applied to the tooltip content. You can pass Tailwind classes into this prop to custom-style the tooltip

Options:
CSS class
tooltip

Configuration for tooltips associated with each area. See below example for format

Options:
array of objects

tooltip example:

tooltip={[
    {id: 'zip_code', fmt: 'id', showColumnName: false, valueClass: 'text-xl font-semibold'},
    {id: 'sales', fmt: 'eur', fieldClass: 'text-[grey]', valueClass: 'text-[green]'},
    {id: 'zip_code', showColumnName: false, contentType: 'link', linkLabel: 'Click here', valueClass: 'font-bold mt-1'}
]}

All options available in tooltip:

  • id: column ID
  • title: custom string to use as title of field
  • fmt: format to use for value
  • showColumnName: whether to show the column name. If false, only the value will be shown
  • contentType: currently can only be "link"
  • linkLabel: text to show for a link when contentType="link"
  • formatColumnTitle: whether to automatically uppercase the first letter of the title. Only applies when title not passed explicitly
  • valueClass: custom Tailwind classes to style the values
  • fieldClass: custom Tailwind classes to style the column names

Base Map

basemap

URL template for the basemap tiles.

Options:
URL
attribution

Attribution text to display on the map (e.g., "© OpenStreetMap contributors").

Options:
text
title

Optional title displayed above the map.

Options:
text
startingLat

Starting latitude for the map center.

Options:
latitude coordinate
startingLong

Starting longitude for the map center.

Options:
longitude coordinate
startingZoom

Initial zoom level of the map.

Options:
number (1 to 18)
height

Height of the map in pixels.

Options:
pixel value
Default:
300
Edit page on GitHub