@knotel/transportation

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