Options
All
  • Public
  • Public/Protected
  • All
Menu

@mappedin/react-native-sdk - v4.0.7

Index

Type aliases

MiMapView

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

Type declaration

MiMiniMap

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

Type declaration

TAnimatePositionOptions

TAnimatePositionOptions: { rotation?: number; tilt?: number; zoom?: number }

Type declaration

  • Optional rotation?: number
  • Optional tilt?: number
  • Optional zoom?: number

TCameraAnimationOptions

TCameraAnimationOptions: { duration?: number; easing?: CAMERA_EASING_MODE }

Type declaration

  • Optional duration?: number
  • Optional easing?: CAMERA_EASING_MODE

TCommonLabelOptions

TCommonLabelOptions: { map?: MappedinMap | string; shortText?: string; text: string }

Type declaration

  • Optional map?: MappedinMap | string

    If Polygon is not set, this will let you add a TextLabel to another Map. Otherwise, it will use the currentMap

  • Optional shortText?: string

    The short name text to use for the label.

  • text: string

    The full name text to use for the label.

TEnableBlueDotOptions

TEnableBlueDotOptions: Omit<TEnableBlueDotOptionsBase, "positionUpdater" | "geolocationSource">

TEnableBlueDotOptionsBase

TEnableBlueDotOptionsBase: { allowImplicitFloorLevel?: boolean; baseColor?: number | string; positionUpdater?: IPositionUpdater; showBearing?: boolean; smoothing?: boolean; useRotationMode?: 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 positionUpdater?: IPositionUpdater

    Custom positionUpdater

    defaultvalue

    undefined

  • 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

  • Optional useRotationMode?: boolean

    Whether to use the rotated view while following the user's position.

    defaultvalue

    false

TFlatLabelAppearance

TFlatLabelAppearance: { color?: string; font?: string; fontSize?: number; height?: number; margin?: number; scaleMin?: number; scaleStep?: number }

Type declaration

  • Optional color?: string

    A optional color

  • Optional font?: string

    A CSS style string font. ie "sans-serif". You can specify your own font via @font-face rule with a font family, and then include that here.

  • Optional fontSize?: number

    How big to make the font. Defaults to 12

    default

    12

  • Optional height?: number

    By default this is the upper bounds of the Polygon. If you don't have a Polygon, or want a custom height for some reason, you can set this.

  • Optional margin?: number

    The amount of space to leave before starting the text

    default

    5

  • Optional scaleMin?: number

    The minimum percentage we can shrink the label to if it won't fit within the bounds at 100%. If it doesn't fit at that level, it won't be created.

    default

    0.25

  • Optional scaleStep?: number

    How much to decrement the scale each time it doesn't fit, so we don't end up with too many different font sizes on screen at once. If * you are only labeling a few Polygons rather than everything, you can set this and and scaleMin to 0.1 to fit everything except really long names perfectly.

    default

    0.25

TFlatLabelPolygonOptions

TFlatLabelPolygonOptions: TCommonLabelOptions & { appearance?: TFlatLabelAppearance; flatLabels?: true }

TFloatingLabelAppearance

TFloatingLabelAppearance: { margin?: number; marker?: { backgroundColor?: { active?: string; inactive?: string }; foregroundColor?: { active?: string; inactive?: string }; size?: number }; text?: { backgroundColor?: string; foregroundColor?: string; lineHeight?: number; 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

        Background color of the marker when it is active

      • Optional inactive?: string

        Background 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; lineHeight?: number; maxWidth?: number; numLines?: number; size?: number }
    • Optional backgroundColor?: string

      Text background color

    • Optional foregroundColor?: string

      Text foreground color

    • Optional lineHeight?: number

      Line height sets the height of a line box. It's commonly used to set the distance between lines of text

      default

      1.2

    • 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

TFloatingLabelPolygonOptions

TFloatingLabelPolygonOptions: TCommonLabelOptions & { appearance?: TFloatingLabelAppearance; flatLabels?: false; rank?: COLLISION_RANKING_TIERS | number; scale?: number }

TFocusOnCameraOptions

TFocusOnCameraOptions: { changeZoom?: boolean; minZoom?: number; rotation?: number; safeAreaInsets?: TSafeAreaInsets; tilt?: number }

Type declaration

  • Optional changeZoom?: boolean
  • Optional minZoom?: number
  • Optional rotation?: number
  • Optional safeAreaInsets?: TSafeAreaInsets
  • Optional tilt?: number

TFocusOnOptions

TFocusOnOptions: { animationOptions?: TCameraAnimationOptions; cameraOptions?: TFocusOnCameraOptions; targets?: TFocusOnTargets }

Type declaration

TFocusOnTargets

TFocusOnTargets: { coordinates?: MappedinCoordinate[]; nodes?: MappedinNode[]; points?: Vector3[]; polygons?: MappedinPolygon[] }

Type declaration

TGeolocationObject

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

An extension of the GeolocationPosition type. https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPosition

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; shouldPopulateBundledImagesAsBlobs?: 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; departureMarkerTemplate?: TMarkerTemplateFn; destinationMarkerTemplate?: TMarkerTemplateFn; inactivePathOptions?: TPathOptions; pathOptions?: TPathOptions; polygonHighlightColor?: string | false }

Type declaration

  • Optional connectionTemplate?: TConnectionTemplateFn

    Function that returns an HTML template to use as a connection tooltips (elevators, escalators, etc)

  • Optional departureMarkerTemplate?: TMarkerTemplateFn

    Function that returns an HTML template to use as a departure marker. Override with null | undefined to disable

  • Optional destinationMarkerTemplate?: TMarkerTemplateFn

    Function that returns an HTML template to use as a destination marker. Override with null | undefined to disable

  • Optional inactivePathOptions?: TPathOptions

    Path Options for the non-current path in multi-destination mode.

  • Optional pathOptions?: TPathOptions

    Path Options

  • Optional polygonHighlightColor?: string | false

    What color to highlight departure and destination polygons Pass false to disable

    default

    #0xff834c

TLabelAllLocationCommonOptions

TLabelAllLocationCommonOptions: Omit<TLabelAllLocationCommonOptionsBase, "sortFunction" | "translationMap">

TLabelAllLocationCommonOptionsBase

TLabelAllLocationCommonOptionsBase: { createDespiteImage?: boolean; excludeTypes?: string[]; locations?: MappedinLocation[]; translationMap?: {[ key in string]: string }; sortFunction?: any }

Type declaration

  • Optional createDespiteImage?: boolean

    Display label despite the polygon having an image on it

    default

    false

  • Optional excludeTypes?: string[]

    Exclude specific location types from labeling

  • Optional locations?: MappedinLocation[]

    Locations to label - otherwise, use current venue object

  • Optional translationMap?: {[ key in string]: string }

    Custom Translation Map for {@link MappedinLocation.MappedinLocationState}

  • sortFunction: function

TLabelAllLocationFlatLabelOptions

TLabelAllLocationFlatLabelOptions: TLabelAllLocationCommonOptionsBase & { appearance?: TFlatLabelAppearance; flatLabels: true }

TLabelAllLocationFloatingLabelOptions

TLabelAllLocationFloatingLabelOptions: TLabelAllLocationCommonOptionsBase & { appearance?: TFloatingLabelAppearance; flatLabels?: false }

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: { options: TMiMapViewOptions; ref: React.ForwardedRef<MapViewStore>; style?: any; venueData?: Mappedin; onBlueDotPositionUpdated?: any; onBlueDotStateChanged?: any; onDataLoaded?: any; onFirstMapLoaded?: any; onMapChanged?: any; onNothingClicked?: any; onPolygonClicked?: any; onStateChanged?: any }

Type declaration

  • 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

  • onBlueDotPositionUpdated: function
    • onBlueDotPositionUpdated(prop: { update: TBlueDotPositionUpdate }): void
    • Called when Blue Dot position is updated

      Parameters

      • prop: { update: TBlueDotPositionUpdate }
        • update: TBlueDotPositionUpdate

      Returns void

  • onBlueDotStateChanged: function
    • 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

      Parameters

      • prop: { stateChange: TBlueDotStateChange }
        • stateChange: TBlueDotStateChange

      Returns void

  • onDataLoaded: function
    • onDataLoaded(prop: { venueData: Mappedin }): void
    • Called when data is loaded for this venue

      Parameters

      Returns void

  • onFirstMapLoaded: function
    • onFirstMapLoaded(): void
    • Called when the map is ready for interaction

      Returns void

  • onMapChanged: function
  • onNothingClicked: function
    • onNothingClicked(): void
    • Called when clicking outside any interactive polygons

      Returns void

  • onPolygonClicked: function
  • onStateChanged: function
    • onStateChanged(prop: { state: STATE }): void
    • Called when the SDK state changes

      Parameters

      Returns void

TMiMiniMapProps

TMiMiniMapProps: { focusOptions?: TFocusOnOptions; location: MappedinLocation["id"] | MappedinLocation; options: TMiMapViewOptions; polygonHighlightColor?: string; style?: any; venueData?: Mappedin; onLoad?: any }

Type declaration

TPathOptions

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

Type declaration

  • Optional animateDrawing?: boolean

    Animate the drawing of the path in the direction of travel.

    defaultvalue

    true

  • Optional color?: number | string

    Path Colour

    defaultvalue

    #00b800

  • Optional displayArrowsOnPath?: boolean

    Show arrows on path

    defaultvalue

    true

  • Optional drawDuration?: number

    Duration of path drawing

    defaultvalue

    1500

  • Optional farRadius?: number

    Radius of path at furthest zoom, in metres

    defaultvalue

    2.3 times nearRadius

  • Optional farZoom?: number

    Zoom level where the path size is farRadiustions.nearRadius

    defaultvalue

    10000

  • Optional flattenPath?: boolean

    Flatten the path to a 2D line

    defaultvalue

    false

  • Optional nearRadius?: number

    Radius of path at nearest zoom, in metres

    defaultvalue

    1.8

  • 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

    1.8

    deprecated
  • Optional showPulse?: boolean

    Show an animated pulse indicating the direction of travel.

    defaultvalue

    true

TSerializableJourneyOptions

TSerializableJourneyOptions: TJourneyOptions & Omit<TJourneyOptions, "connectionTemplate" | "color" | "destinationMarkerTemplate" | "departureMarkerTemplate"> & { color?: string; connectionTemplateString?: string; departureMarkerTemplateString?: string; destinationMarkerTemplateString?: string }

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" | "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; lineHeight: number; 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; lineHeight: number; 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; lineHeight: number; 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; lineHeight: number; maxWidth: number; numLines: number; size: number }
      • backgroundColor: string
      • foregroundColor: string
      • lineHeight: number
      • 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; lineHeight: number; 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; lineHeight: number; maxWidth: number; numLines: number; size: number }
      • backgroundColor: string
      • foregroundColor: string
      • lineHeight: number
      • 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>