Class MapView

Primary API class for controlling and interacting with a 3D map.

Hierarchy

Properties

BlueDot: BlueDot

API for handling a user's position on the map.

Camera: Camera

API for controlling the camera in the scene.

DynamicFocus?: DynamicFocus

API to dynamically set the map focus as you pan over map groups.

FlatLabels: IFlatLabels<void>

API for controlling flat labels.

FloatingLabels: IFloatingLabels<void>

API for controlling floating labels.

Journey: Journey

API for representing sets of directions on the map.

Layers: Layers

API to control layer visibility.

Markers: Markers

API for adding 2D markers.

OutdoorView: OutdoorView

API to control outdoor context rendering.

Paths: Paths

API for drawing arbitrary paths.

StackedMaps: StackedMaps

API for showing multiple maps as a vertical stack.

off: (<EVENT_NAME>(eventName, fn) => void)

Type declaration

    • <EVENT_NAME>(eventName, fn): void
    • Unsubscribe a function previously subscribed with on from and E_SDK_EVENT.

      mapView.on(E_SDK_EVENT.CLICK, mapClickHandler);

      ...

      // Something changed and I no longer want this event
      mapView.off(E_SDK_EVENT.CLICK, mapClickHandler);

      Type Parameters

      Parameters

      • eventName: EVENT_NAME

        An E_SDK_EVENT to which the provided function was previously subscribed.

      • fn: ((payload) => void)

        A function that was previously passed to on. The function must have the same reference as the function that was subscribed.

      Returns void

on: (<EVENT_NAME>(eventName, fn) => void)

Type declaration

    • <EVENT_NAME>(eventName, fn): void
    • Subscribe a function to an E_SDK_EVENT.

      // Set a polygon to be red when it is clicked
      const mapClickHandler = ({ polygons }: E_SDK_EVENT_PAYLOAD["CLICK"]) => {
      if (polygons.length > 0) {
      mapView.setPolygonColor(polygons[0], 'red');
      }
      }
      mapView.on(E_SDK_EVENT.CLICK, mapClickHandler);

      Type Parameters

      Parameters

      • eventName: EVENT_NAME

        An E_SDK_EVENT which, when fired, will call the provided function.

      • fn: ((payload) => void)

        A callback that gets called when the corresponding event is fired. The callback will get passed an argument with a type that's one of E_SDK_EVENT_PAYLOAD.

          • (payload): void
          • Parameters

            Returns void

      Returns void

The options that the mapView was instantiated with.

Accessors

  • get container(): HTMLElement
  • The HTML element that the mapView is rendered into.

    Returns HTMLElement

Methods

  • Makes a MappedinPolygon interactive. This means it will receive a hover effect and respond to the CLICK E_SDK_EVENT. See also on and addInteractivePolygonsForAllLocations.

    // Make all washroom polygons clickable
    const washroom = mapView.venue.find((l) => l.name === "Washroom")!;
    for (const polygon of washroom.polygons) {
    mapView.addInteractivePolygon(polygon);
    }

    // Now they will be populated in click events
    mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) -> {
    if (polygons.length > 0) {
    console.log("Clicked on a washroom!");
    }
    })

    Parameters

    Returns void

  • Makes all MappedinPolygon instances with an attached MappedinLocation interactive. This means they will receive a hover effect and respond to the CLICK E_SDK_EVENT. See also on and addInteractivePolygon.

    mapView.addInteractivePolygonsForAllLocations();

    // Now all polygons with locations can be clicked
    mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
    if (polygons.length > 0) {
    for (const polygon of polygons) {
    console.log(`clicked on ${polygon.locations[0].name}`)
    }
    }
    });

    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

  • Experimental

    Given a MappedinPolygon, the polygon will be outlined. The outline color of the polygon is set using setPolygonOutlineColor, the default color is red (#ff0000). See also removePolygonOutline and removeAllPolygonOutlines.

    // Find the polygons of the Apple store and change them to blue
    const location = mapView.venue.locations.find((l) => l.name === "Apple")!;
    for (const polygon of location.polygons) {
    mapView.addPolygonOutline(polygon);
    }

    Parameters

    Returns void

  • Resets all MappedinPolygon instances back to their original hover colors or the default hover color set by setHoverColor. See also clearPolygonHoverColor and setPolygonHoverColor.

    mapView.setPolygonHoverColor(polygon1, "#ff0000");
    mapView.setPolygonHoverColor(polygon1, "#00ff00");

    ...

    mapView.clearAllPolygonHoverColors();

    Returns void

  • Resets a MappedinPolygon back to it's original color. See also clearAllPolygonColors and setPolygonColor. If the user is hovering over a polygon, it will still have the hover color set by setHoverColor.

    mapView.setPolygonColor(polygon, "#0000ff");

    ...

    // Reset the polygon color
    mapView.clearPolygonColor(polygon);

    Parameters

    Returns void

  • Create a tooltip with no default styling that the MapView will attempt to position in 3D space. The tooltip will be anchored to a specified node or coordinate in one of eight anchor orientations.

    The possible anchor types are top, bottom, left, right, topLeft, topRight, bottomLeft, and bottomRight. This describes the position of the tooltip relative to the node or coordinate to which it is attached.

    Unlike createTooltip, a custom tooltip is rendered without any additional wrappers, leaving styling entirely up to the external developer. The top-most element will be injected with a class in the form of .tooltip--anchor-{type} that indicates the current anchor type.

    Parameters

    Returns SmartTooltip

  • Create a tooltip with default styling that the MapView will attempt to position in 3D space. The tooltip will be anchored to a specified node or coordinate in one of eight anchor orientations.

    The possible anchor types are top, bottom, left, right, topLeft, topRight, bottomLeft, and bottomRight. This describes the position of the tooltip relative to the node or coordinate to which it is attached.

    The tooltip is rendered into the DOM with the following structure.

    <div class="mappedin-tooltip tooltip--anchor-bottom-left">
    <div class="mappedin-tooltip__content">
    {contentHtml}
    </ div>
    </ div>

    The .mappedin-tooltip element controls the position and has a class in the form of .tooltip--anchor-{type} that indicates the current anchor type.

    Parameters

    Returns SmartTooltip

  • Destroy the mapView instance and reclaim memory.

    NOTE: this does not destroy the instance of Mappedin that was passed in. For applications that require destroying and re-creating the mapView, it is recommended to keep the Mappedin object around.

    mapView.destroy();
    

    Returns void

  • Parameters

    Returns string

    An array of pathSegment ids.

    Deprecated

    Use Paths.add instead.

    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.

  • Let any image attached to a Polygon attached to a Location flip 180 degrees with the camera so it's always upright. See also enableImageFlippingForPolygon.

    mapView.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

  • Mark a specific MappedinPolygon so, if it has an image, it rotates with the camera. See also enableImageFlippingForAllLocations.

    // Enable image flipping for locations with type "Anchor"
    const anchorStores = mapView.venue.locations.filter((l) => l.type === "Anchor");
    for(const store of anchorStores) {
    for(const polygon of anchorStores.polygons) {
    mapView.enableImageFlippingForPolygon(polygon);
    }
    }

    Parameters

    Returns void

  • Get the nearest MappedinNode on a map to an XY-coordinate on the screen. This can be useful for generating directions from an arbitrary point on the map.

    // Get the nearest node on map[0] to (100,100)
    const nearestNode = mapView.getNearestNodeByScreenCoordinates(100, 100, mapView.venue.maps[0]);
    const destination = mapView.venue.locations.find((l) => l.name === "Apple")!;

    // Find out how to get from that node to Apple
    const directions = nearestNode.directionsTo(destination);

    Parameters

    • x: number

      The x position of a coordinate on the screen.

    • y: number

      The y position of a coordinate on the screen.

    • Optional mapOrMapId: string | MappedinMap

      The MappedinMap the node should belong to.

    Returns MappedinNode

  • Finds all MappedinPolygon instances that intersect the specified XY-coordinate on screen. 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 set through addInteractivePolygon or addInteractivePolygonsForAllLocations. This behaviour can be changed by passing options.includeNonInteractive.

    const polygons = mapView.getPolygonsAtScreenCoordinate(100, 100);
    

    Parameters

    Returns MappedinPolygon[]

    An array of MappedinPolygon instances intersecting the given coordinate.

  • Finds the main MappedinLocation associated with a MappedinPolygon. 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.

    // Log the primary location of a clicked polygon
    mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
    if (polygons.length > 0) {
    for(const polygon of polygons) {
    console.log(mapView.getPrimaryLocationForPolygon(polygon));
    }
    }
    });

    Parameters

    Returns MappedinLocation

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

    Returns void

    Deprecated

    use Markers.removeAll instead.

  • Returns void

    Deprecated

    Use Paths.removeAll instead.

    Removes all pathSegments from all Maps.

  • Experimental

    Removes outlines on all MappedinPolygon instances. See also setPolygonOutlineColor, addPolygonOutline and removePolygonOutline.

    mapView.setPolygonOutlineColor("#0000ff");
    mapView.addPolygonOutline(polygon1);
    mapView.addPolygonOutline(polygon2);

    ...

    // Remove the outline from all polygons
    mapView.removeAllPolygonOutlines();

    Returns void

  • Remove Marker

    Parameters

    • markerOrMarkerId: string | Marker

    Returns void

    Deprecated

    use Markers.remove instead.

  • Parameters

    • pathId: string

    Returns void

    Deprecated

    Use Paths.remove instead.

    Remove a path by id

  • Removes a Tooltip you have added previously.

    Parameters

    • tooltipOrTooltipId: string | SmartTooltip

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

    Returns void

  • Parameters

    • settings: TN8AOConfiguration

    Returns void

  • Sets the color of empty space in the scene. Useful for matching the aesthetics of the surrounding website of application. Otherwise the container element will be white where there is no map visible.

    // Make the background a dark grey
    mapView.setBackgroundColor("#050505");

    Parameters

    • color: string

      A hexidecimal color string to use.

    • Optional alpha: number

      A number between 0 and 1 representing opacity.

    Returns void

  • Sets the color that all MappedinPolygon instances will receive when they are beneath a cursor. This only applies to interactive polygons set using addInteractivePolygon or addInteractivePolygonsForAllLocations. Hover colors set by setPolygonHoverColor will take precedence over this value.

    // Make all location polygons interactive and have a red hover color
    mapView.addInteractivePolygonsForAllLocations()
    mapView.setHoverColor("#ff0000");

    Parameters

    • color: string

    Returns void

  • Change the currently displayed MappedinMap to a new one.

    await mapView.setMap(mapView.venue.maps[1]);
    

    Parameters

    Returns Promise<null>

    A promise that resolves when the map is fully switched.

  • Given a MappedinPolygon, set it to a specific color.

    // Find the polygons of the Apple store and change them to blue
    const location = mapView.venue.locations.find((l) => l.name === "Apple")!;
    for (const polygon of location.polygons) {
    mapView.setPolygonColor(polygon, "#0000ff");
    }

    Parameters

    Returns void

  • Experimental

    Sets a color that the outline of a MappedinPolygon instance will receive. If no color is set the outline will default to red (#ff0000). See also addPolygonOutline, removePolygonOutline and removeAllPolygonOutlines.

    mapView.setPolygonOutlineColor("#0000ff");
    

    Parameters

    • color: string

      The color to set the outline to.

    Returns void

  • Set state of the mapView to one of STATE.

    Parameters

    Returns Promise<void>

  • Parameters

    • Optional _renderMode: any

    Returns void

    Deprecated

    This should no longer need to be called externally and is now a no-op.