Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

world-map

v2.11.1arrow_drop_down
v2.11.1
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
190
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
33 KB
A map of the world, or a continent.
2 contributors
Install world-map as a package?
Copied
npm i @bit/grommet.grommet.world-map
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right

WorldMap

A map of the world, or a continent.

Usage

import { WorldMap } from 'grommet';
<WorldMap />

Properties

a11yTitle

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

string

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

gridArea

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

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.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

color

Color when hovering over places while selecting.

string
{
  dark: string,
  light: string
}

continents

Continent details.

[{
  color: 
    string
    {
      dark: string,
      light: string
    },
  name: 
    Africa
    Asia
    Australia
    Europe
    North America
    South America,
  onClick: function,
  onHover: function
}]

fill

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

horizontal
vertical
boolean

onSelectPlace

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

function

places

Place details.

[{
  color: 
    string
    {
      dark: string,
      light: string
    },
  name: string,
  location: [number],
  onClick: function,
  onHover: function
}]

hoverColor

Color when hovering over places while selecting.

string
{
  dark: string,
  light: string
}

Intrinsic element

svg

Theme

worldMap.color

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

Defaults to

light-3

worldMap.continent.active

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

Defaults to

8px

worldMap.continent.base

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

Defaults to

6px

worldMap.hover.color

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

Defaults to

light-4

worldMap.place.active

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

Defaults to

20px

worldMap.place.base

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

Defaults to

8px

worldMap.extend

Any additional style for the WorldMap. Expects string | (props) => {}.

Defaults to

undefined