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

Using an Online GeoJSON

<AreaMap 
    data={orders_by_state} 
    areaCol=state
    geoJsonUrl=https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson
    geoId=name
    value=orders
/>

`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]'}
    ]}
/>

With clickable link and `tooltipType=click`

<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', 'yellow'],
        ['orange', 'orange'],
        ['red', 'red'],
        ['darkred', 'darkred'],
    ]}
/>

Link Drilldown

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

Legends

Categorical Legend

<AreaMap
   data={grouped_locations}
   lat=lat
   long=long
   value=Category
   geoId=ZCTA5CE10
   areaCol=zip_code
/>

Custom Colors

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

<AreaMap
   data={grouped_locations}
   lat=lat
   long=long
   value=Category
   geoId=ZCTA5CE10
   areaCol=zip_code
   colorPalette={['#C65D47', '#5BAF7A', '#4A8EBA', '#D35B85', '#E1C16D', '#6F5B9A', '#4E8D8D']}
/>

Scalar Legend

<AreaMap
    data={grouped_locations}
    lat=lat
    long=long
    value=sales
    geoId=ZCTA5CE10
    areaCol=zip_code
    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.

<AreaMap
    data={grouped_locations}
    lat=lat
    long=long
    value=sales
    geoId=ZCTA5CE10
    areaCol=zip_code
    colorPalette={['#C65D47', '#4A8EBA']}
    valueFmt=usd
/>

Required GeoJSON Data Structure

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

Map Resources

Below are a selection of publically available GeoJSON files that may be useful for mapping. These are from the Natural Earth Data project, and hosted by GeoJSON.xyz.

Country, State, and City Locations

No Results

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 (see Map Resources) or a file in your project.

If the file is in your static directory in the root of your project, reference it as geoJsonUrl="/your_file.geojson"

Options:: URL

areaCol

Required

Column in the data that specifies the area each row belongs to.

Options:: column name

geoId

Required

Property in the GeoJSON that uniquely identifies each feature.

Options:: geoJSON property 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

Legend

legend

Turns legend on or off

Options:

Default:: true

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 area is clicked.

Options:: URL

name

Input name. Can be referenced on your page with {inputs.my_input_name}

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={[
    {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'}
]}

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

attribution

Options:: text

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

Area Map

Examples

Custom Basemap

Using an Online GeoJSON

Custom Tooltip

`tooltipType=hover`

With clickable link and `tooltipType=click`

Custom Styling

Custom Color Palette

Link Drilldown

Use Map as Input

Selected value for `{inputs.my_area_map}`:

Selected value for `{inputs.my_area_map.zip_code}`:

Filtered Data

Legends

Categorical Legend

Custom Colors

Scalar Legend

Custom Colors

Required GeoJSON Data Structure

Map Resources

Country, State, and City Locations

Options

Areas

Color Scale

Legend

Interactivity

Styling

Selected State

Tooltips

`tooltip` example:

All options available in `tooltip`:

Base Map