Home Components Bubble Map

Bubble Map

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    size=sales 
    sizeFmt=eur
    value=sales 
    valueFmt=eur
    pointName=point_name 
/>

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/

Note: you need to wrap the url in curly braces and backticks to avoid the curly braces in the URL being read as variables on your page

<BubbleMap 
    data={la_locations} 
    lat=lat long=long 
    value=sales 
    valueFmt=usd 
    pointName=point_name 
    height=200 
    basemap={`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}`}
/>

Custom Tooltip

tooltipType=hover

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    size=sales 
    sizeFmt=usd 
    pointName=point_name 
    tooltipType=hover
    tooltip={[
        {id: 'point_name', showColumnName: false, valueClass: 'text-xl font-semibold'},
        {id: 'sales', fmt: 'eur', fieldClass: 'text-[grey]', valueClass: 'text-[green]'}
    ]}
/>
<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    size=sales 
    sizeFmt=usd 
    pointName=point_name 
    tooltipType=click
    tooltip={[
        {id: 'point_name', showColumnName: false, valueClass: 'text-xl font-semibold'},
        {id: 'sales', fmt: 'eur', fieldClass: 'text-[grey]', valueClass: 'text-[green]'},
        {id: 'link_col', showColumnName: false, contentType: 'link', linkLabel: 'Click here', valueClass: 'font-bold mt-1'}
    ]}
/>

Custom Color Palette

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    pointName=point_name 
    colorPalette={['yellow','orange','red','darkred']}
/>

Custom Styling

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    size=sales 
    sizeFmt=usd
    pointName=point_name 
    color=#128c2b
    opacity=1
    borderWidth=1
    borderColor=black
/>

Max Bubble Size

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    size=sales 
    sizeFmt=usd
    pointName=point_name 
    maxSize=10
/>

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

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    size=sales 
    sizeFmt=usd
    link=link_col 
/>

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

<BubbleMap 
    data={la_locations} 
    lat=lat 
    long=long 
    size=sales 
    sizeFmt=usd
    name=my_point_map 
/>

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

ID Point Name Lat Long Sales
0 Ondrickaton 34.2 -118 $119k
1 South Gate 34.8 -118 $110k
2 Leonorafort 34.3 -118 $157k
3 Schaeferchester 34.7 -118 $94k
4 Wizaboro 34.0 -118 $17k
5 Mayerton 34.3 -119 $133k
6 South Devante 34.2 -118 $86k
7 South Shyanne 34.2 -119 $125k
8 West Moses 34.7 -119 $198k
9 Larkinhaven 34.6 -118 $166k
No Results

Legends

Categorical Legend

<BubbleMap
    data={grouped_locations}
    lat=lat
    long=long
    value=Category
    size=sales
    legendType=categorical
    legendPosition=bottomLeft
/>

Custom Colors

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

<BubbleMap
    data={grouped_locations}
    lat=lat
    long=long
    value=Category
    size=sales
    legendType=categorical
    legendPosition=bottomLeft
    colorPalette={['#C65D47', '#5BAF7A', '#4A8EBA', '#D35B85', '#E1C16D', '#6F5B9A', '#4E8D8D']}
/>

Scalar Legend

$0 $0
<BubbleMap
    data={grouped_locations}
    lat=lat
    long=long
    value=sales
    size=sales
    legendType=scalar
    legendPosition=bottomLeft
    legendFmt=usd
/>

Custom Colors

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

$0 $0
<BubbleMap
    data={grouped_locations}
    lat=lat
    long=long
    value=sales
    size=sales
    legendType=scalar
    legendPosition=bottomLeft
    colorPalette={['#C65D47', '#4A8EBA']}
    legendFmt=usd
/>

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

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 ``
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
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