Options
All
  • Public
  • Public/Protected
  • All
Menu

@mappedin/react-native-sdk

Index

Enumerations

Classes

Type aliases

Component Variables

Other Variables

Functions

Type aliases

MiMapView

MiMapView: (props: TMiMapViewProps) => React.ReactElement

Mappedin MapView component

Type declaration

MiMiniMap

MiMiniMap: (props: TMiMiniMapProps) => React.ReactElement

Mappedin MiniMap component

Type declaration

TBlueDotOptions

TBlueDotOptions: { allowImplicitFloorLevel?: boolean; baseColor?: number | string; showBearing?: boolean; smoothing?: boolean }

Type declaration

  • Optional allowImplicitFloorLevel?: boolean

    For venues that do not provide level updates, assume the user is always on the default map If this is false, and no level information is found from position updates, blueDotUpdate events will not include the nearest node This should probably be set true for single floor venues that have no level information in position updates

    defaultvalue

    false

  • Optional baseColor?: number | string

    Override the default color of the Blue Dot. We interpolate other colors, (such as aura and bearing) from this base color

    defaultvalue

    0x2266ff

  • Optional showBearing?: boolean

    Show Bearing

    defaultvalue

    false

  • Optional smoothing?: boolean

    Smooth incoming position updates. Set to false if smoothing happens outside the SDK

    defaultvalue

    true

TBlueDotPositionUpdate

TBlueDotPositionUpdate: { bearing: number; map: MappedinMap; nearestNode: MappedinNode; position: TGeolocationObject }

Type declaration

TBlueDotStateChange

TBlueDotStateChange: { markerVisibility?: E_MARKER_STATE; message?: GeolocationPositionError | string; name: E_BLUEDOT_STATE; reason?: E_BLUEDOT_STATE_REASON }

Type declaration

  • Optional markerVisibility?: E_MARKER_STATE

    Visiblity State of the BlueDot marker

  • Optional message?: GeolocationPositionError | string

    Additional message to complement the reason

  • name: E_BLUEDOT_STATE

    What we currently know about the user's position, and how confident we are.

  • Optional reason?: E_BLUEDOT_STATE_REASON

    Reason why BlueDot may be in the current state

TBlueDotUpdate

TBlueDotUpdate: { bearing: any; error: string; map: MappedinMap; nearestNode: MappedinNode; position: TGeolocationObject; state: any }
deprecated

Type declaration

TCreateMarkerOptions

TCreateMarkerOptions: { anchor?: MARKER_ANCHOR; rank?: COLLISION_RANKING_TIERS }

Type declaration

TFocusOptions

TFocusOptions: { changeZoom?: boolean; curve?: any; duration?: number; focusZoomFactor?: number; minZoom?: number; nodes?: (MappedinNode["id"] | MappedinNode)[]; padding?: { bottom: number; left: number; right: number; top: number }; polygons?: (MappedinPolygon["id"] | MappedinPolygon)[]; tilt?: number }

Type declaration

  • Optional changeZoom?: boolean

    Whether to zoom the camera in or out, or just pan it.

    defaultvalue

    true

  • Optional curve?: any

    The animation curve to use for zooming in. Uses the animateCamera one by default.

  • Optional duration?: number

    The duration the focus animation should last for.

    defaultvalue

    100

  • Optional focusZoomFactor?: number

    You can overide the {{#crossLink "MapView/focusZoomFactor:property"}}{{/crossLink}} for a specific {{#crossLink "MapView/focusOn:method"}}{{/crossLink}} call, rather than globally, if you like.

  • Optional minZoom?: number

    Sets a floor for how close you can zoom in on the scene. If it's lower than mapView.controls.minZoom, it's ignored.

    defaultvalue:

    0

  • Optional nodes?: (MappedinNode["id"] | MappedinNode)[]

    An array of Nodes to focus in on

  • Optional padding?: { bottom: number; left: number; right: number; top: number }
    • bottom: number
    • left: number
    • right: number
    • top: number
  • Optional polygons?: (MappedinPolygon["id"] | MappedinPolygon)[]

    An array of Polygons to focus on. It's the center of the bounds of all Polygons, designed to fit everything into view.

  • Optional tilt?: number

    Camera tilt

TGeolocationObject

TGeolocationObject: { coords: { accuracy: number; floorLevel?: number; latitude: number; longitude: number }; positionIndex?: number; timestamp: number; type?: GEOLOCATION_STATUS }

Type declaration

  • coords: { accuracy: number; floorLevel?: number; latitude: number; longitude: number }
    • accuracy: number
    • Optional floorLevel?: number
    • latitude: number
    • longitude: number
  • Optional positionIndex?: number
  • timestamp: number
  • Optional type?: GEOLOCATION_STATUS

TGetVenueBundleOptions

TGetVenueBundleOptions: TGetVenueOptions & { bundleBaseUri?: string; useBundleAssets?: boolean; version?: string }

TGetVenueOptions

TGetVenueOptions: { accessToken?: string; baseUrl?: string; clientId?: string; clientSecret?: string; headers?: {[ key in string]: string }; includeHidden?: boolean; language?: string; noAuth?: boolean; perspective?: string; things?: any; venue: string }

Type declaration

  • Optional accessToken?: string
  • Optional baseUrl?: string
  • Optional clientId?: string
  • Optional clientSecret?: string
  • Optional headers?: {[ key in string]: string }
  • Optional includeHidden?: boolean
  • Optional language?: string
  • Optional noAuth?: boolean
  • Optional perspective?: string
  • Optional things?: any
  • venue: string

TJourneyOptions

TJourneyOptions: { connectionTemplate?: TConnectionTemplateFn; pathOptions?: TPathOptions }

Type declaration

  • Optional connectionTemplate?: TConnectionTemplateFn

    Template to use for connection tooltips

  • Optional pathOptions?: TPathOptions

    Path Options

TLabelAllLocationsOptions

TLabelAllLocationsOptions: { appearance?: TLabelAppearance; locations?: (MappedinLocation | MappedinLocation["id"])[] }

Type declaration

TLabelAppearance

TLabelAppearance: { margin?: number; marker?: { backgroundColor?: { active?: string; inactive?: string }; foregroundColor?: { active?: string; inactive?: string }; size?: number }; text?: { backgroundColor?: string; foregroundColor?: string; maxWidth?: number; numLines?: number; size?: number } }

Type declaration

  • Optional margin?: number

    Margin around the label and marker. This will affect label density

  • Optional marker?: { backgroundColor?: { active?: string; inactive?: string }; foregroundColor?: { active?: string; inactive?: string }; size?: number }
    • Optional backgroundColor?: { active?: string; inactive?: string }
      • Optional active?: string

        Foreground color of the marker when it is active

      • Optional inactive?: string

        Foreground color of the marker when it is inactive (grayed out due to being outranked by other labels around)

    • Optional foregroundColor?: { active?: string; inactive?: string }
      • Optional active?: string

        Foreground color of the marker when it is active

      • Optional inactive?: string

        Foreground color of the marker when it is inactive (grayed out due to being outranked by other labels around)

    • Optional size?: number

      Size of the marker in pixels

  • Optional text?: { backgroundColor?: string; foregroundColor?: string; maxWidth?: number; numLines?: number; size?: number }
    • Optional backgroundColor?: string

      Text background color

    • Optional foregroundColor?: string

      Text foreground color

    • Optional maxWidth?: number

      Maxiumum width of text in pixels

    • Optional numLines?: number

      Number of lines to display when text spans multiple lines

    • Optional size?: number

      Text size in pixels

TLabelOptions

TLabelOptions: { activeColor?: string; appearance?: TLabelAppearance; color?: string; inactiveColor?: string; markerSize?: number; maxTextDivWidth?: number; rank?: number; shortText?: string; stateText?: string; text: string; textLines?: number; textSize?: number }

Type declaration

  • Optional activeColor?: string
    deprecated.

    Use appearance instead

  • Optional appearance?: TLabelAppearance
  • Optional color?: string
    deprecated.

    Use appearance instead

  • Optional inactiveColor?: string
    deprecated.

    Use appearance instead

  • Optional markerSize?: number
    deprecated.

    Use appearance instead

  • Optional maxTextDivWidth?: number
    deprecated.

    Use appearance instead

  • Optional rank?: number
  • Optional shortText?: string
  • Optional stateText?: string
  • text: string
  • Optional textLines?: number
    deprecated.

    Use appearance instead

  • Optional textSize?: number
    deprecated.

    Use appearance instead

TMappedinDirective

TMappedinDirective: { action?: IAction; atLocation?: MappedinVortex; distance: number; instruction: string; node: MappedinNode; type?: BEARING_TYPE }

this is the "overloaded" version of the directive, with get-venue classes instead of stubs

Type declaration

  • Optional action?: IAction
  • Optional atLocation?: MappedinVortex
  • distance: number

    Distance from the last instruction to the current. Useful for turn by turn navigation

  • instruction: string
  • node: MappedinNode
  • Optional type?: BEARING_TYPE

TMiMapViewOptions

TMiMapViewOptions: TShowVenueOptions & { baseUrl?: string; clientId?: string; clientSecret?: string; language?: string; noAuth?: boolean; perspective?: string; venue: string }

TMiMapViewProps

TMiMapViewProps: { onBlueDotPositionUpdated?: (prop: { update: TBlueDotPositionUpdate }) => void; onBlueDotStateChanged?: (prop: { stateChange: TBlueDotStateChange }) => void; onBlueDotUpdated?: (prop: { update: TBlueDotUpdate }) => void; onDataLoaded?: (prop: { venueData: Mappedin }) => void; onFirstMapLoaded?: () => void; onMapChanged?: (prop: { map: MappedinMap }) => void; onNothingClicked?: () => void; onPolygonClicked?: (prop: { polygon: MappedinPolygon }) => void; onStateChanged?: (prop: { state: STATE }) => void; options: TMiMapViewOptions; ref: React.ForwardedRef<MapViewStore>; style?: any; venueData?: Mappedin }

Type declaration

  • Optional onBlueDotPositionUpdated?: (prop: { update: TBlueDotPositionUpdate }) => void

    Called when Blue Dot position is updated

  • Optional onBlueDotStateChanged?: (prop: { stateChange: TBlueDotStateChange }) => void

    Called when Blue Dot State is updated. This can be used to figure out why the Blue Dot is not visible

  • Optional onBlueDotUpdated?: (prop: { update: TBlueDotUpdate }) => void

    Called when blue dot is updated

    deprecated

    Use onBlueDotPositionUpdated and onBlueDotStateChanged instead

  • Optional onDataLoaded?: (prop: { venueData: Mappedin }) => void

    Called when data is loaded for this venue

  • Optional onFirstMapLoaded?: () => void

    Called when the map is ready for interaction

      • (): void

      • Returns void

  • Optional onMapChanged?: (prop: { map: MappedinMap }) => void

    Called when the map changes

  • Optional onNothingClicked?: () => void

    Called when clicking outside any interactive polygons

      • (): void

      • Returns void

  • Optional onPolygonClicked?: (prop: { polygon: MappedinPolygon }) => void

    Called when an interactive polygon is clicked

  • Optional onStateChanged?: (prop: { state: STATE }) => void

    Called when the SDK state changes

      • (prop: { state: STATE }): void

      • Parameters

        Returns void

  • options: TMiMapViewOptions

    Options to initialze MiMapView with

  • ref: React.ForwardedRef<MapViewStore>

    The MapViewStore instance will be returned here

  • Optional style?: any
  • Optional venueData?: Mappedin

    Venue Data to render inside the MapView. This is returned by getVenue or getVenueBundle

TMiMiniMapProps

TMiMiniMapProps: { focusOptions?: (props: TFocusOptions) => void; location: MappedinLocation["id"] | MappedinLocation; onLoad?: () => void; options: TMiMapViewOptions; polygonHighlightColor?: string; style?: any; venueData?: Mappedin }

Type declaration

TPathOptions

TPathOptions: { color?: number; displayArrowsOnPath?: boolean; drawDuration?: number; farRadius?: number; farZoom?: number; nearRadius?: number; nearZoom?: number; pulseColor?: string; pulseIterations?: number; pulsePauseDuration?: number; radius?: number }

Type declaration

  • Optional color?: number

    Path Colour

    defaultvalue

    0xff834c

  • Optional displayArrowsOnPath?: boolean

    Show arrows on path

    defaultvalue

    false

  • Optional drawDuration?: number

    Duration of path drawing

    defaultvalue

    1500

  • Optional farRadius?: number

    Radius of path at furthest zoom

    defaultvalue

    20

  • Optional farZoom?: number

    Zoom level where the path size is farRadiustions.nearRadius

    defaultvalue

    10000

  • Optional nearRadius?: number

    Radius of path at nearest zoom

    defaultvalue

    20

  • Optional nearZoom?: number

    Zoom level where the path size is nearRadius

    defaultvalue

    375

  • Optional pulseColor?: string

    Colour of path pulse

    defaultvalue

    0xffffff

  • Optional pulseIterations?: number

    Number of iterations to pulse to indicate direction

    defaultvalue

    Infinity

  • Optional pulsePauseDuration?: number

    How many milliseconds to wait before starting the next pulse after the current pulse travels the entirety of the path

    defaultvalue

    750

  • Optional radius?: number

    (Deprecated) alias for nearRadiusty

    defaultvalue

    20

    deprecated

TShowVenueOptions

TShowVenueOptions: { backgroundAlpha?: number; backgroundColor?: string; firstMapId?: string; labelAllLocationsOnInit?: boolean }

Type declaration

  • Optional backgroundAlpha?: number

    The opacity of the initial background color.

  • Optional backgroundColor?: string

    Sets the initial background color of the map, including while loading.

  • Optional firstMapId?: string

    The id of the first map to show on map load

  • Optional labelAllLocationsOnInit?: boolean

    Whether or not to display labels initially

Component Variables

MiMapView

MiMapView: MemoExoticComponent<ForwardRefExoticComponent<Pick<TMiMapViewProps, "options" | "venueData" | "style" | "onPolygonClicked" | "onBlueDotUpdated" | "onBlueDotStateChanged" | "onBlueDotPositionUpdated" | "onDataLoaded" | "onNothingClicked" | "onFirstMapLoaded" | "onMapChanged" | "onStateChanged"> & RefAttributes<MapViewStore>>>

MiMiniMap

MiMiniMap: NamedExoticComponent<TMiMiniMapProps>

Mappedin MiniMap component

Other Variables

Const labelThemes

labelThemes: { darkOnLight: { margin: number; marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }; text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number } }; lightOnDark: { margin: number; marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }; text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number } } } = ...

Type declaration

  • darkOnLight: { margin: number; marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }; text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number } }
    • margin: number
    • marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }
      • backgroundColor: { active: string; inactive: undefined }
        • active: string
        • inactive: undefined
      • foregroundColor: { active: string; inactive: undefined }
        • active: string
        • inactive: undefined
      • size: number
    • text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number }
      • backgroundColor: string
      • foregroundColor: string
      • maxWidth: number
      • numLines: number
      • size: number
  • lightOnDark: { margin: number; marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }; text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number } }
    • margin: number
    • marker: { backgroundColor: { active: string; inactive: undefined }; foregroundColor: { active: string; inactive: undefined }; size: number }
      • backgroundColor: { active: string; inactive: undefined }
        • active: string
        • inactive: undefined
      • foregroundColor: { active: string; inactive: undefined }
        • active: string
        • inactive: undefined
      • size: number
    • text: { backgroundColor: string; foregroundColor: string; maxWidth: number; numLines: number; size: number }
      • backgroundColor: string
      • foregroundColor: string
      • maxWidth: number
      • numLines: number
      • size: number

Functions

getVenue

getVenueBundle

  • [experimental] Fetching an offline Venue bundle It is possible to download the venue bundle with all assets built in, which allows for caching/offline solutions. Note 1: This requires enabling from Mappedin's Customer Solutions team. Note 2: This may behave a lot slower for large venues, especially those with many images. We are actively working on improving load times.

    Parameters

    Returns Promise<Mappedin>