@devseed-ui/geo v4.1.0

Geo

Import

  import { StaticMap } from '@devseed-ui/geo';

Guidelines and examples

This component can be used to render a static map (non-interactive!) as an image.

The image ratio updates responsively with the size of the container. The maximum width and height is 1280px, which is determinded by the mapbox static image api ({Width}|{Height} must be between 1-1280.). The component has no default size and will have to be styled with your preferred styling method. For example:

  const StaticMapStyled = styled(StaticMap)`
    width: 100%;
    height: 20rem;
  `;

  <StaticMapStyled accessToken='pk.token'/>

Variations

When used without props, a map of Berlin with the map style light is displayed.

  <StaticMap
    style={{ width: '100%', height: '20rem' }}
    accessToken="pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJja2l1OGN2ZmkxMXF5MnBzY3k1ZWg1emV2In0.i7uVjcV45hTXEqVK8Ql1jQ"
  />

Basemap style and displayed location can be controlled using props:

  <StaticMap
    style={{ width: '100%', height: '20rem' }}
    description="an outdoor map"
    mbStyle="mapbox/outdoors-v11"
    zoom={12}
    accessToken="pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJja2l1OGN2ZmkxMXF5MnBzY3k1ZWg1emV2In0.i7uVjcV45hTXEqVK8Ql1jQ"
  />

API Documentation

rows:
  - Prop name: "description"
    Type: "string"
    Description: "the alt tag for the static map image"
    Default value: "a static map"
  - Prop name: "mbStyle"
    Type: "oneOf [
      'mapbox/light-v10',
      'mapbox/streets-v11',
      'mapbox/outdoors-v11',
      'mapbox/light-v10',
      'mapbox/dark-v10',
      'mapbox/satellite-v9',
      'mapbox/satellite-streets-v11',
      ... '{username}/{style_id}'
    ]"
    Description: "A mapbox style can be specified in the format of `{username}/{style_id}` that is used to determine the basemap. To learn more about mapbox styles, head over to [https://docs.mapbox.com/api/maps/#styles](https://docs.mapbox.com/api/maps/#styles)."
    Default value: "mapbox/light-v10"
  - Prop name: "center"
    Type: "array"
    Description: "the lon,lat coordinates of the map center"
    Default value: [13.4043,52.5317]
  - Prop name: "zoom"
    Type: "oneOfType [number, string]"
    Description: "the zoom level of the map"
    Default value: 11.2
  - Prop name: "accessToken"
    Type: "string"
    Description: "the access token for the mapbox service ('pk.eyJ1I...', get one at https://account.mapbox.com)"
    Default value: ""