@devseed-ui/geo

    1.0.0 • Public • Published

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

    Install

    npm i @devseed-ui/geo

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • hnhubner
    • danielfdsilva
    • vgeorge