grommet
components

WorldMap

a map of the world, or a continent

Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

color

Color when hovering over places while selecting.
"string"
{
dark:
"string,"
light: string
}

continents

Continent details.
[
  {
    "name": [
      "Africa",
      "Asia",
      "Australia",
      "Europe",
      "North America",
      "South America"
    ],
    "color": [
      "graph-1",
      {
        "dark": "white",
        "light": "black"
      }
    ],
    "onClick": "(name) => {}",
    "onHover": "(name) => {}"
  }
]

fill

Whether the width and/or height should fill the container.
"horizontal""vertical"truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

hoverColor

Color when hovering over places while selecting.
"string"
{
dark:
"string,"
light: string
}

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onSelectPlace

Called when the user clicks on a place. It is passed the location.

([lat, lon]) => {}

places

Place details. location is an array of two numeric values that indicates the latitude and longitude of the specified location.

[
  {
    "name": "Sydney",
    "color": [
      "graph-1",
      {
        "dark": "white",
        "light": "black"
      }
    ],
    "location": [
      -33.8830555556,
      151.216666667
    ],
    "onClick": "(name) => {}"
  }
]

Theme

worldMap.color

The color for each individual dot when a color is not passed as a prop
"light-3"

worldMap.continent.active

The size of the visual dots belonging to a continent when the continent is being hovered.

"8px"

worldMap.continent.base

The size of the visual dots belonging to a continent that is not being hovered.

"6px"

worldMap.hover.color

The color for an individual dot when it is being hovered
"light-4"

worldMap.place.active

The size of a visual dot for an individual place in the map when it is being hovered.

"20px"

worldMap.place.base

The size of the visual dot representing an individual place in the map when it is not being hovered.

"8px"

worldMap.extend

Any additional style for the WorldMap.
"any CSS"
(props) => {}