Area Map

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
/>

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

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    basemap={`https://tile.openstreetmap.org/{z}/{x}/{y}.png`}
/>

Custom Tooltip

tooltipType=hover

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    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'}
    ]}
/>
<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    tooltipType=click
    tooltip={[
        {id: 'zip_code', fmt: 'id', 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 Styling

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    color=#fff5d9
    borderColor=#737373
    borderWidth=0.5
/>

Custom Color Palette

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    colorPalette={['yellow','orange','red','darkred']}
/>

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

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    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

<AreaMap 
    data={la_zip_sales} 
    areaCol=zip_code
    geoJsonUrl='path/to/your/geoJson'
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
    height=250
    name=my_area_map
/>

Click an area on the map to see the input value get updated:

Selected value for {inputs.my_area_map}:

{
  "zip_code": {}
}

Selected value for {inputs.my_area_map.zip_code}:

Filtered Data

Loading...

Required GeoJSON Data Structure

The GeoJSON data you pass to the map must be a feature collection. See here for an example

Options

Areas

data
Required
Query result, referenced using curly braces
Options:
query name
geoJsonUrl
Required
Path to source geoJSON data from - can be a URL or a file in your project. If the file is in your project, store it in a `static` folder in the root of your project.
Options:
URL
areaCol
Required
Column in the data that specifies the area each row belongs to.
Options:
column name
geoId
Required
Column in the GeoJSON that uniquely identifies each feature.
Options:
geoJSON field name
value
Column that determines the value displayed for each area (used for color scale)
Options:
column name
valueFmt
Format string for displaying the value.
Options:
format string

Color Scale

colorPalette
Array of colors used for theming the areas 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

Interactivity

link
URL to navigate to when a area is clicked.
Options:
URL
name
Input name. Can be referenced on your page with ``
Options:
string

Styling

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

Selected State

selectedColor
When area is selected: Color for the areas. Use when you want all areas to be the same color.
Options:
CSS color value
selectedBorderWidth
When area is selected: Width of the border around each area.
Options:
pixel value
Default:
0.75
selectedBorderColor
When area is selected: Color of the border around each area.
Options:
CSS color value
selectedOpacity
When area is selected: Opacity of the areas.
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