Home Components Point Map

Point Map

<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    pointName=point_name 
    height=200
/>

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

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

<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    pointName=point_name 
    height=200
    tooltipType=hover
    tooltip={[
        {id: 'point_name', showColumnName: false, valueClass: 'text-xl font-semibold'},
        {id: 'sales', fmt: 'eur', fieldClass: 'text-[grey]', valueClass: 'text-[green]'}    
    ]}
/>
<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    value=sales 
    valueFmt=usd 
    pointName=point_name 
    height=200
    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

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

Custom Styling

<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    pointName=point_name 
    height=200
    color=#128c2b
    size=10
    opacity=0.6
    borderWidth=0
/>

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

<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    link=link_col 
    height=200
/>

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

<PointMap 
    data={la_locations} 
    lat=lat 
    long=long 
    name=my_point_map 
    height=200
/>

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

<PointMap
    data={grouped_locations}
    lat=lat
    long=long
    value=Category
    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.

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

Scalar Legend

$0 $0
<PointMap
    data={grouped_locations}
    lat=lat
    long=long
    value=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
<PointMap
    data={grouped_locations}
    lat=lat
    long=long
    value=sales
    legendType=scalar
    legendPosition=bottomLeft
    legendFmt=usd
    colorPalette={['#C65D47', '#4A8EBA']}
/>

Options

Points

data
Required
Query result, referenced using curly braces
Options:
query name
value
Column that determines the value displayed at each point.
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
max
Maximum value to use for the color scale.
Options:
number

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
size
Size of the points
Options:
number
Default:
5
borderWidth
Width of the border around each point.
Options:
pixel value
borderColor
Color of the border around each point.
Options:
CSS color value
opacity
Opacity of the points.
Options:
number between 0 and 1

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:
boolean
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