API for handling a user's position on the map.
API for controlling the camera in the scene.
Optional Experimental DynamicAPI to dynamically set the map focus as you pan over map groups.
API for controlling flat labels.
API for controlling floating labels.
API for representing sets of directions on the map.
Experimental LayersAPI to control layer visibility.
API for adding 2D markers.
Experimental OutdoorAPI to control outdoor context rendering.
API for drawing arbitrary paths.
Experimental StackedAPI for showing multiple maps as a vertical stack.
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);
An E_SDK_EVENT to which the provided function was previously subscribed.
A function that was previously passed to on. The function must have the same reference as the function that was subscribed.
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);
An E_SDK_EVENT which, when fired, will call the provided function.
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.
The options that the mapView was instantiated with.
The HTML element that the mapView is rendered into.
The current MappedinMap being displayed.
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!");
}
})
The MappedinPolygon to make interactive.
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}`)
}
}
});
Optional options: { Optional excludeA 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.
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);
}
The MappedinPolygon to outline.
Resets all MappedinPolygon instances back to their original colors. See also clearPolygonColor and setPolygonColor. If the user is hovering over a polygon, it will still have the hover color set by setHoverColor.
mapView.clearAllPolygonColors();
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();
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);
The MappedinPolygon to reset the color of.
Resets a MappedinPolygon back to it's original hover color or the default hover color set by setHoverColor. See also clearAllPolygonHoverColors and setPolygonHoverColor.
mapView.setPolygonHoverColor(polygon, "#ff0000");
...
// Reset polygon to origin hover color
mapView.clearPolygonHoverColor(polygon);
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.
A MappedinNode or MappedinCoordinate the tooltip is attached to.
Stringified HTML content to render within the tooltip. The contents must be position: absolute in order to interact with the collision engine.
A CSS selector string that allows the SDK to target the tooltip. This is required because we do not inject any default styling.
Optional options: TCreateTooltipCommonOptionsTCreateTooltipCommonOptions for rendering the tooltip
Attach any HTML to a MappedinNode or MappedinCoordinate, and have the marker interact and collide with smart labels and tooltips
Optional options: TCreateMarkerOptionsuse Markers.add instead.
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.
A MappedinNode or MappedinCoordinate the tooltip is attached to.
Stringified HTML content to render within the tooltip.
Optional options: TCreateTooltipOptionsTCreateTooltipOptions for rendering the tooltip
Disable image flipping that was enabled with enableImageFlippingForPolygon or enableImageFlippingForAllLocations.
An array of Nodes, probably from a Node's MappedinNode.directionsTo call.
Optional options: TPathOptionsAn array of pathSegment ids.
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();
Optional options: { Optional excludeA 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.
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);
}
}
The MappedinPolygon to enable image flipping for.
Create a MappedinCoordinate on a given MappedinMap from an XY-coordinate on screen.
The x value of a screen coordinate.
The y value of a screen coordinate.
The MappedinMap the coordinate should belong to.
A MappedinCoordinate on the given map.
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);
The x position of a coordinate on the screen.
The y position of a coordinate on the screen.
Optional mapOrMapId: string | MappedinMapThe MappedinMap the node should belong to.
Finds all MappedinPolygon instances 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 set through addInteractivePolygon or
addInteractivePolygonsForAllLocations. This behaviour can be changed by passing
options.includeNonInteractive.
const polygons = mapView.getPolygonsAtCoordinate(coordinate);
The MappedinCoordinate to check.
Optional options: TGetPolygonsAtCoordinateOptionsAn array of MappedinPolygon instances intersecting the given coordinate.
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);
The x value of a screen coordinate
The y value of a screen coordinate
Optional options: TGetPolygonsAtCoordinateOptionsAn 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));
}
}
});
The MappedinPolygon you want the primary location of.
Label all locations using 2D floating labels (with options TLabelAllLocationFloatingLabelOptions), or flat 3D labels on top of the polygons themselves (with options TLabelAllLocationFlatLabelOptions)
Optional options: TLabelAllLocationFloatingLabelOptions | TLabelAllLocationFlatLabelOptionsPlease use FloatingLabels.labelAllLocations or FlatLabels.labelAllLocations instead. This may be removed in a future version of the SDK. The array this returns is now always empty.
Prevent any polygons from showing a hover effect and being clicked on. See also addInteractivePolygon and addInteractivePolygonsForAllLocations.
mapView.removeAllInteractivePolygons()
Removes all Markers (from all Maps, not just the current one).
use Markers.removeAll instead.
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();
Remove all tooltips created with createTooltip or createCustomTooltip.
mapView.removeAllTooltips();
Makes a polygon no longer hoverable/clickable. See also addInteractivePolygon and addInteractivePolygonsForAllLocations.
The MappedinPolygon to make no longer interactive.
Remove Marker
use Markers.remove instead.
Experimental
Removes the outline on a MappedinPolygon. See also setPolygonOutlineColor, addPolygonOutline and removeAllPolygonOutlines.
mapView.setPolygonOutlineColor("#0000ff");
mapView.addPolygonOutline(polygon);
...
// Remove the outline from the polygon
mapView.removePolygonOutline(polygon);
The MappedinPolygon to remove the outline of.
Removes a Tooltip you have added previously.
A Tooltip or Tooltip id that has previously been returned from MapView.createTooltip.
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");
A hexidecimal color string to use.
Optional alpha: numberA number between 0 and 1 representing opacity.
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");
Change the currently displayed MappedinMap to a new one.
await mapView.setMap(mapView.venue.maps[1]);
The MappedinMap to display.
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");
}
The MappedinPolygon to change the color of.
A hexidecimal color string to use as the new color.
Sets a color that a MappedinPolygon instance will receive when it is beneath a cursor. This will take precedence over the value set by setHoverColor and only applies to an interactive polygon set using addInteractivePolygon or addInteractivePolygonsForAllLocations. See also clearPolygonHoverColor and clearAllPolygonHoverColors.
// Make polygon interactive and have a red hover color
mapView.addInteractivePolygon(polygon);
mapView.setPolygonHoverColor(polygon, "#ff0000");
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");
The color to set the outline to.
Set state of the mapView to one of STATE.
Primary API class for controlling and interacting with a 3D map.