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]'}
]}
/>
With clickable link and tooltipType=click
<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
/>
Link Drilldown
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
Legends
Categorical Legend
<PointMap
data={grouped_locations}
lat=lat
long=long
value=Category
/>
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
colorPalette={['#C65D47', '#5BAF7A', '#4A8EBA', '#D35B85', '#E1C16D', '#6F5B9A', '#4E8D8D']}
/>
Scalar Legend
<PointMap
data={grouped_locations}
lat=lat
long=long
value=sales
valueFmt=usd
/>
Custom Colors
Define scalar legend colors using the colorPalette
prop, allowing specified colors to create a gradient based on the range of values.
<PointMap
data={grouped_locations}
lat=lat
long=long
value=sales
valueFmt=usd
colorPalette={['#C65D47', '#4A8EBA']}
/>
Options
Points
- Options:
- query name
- Options:
- column name
- Options:
- format string
- Options:
- column name
Color Scale
- Options:
- array of colors
- Options:
- number
- Options:
- number
Legend
Interactivity
- Options:
- URL
- Options:
- string
Styling
- Options:
- CSS color value
- Options:
- number
- Default:
- 5
- Options:
- pixel value
- Options:
- CSS color value
- Options:
- number between 0 and 1
Selected State
- Options:
- CSS color value
- Options:
- pixel value
- Default:
- 0.75
- Options:
- CSS color value
- Options:
- number between 0 and 1
- Default:
- 0.8
Tooltips
- Options:
- boolean
- Default:
- true
- Options:
- CSS class
- 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 IDtitle
: custom string to use as title of fieldfmt
: format to use for valueshowColumnName
: whether to show the column name. Iffalse
, only the value will be showncontentType
: 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 whentitle
not passed explicitlyvalueClass
: custom Tailwind classes to style the valuesfieldClass
: custom Tailwind classes to style the column names
Base Map
- Options:
- URL
- Options:
- text
- Options:
- latitude coordinate
- Options:
- longitude coordinate
- Options:
- number (1 to 18)
- Options:
- pixel value
- Default:
- 300