WorldMap

a map of the world, or a continent

Props

a11yTitle

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

string

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

string

"start"

"center"

"end"

"stretch"

color

Color when hovering over places while selecting.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

continents

Continent details.

array


[
  {
    name: "string",
    color: "string" | { dark: "white", light: "black" },
    onClick: (name) => {},
    onHover: (name) => {}
  },
]

where name could be:

"Africa"

"Asia"

"Australia"

"Europe"

"North America"

"South America"

fill

Whether the width and/or height should fill the container.

string

"horizontal"

"vertical"

boolean

true

false

gridArea

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

string

"a parent grid area name"

hoverColor

Color when hovering over places while selecting.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

onSelectPlace

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

function

([lat, lon]) => {}

places

Place details.

array

'location' is an array of two numeric values that indicates the latitude and longitude of the specified location. It should be given a 'name' for accessibility. 'onClick' and 'onHover' allow user interaction with each place. 'content' and 'dropProps' allow attaching additional content near each place.


[
  {
    color: "string" | 
      { dark: "string", light: "string" },
    content: (
      <Box pad={{ horizontal: 'small', vertical: 'xsmall' }}>
        <Text>Sydney</Text>
      </Box>
    ),
    dropProps: {
      align: { left: 'right' },
      background: { color: 'background-contrast' },
      margin: { left: 'small' },
      round: 'xsmall',
    },
    name: "Sydney",
    location: [
      -33.8830555556, 
      151.216666667
    ],
    onClick: function,
    onHover: function
  },
]

React/DOM Properties

At its core, the WorldMap component is a regular <svg> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for svg elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

worldMap.color

The color for each individual dot when a color is not passed as a prop.

string

"light-3"

worldMap.continent.active

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

string

"8px"

worldMap.continent.base

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

string

"6px"

worldMap.hover.color

The color for an individual dot when it is being hovered.

string

"light-4"

worldMap.place.active

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

string

"20px"

worldMap.place.base

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

string

"8px"

worldMap.extend

Any additional style for the WorldMap.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}