Home Components Area Map

Area Map

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/

Using an Online GeoJSON

Custom Tooltip

tooltipType=hover

Custom Styling

Custom Color Palette

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

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

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

Legends

Categorical Legend

Custom Colors

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

Scalar Legend

Custom Colors

Define scalar legend colors using the colorPalette prop, allowing specified colors to create a gradient based on the range of values.

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 ``
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
attribution
Attribution text to display on the map (e.g., "© OpenStreetMap contributors").
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
Edit page on GitHub