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

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

Required
Query result, referenced using curly braces
Options:
query name
Required
Column containing latitude values
Options:
column name
Required
Column containing longitude values
Options:
column name
Required
Column that determines the size displayed for each point.
Options:
column name
Format string for displaying the size value in tooltips.
Options:
format string
Maximum size of the bubbles
Options:
number
Default:
20
Column that determines the value displayed at each point (used for color scale)
Options:
column name
Format string for displaying the value.
Options:
format string
Column containing the names/labels of the points - by default, this is shown as the title of the tooltip.
Options:
column name

Color Scale

Array of colors used for theming the points based on data
Options:
array of colors
Minimum value to use for the color scale.
Options:
number
Default:
min of value column
Maximum value to use for the color scale.
Options:
number
Default:
max of value column

Legend

Appends a categorical or scalar legend to the map
Determines the legend's position on the map, with options provided
Default:
bottomLeft

Interactivity

Input name. Can be referenced on your page with ``
Options:
string

Styling

Color for the points. Use when you want all points to be the same color.
Options:
CSS color value
Width of the border around each point.
Options:
pixel value
Default:
0.75
Color of the border around each point.
Options:
CSS color value
Opacity of the points.
Options:
number between 0 and 1
Default:
0.8

Selected State

When point is selected: Color for the points. Use when you want all points to be the same color.
Options:
CSS color value
When point is selected: Width of the border around each point.
Options:
pixel value
Default:
0.75
When point is selected: Color of the border around each point.
Options:
CSS color value
When point is selected: Opacity of the points.
Options:
number between 0 and 1
Default:
0.8

Tooltips

Whether to show tooltips
Options:
Default:
true
Determines whether tooltips are activated by hover or click.
Options:
Default:
hover
CSS class applied to the tooltip content. You can pass Tailwind classes into this prop to custom-style the tooltip
Options:
CSS class
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

URL template for the basemap tiles.
Options:
URL
Optional title displayed above the map.
Options:
text
Starting latitude for the map center.
Options:
latitude coordinate
Starting longitude for the map center.
Options:
longitude coordinate
Initial zoom level of the map.
Options:
number (1 to 18)
Height of the map in pixels.
Options:
pixel value
Default:
300