Home Components Maps Base Map

Base Map

Overview

The BaseMap component provides a flexible and extensible way to create maps with multiple layers. This component serves as the foundation for AreaMap, PointMap, and BubbleMap.

Within BaseMap, you can add layers using the following components:

  • <Areas/>
  • <Points/>
  • <Bubbles/>

Examples

See the pages for Area Map, Point Map, and Bubble Map for examples specific to those layers. The same options can be applied to the layer components within BaseMap.

Adding Multiple Layers

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/

Custom Tooltip

tooltipType=hover

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

Base Map Options

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

Layer Options

Areas

Use the <Areas/> component to add an area layer

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

Points

Use the <Points/> component to add an area layer

data
Required

Query result, referenced using curly braces.

Options:
query name
lat
Required

Column containing latitude values.

Options:
column name
long
Required

Column containing longitude values.

Options:
column 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

Bubbles

Use the <Bubbles/> component to add an area layer

data
Required

Query result, referenced using curly braces.

Options:
query name
lat
Required

Column containing latitude values.

Options:
column name
long
Required

Column containing longitude values.

Options:
column name
size
Required

Column that determines the size displayed for each point.

Options:
column name
sizeFmt

Format string for displaying the size value in tooltips.

Options:
format string
maxSize

Maximum size of the bubbles.

Options:
number
Default:
20
value

Column that determines the value displayed at each point (used for color scale).

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
paneType

Specifies the type of pane where the bubbles will be rendered.

Options:
text
z

Represents the z-index value for the pane, controlling its stacking order relative to other panes (higher values are on top, e.g., z=2 is above z=1).

Options:
number

Common Layer Options

Color Scale

colorPalette

Array of colors used for theming the points or 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 point or area is clicked.

Options:
URL
name

Input name. Can be referenced on your page with .

Options:
string

Styling

color

Color for the points or areas. Use when you want all points or areas to be the same color.

Options:
CSS color value
borderWidth

Width of the border around each point or area.

Options:
pixel value
borderColor

Color of the border around each point or area.

Options:
CSS color value
opacity

Opacity of the points or areas.

Options:
number between 0 and 1

Selected State

selectedColor

When point or area is selected: Color for the points or areas.

Options:
CSS color value
selectedBorderWidth

When point or area is selected: Width of the border around each point or area.

Options:
pixel value
selectedBorderColor

When point or area is selected: Color of the border around each point or area.

Options:
CSS color value
selectedOpacity

When point or area is selected: Opacity of the points or areas.

Options:
number between 0 and 1

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
Edit page on GitHub