Cinderblock Transportation Card

Reusable Component in Knotel's Design System

Import Required external dependencies Usage Properties

Import

  import TransitCard from '@knotel/transportation'

Required external dependencies

@knotel/cinderblock
prop-types
react-dom
react-map-gl
react
styled-components

Usage

<TransitCard
  mapboxToken="XXXX"
  clientID="XXXX"
  clientSecret="XXXX"
  lat={51.516}
  lng={-0.133}
  zoom={{ desktop: 10, mobile: 15 }}
/>

Properties

| Prop | Type | Default | Note | |---|---|---|---| | mapboxToken | string! | | Mapbox API access token for MapboxGL. | clientID | string! | | Client id for Foursquare API. | clientSecret | string! | | Client secret for Foursquare API. | zoom | number or object | 15 | Initial the zoom level of the map on desktop version. If passed a number, it's set as initial value on desktop and mobile version. If passed a object, you can set the zoom level as on mobile version as on desktop version separately. For example { desktop: 15, mobile: 15 } | lat | number! | | The latitude of the center of the map. | lng | number! | | The longitude of the center of the map.

Triggering a (nohup) Build (by changing the next line):

2