Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Index

Constructors

  • Parameters

    Returns MapView

Properties

BlueDot: BlueDotLayer
Camera: Camera
Journey: JourneyLayer
currentPath?: MappedinNode[]
options: TMapViewOptions = {}

Accessors

  • get container(): HTMLElement
  • The div MapView is using.

    property

    container {Div}

    final

    Returns HTMLElement

  • The Venue data this MapView is using.

    property

    venue {MappedinVenue}

    final

    Returns Mappedin

Methods

  • Makes a single Polygon hoverable/clickable. Polygons you haven't called this on will be treated as non-interactive and not respond to any mouse events.

    Parameters

    Returns void

  • addInteractivePolygonsForAllLocations(options?: { excludeTypes?: string[]; locations?: MappedinLocation[] }): void
  • Makes all polygons attached to a location hoverable/clickable. Polygons you haven't called this on will be treated as non-interactive This is a convenience function for calling MapView.addInteractivePolygon on all the polygons attached to all locations. You may also make individual polygons interactive with the addInteractivePolygon method instead of, or in addition to this method.

    Parameters

    • Optional options: { excludeTypes?: string[]; locations?: MappedinLocation[] }
      • Optional excludeTypes?: string[]

        A list of Location types to skip. All locations of this type will be exluded from becoming interactive

      • Optional locations?: MappedinLocation[]

        An array of Location objects. Overrides the default of making all locations interactive, and instead applies to only the locations specified here.

    Returns void

  • clearAllPolygonColors(): void
  • Resets ALL Polygons you have changed with MapView.setPolygonColor back to their original color. The hover effect will still be present if the user is currently hovering over a Polygon.

    Returns void

  • Resets a Polygon back to it's original color. If the user is hovering over a polygon, it will still have the hover effect.

    Parameters

    • polygonOrPolygonId: string | MappedinPolygon

      The Polygon/Polygon ID to reset.

    Returns void

  • Add a ThreeJS object to the screen to be rendered on the marker layer.

    Parameters

    Returns ThreeJSMarkerHandle

  • This creates a tooltip that allows you to pass dynamic content which will attempt to position around an anchor in 3D space. The tooltip will be positioned based on one of four AnchorTypes (top, bottom, left, right).

    options.defaultAnchorType and options.enabledAnchorTypes should be one of the constants from Mappedin.Tooltip.ANCHOR

    options.defaultAnchorType will override options.enabledAnchorTypes if that anchor was disabled it will be automatically re-enabled

    Parameters

    Returns SmartTooltip

    The Tooltip you created, which has already been added to the scene.

  • destroy(): void
  • Destroy instance and clean up memory

    Returns void

  • disableImageFlippingForAllPolygons(): void
  • Returns void

  • Draws an entire path. It takes a list of Nodes and will break them into separate pathSegments on every map change, putting the resultant segment on the right Map.

    Parameters

    Returns string

    An array of pathSegment ids.

  • enableImageFlippingForAllLocations(options?: { excludeTypes?: string[]; locations?: string[] | MappedinLocation[] }): void
  • Let any image attached to a Polygon attached to a Location flip 180 degrees with the camera so it's always upright.

    method

    enableImageFlippingForAllLocations

    Parameters

    • Optional options: { excludeTypes?: string[]; locations?: string[] | MappedinLocation[] }
      • Optional excludeTypes?: string[]

        A list of Location types to skip, if for some reason there are Locations that have logos that shouldn't flip.

      • Optional locations?: string[] | MappedinLocation[]

        An array of Location objects, or Location IDs. If excludeTypes is not sufficient you can explicitly set the Locations you are marking to flip. You can also call MapView.enableImageFlippingForPolygon manually for every polygon you care about instead.

    Returns void

  • enableImageFlippingForPolygon(options: { polygonId: string; rotation?: number }): void
  • Mark a specific Polygon so, if it has an image, it rotates with the camera.

    Parameters

    • options: { polygonId: string; rotation?: number }
      • polygonId: string

        The ID of the Polygon who's image (if any) should rotate.

      • Optional rotation?: number

        The how much the image has been rotated so that it's "up". Determined from the Polygon object itself typically, but can be set manually if needed.

    Returns void

  • Get Nearest Node to a screen coordinate x, y, map. Useful for doing directions from any place on the map

    Parameters

    • x: number
    • y: number
    • Optional mapOrMapId: string | MappedinMap

      Map of MapId

    Returns MappedinNode

  • Finds all polygons that contain the specified MappedinCoordinate. If multiple polygons are stacked on top of each other, the array of polygons returned will be in the order of top to bottom.

    By default, this only considers interactive polygons.

    Parameters

    • coordinate: MappedinCoordinate

      The MappedinCoordinate to check

    • includeNonInteractive: boolean = false

      Specifies if all polygons should be included rather than just interactive polygons.

    Returns MappedinPolygon[]

    MappedinPolygon[]

  • Finds the main Location associated with a Polygon. This means a Location attached to the Polygon that has no parents, or, if there are none of those, a Location nearest the top of some hierarchy that does have the Polygon attached.

    This means if there are multiple hierarchies of Locations attached to the Polygon, the one that gets returned is not guaranteed to be what you want.

    Parameters

    Returns MappedinLocation

  • Labels a specific Polygon using a floating 2D label that remains the same size regardless of zoom

    Parameters

    Returns FloatingLabel

  • Labels a specific Polygon (or area of 3D space) with a TextLabel that lives in 3D space. That means it will be smaller when the camera is further away, and the angle you see it at will change with the camera. The text will flip 180 degrees when the camera rotates so it's never totally upside-down.

    It also sets the hover label (in 2D and 3D). Many of these options do nothing in 2D, as TextLabels are not supported, but it won't break anything.

    You must provide text, and either a Polygon, or a canvasBounds and height

    Parameters

    Returns TFlatLabel

  • off<EVENT_NAME>(eventName: EVENT_NAME, fn: (payload: E_SDK_EVENT_PAYLOAD[EVENT_NAME]) => void): void
  • openAllPolygons(): void
  • As the name suggests, all polygons will have their "closed" state set to "opened".

    Returns void

  • removeAllInteractivePolygons(): void
  • Remove all interactive polygons

    Returns void

  • removeAllLabels(): void
  • Removes all labels from all Maps.

    Returns void

  • removeAllMarkers(): void
  • Removes all Markers (from all Maps, not just the current one).

    Returns void

  • removeAllPaths(): void
  • Removes all pathSegments from all Maps.

    Returns void

  • removeAllThreeJSMarkers(): void
  • Remove all ThreeJS marker from the scene.

    Returns void

  • removeAllTooltips(): void
  • Remove all tooltips

    Returns void

  • removeInteractivePolygon(polygonOrPolygonId: string | MappedinPolygon): void
  • Makes a polygon no longer hoverable/clickable.

    Parameters

    • polygonOrPolygonId: string | MappedinPolygon

      The previously interactive Polygon/Polygon ID to make non-interactive.

    Returns void

  • removeMarker(markerOrMarkerId: string | Marker): void
  • Remove Marker

    Parameters

    • markerOrMarkerId: string | Marker

    Returns void

  • removePath(pathId: string): void
  • Remove a path by id

    Parameters

    • pathId: string

    Returns void

  • removeThreeJSMarker(markerHandle: ThreeJSMarkerHandle): boolean
  • Remove a ThreeJS marker from the scene. This will be a no-op if the map object associated with the marker has been destroyed.

    Parameters

    • markerHandle: ThreeJSMarkerHandle

      marker to remove

    Returns boolean

    true if the marker was removed, false if the marker or its map had already been removed

  • removeTooltip(tooltipOrTooltipId: string | SmartTooltip): void
  • Removes a {@link Tooltip} you have added previously.

    Parameters

    • tooltipOrTooltipId: string | SmartTooltip

      A Tooltip that has previously been returned from MapView.createTooltip.

    Returns void

  • setBackgroundColor(color: string | number, alpha?: number): void
  • Sets the clear color of the Map something else, it you want it to fit it more with your website. Otherwise the div will be white where there is no Map visible.

    Parameters

    • color: string | number

      The color to use. Not an HTML color name.

    • Optional alpha: number

      Opacity between 0 and 1.

    Returns void

  • setHoverColor(color: string | number): void
  • Sets the color for hovering over polygons

    Parameters

    • color: string | number

    Returns void

  • setMap(mapOrMapId: string | MappedinMap): Promise<null>
  • Change the currently displayed Map to a new one.

    method

    setMap

    Parameters

    • mapOrMapId: string | MappedinMap

      The Map ID or Map Object to change the Map to.

    Returns Promise<null>

  • setPolygonColor(polygonOrPolygonId: string | MappedinPolygon, color: string, textColor?: string, opacity?: number): void
  • Given a polygon/polygon id, set it to a specific color, and set any text label associated with that polygon to another color.

    Parameters

    • polygonOrPolygonId: string | MappedinPolygon

      The Polygon/Polygon ID to change the color of.

    • color: string

      The color to use.

    • Optional textColor: string
    • Optional opacity: number

    Returns void

  • setState(state: STATE): void
  • Unsubscribe from SDK events

    Parameters

    Returns void

  • tryRendering(renderMode?: any): void
  • The scene only renders when something has changed. This should be something a 3rd party developer doesn't need to worry about, but if you are doing something weird, or have your own special tween for something, you will want to call this function. You can call it as often as you want, it just sets a flag that we need to render again, and renders a few frames if we weren't already doing that. Ignored in 2D.

    Parameters

    • Optional renderMode: any

    Returns void

  • updateClosedStateForPolygon(options: { closed: boolean; open?: boolean; polygon: string | MappedinPolygon }): void
  • A polygon can have state that renders the concept of being "closed", which is a generic blanket term that can be used in general to inform the user that they can expect this polygon to not be servicing customers.

    Parameters

    • options: { closed: boolean; open?: boolean; polygon: string | MappedinPolygon }
      • closed: boolean

        If true, the polygon will be marked as being closed. If false, the polygon will be marked as being open.

      • Optional open?: boolean

        If true, a convenience parameter that is the converse of options.closed. Note that if both are present, closed will receive higher precedence.

      • polygon: string | MappedinPolygon

        The polygon or polygon id whose state is being updated.

    Returns void