Home Components Base Map

Base Map

<BaseMap>
  <Areas data={la_zip_sales} geoId=ZCTA5CE10 areaCol=zip_code value=sales valueFmt=usd/>
  <Points data={la_locations} lat=lat long=long color=#179917/>
</BaseMap>

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

<BaseMap>
  <Areas 
    data={la_zip_sales}
    areaCol=zip_code
    geoJsonUrl="path/to/your/geoJSON"
    geoId=ZCTA5CE10
    value=sales
    valueFmt=usd
  />
  <Bubbles 
    data={la_locations}
    lat=lat
    long=long
    size=sales
    sizeFmt=usd
    value=sales
    valueFmt=usd
    pointName=point_name
    colorPalette={['yellow','orange','red','darkred']}
    opacity=0.5
  />
</BaseMap>

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/

<BaseMap basemap={`https://tile.openstreetmap.org/{z}/{x}/{y}.png`}>
    <Points 
        data={la_locations}
        lat=lat
        long=long
        value=sales
        valueFmt=usd
        pointName=point_name
        color=violet
        borderColor=black
        borderWidth=2
    />
</BaseMap>

Custom Tooltip

tooltipType=hover

<BaseMap>
    <Areas 
        data={la_zip_sales} 
        areaCol=zip_code
        geoJsonUrl='/geo-json/ca_california_zip_codes_geo_1.min.json'
        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'}
        ]}
    />
</BaseMap>
<BaseMap>
    <Areas 
        data={la_zip_sales} 
        areaCol=zip_code
        geoJsonUrl='/geo-json/ca_california_zip_codes_geo_1.min.json'
        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'}
        ]}
    />
</BaseMap>

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
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 project, store it in a static folder in the root of your project, and 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

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