Product Description
Introduction
Ambiarc is an indoor map platform. Out of the box, you’ll get a beautiful 3D map with default interaction, interface, and functionality that can be integrated into a wide range of applications. These may range from visitor wayfinding experiences to internal use cases like data visualization. Ambiarc currently supports web platforms with a flexible Javascript SDK that allows the map experience to be customized.
Here’s what a default styled, multi-floor, indoor map may look and feel like (content shown is air quality data):
Use Cases
Ambiarc is used to power digital experiences for the built environment.
Content can be populated on the map manually or through an API or database. Web UI can be added on top of the map and created via any web development framework. Using Ambiarc’s API, the application’s UI and map can tie together seamlessly.
Experiences can be deployed on different platforms. Common examples include integration with your website, or a touch screen kiosk for visitors or employees.
Examples:
The platform has many use cases. A few examples include:
Wayfinding
A touch screen kiosk to orient visitors and inform them with a directory of content
Data Visualization
Using sensors to visualize conference room availability
IOT Management
Interfacing with IOT devices and visualizing their location
Asset Tracking
Tracking assets, like the location of artworks in a museum
Property Management
Managing property, like the units currently available for rent
Marketing Real Estate
Creating an Interactive map to advertise your property
Emergency Services
Showing the location and status of critical systems for emergency services
Experience Required
A developer familiar with HTML and Javascript can use the Ambiarc SDK to customize and integrate your Ambiarc map. All of the things that make a Ambiarc map special (3D animation, transitions, geolocation, etc) are handled for you behind the scenes. If you’re comfortable using a Javascript SDK like Google Maps to embed a map and add some pins, you’re ready to use Ambiarc.
Product Features
Content and Annotations
Information can be annotated on top of the map, visually customized, and can respond to input.
Icons
Ambiarc maps come embedded with a default set of icons for general purpose (e.g. restrooms, stairs, cafes). You can choose from the default set (listed here) or assign a custom icon to represent anything. For example, a custom icon of a light bulb might represent the location of a smart bulb and an interface to control it.
Text Labels
Text labels are strings of text displayed on the map. A label might describe the name of a shop that occupies a retail space or a gallery name at a museum.
Text + Icon
Text + Icons are the combination of text and an icon displayed together. A label might describe the name of a shop and the associated icon might represent the type of shop, like a coffee cup for a cafe.
Callouts
Callouts are areas of information that may expand out of an icon or label. Callouts may contain a header and footer of text. Tapping on a restaurant icon might display a callout with additional information such as the type of restaurant and its hours of operation.
Heatmaps
Heatmaps may also be added to the map. Heatmaps show information on the map in which values are represented by colors. For example, a dense area may be red, and a spare area may be green. The heatmap could represent things like foot traffic in a building or temperature data from building sensors.
Map Interaction and Behavior
Input
The map is responsive to different input devices. These inputs include touch, mouse, and trackpad.
Controls
The map responds to different control gestures, including panning, rotating, and zooming.
Multi-floor Buildings
The floors of the building may be separated into an expanded view, called the floor selector, which allows the user to view an overview of all floors, and then select one floor to expand in detail.
Map Annotation Behavior
Annotations on the map, which include labels and icons, visually alter themselves depending on the available space and other annotations around them. This allows for greater map visibility without the visual congestion of too many annotations. You have the ability to customize the priorities of annotations in your application.
Theming
Map Colors
Maps may be themed with one of our templates or tailored specifically for your project. Map colors are categorized, which include walls, floors, stairs, restrooms, etc.
Example of the “Light” theme template
Example of the “Dark” theme template
Custom Icons
Icons should be designed and uploaded at 128px by 128px as transparent or non-transparent PNG format only. Icons sizes scale based on the window height. Currently the icons are scaled to render at 0.55% of the window height, so an icon will display at 118.8px by 118.8px at 4K window size (3840x2160), 59.4px by 59.4px at 1920x1080 size, etc.
Loading Screen
While the map loads in, a separate loading screen is visible. The loading screen’s stylesheet is fully editable, allowing customization of the background image, logo, loading bar, and loading bar text.
Fonts
Fonts for map annotations is currently limited to the Roboto font, however, fonts for general UI that is not embedded directly into the map (e.g. content frames over the map) is completely customizable.
General UI
You can create web UI, position it over the map, and fully customize it. A common example might be a content window. Tapping on a map icon might then display content such as images, text, or video that describe that area of the map.
UI panel displaying content over the map. Screenshot from Indianapolis Airport experience
Map Events
Ambiarc’s event system allows for a custom UI to interact seamlessly with the map.
Changing Floors
Floor changing events notify the application when the map is changing floors or has focused on a specific floor. This allows for UI to be updated to display the current floor or transition state.
Interacting With Map Content
When a label is interacted with, an event is triggered. These events may update the UI, for example, displaying content related to that label. It may also update the map. For example, tapping on an label could change its color, to indicate that it is highlighted.
Map Creation
Maps are currently created from GeoJSON files derived from your floor plans. Once we have the floor plans of your venue, generating your 3D map has a quick turnaround time. Map interaction and rendering is built on top of Unity.
Platform Support
Ambiarc currently targets web platforms and is built on top of Unity, utilizing HTML5, WebGL, and WebAssembly. It’s supported by all major desktop browsers (Firefox 52+, Chrome 57+, Safari 11+, Edge 16+). Mobile support is limited to high-end mobile devices, with plans for wider mobile support in future versions.
Developer Support
We have an active slack community for Ambiarc developers to post questions and get help directly from the platform developers. Please get in touch and we’ll invite your developer to the channel.
Getting Started Tutorial
In this tutorial we’ll show you how to get your map up and running. We’ll start by adding labels to your map with Ambiarc Web Tool, an open source tool Github link for placing labels on your map. Then we’ll walk through initializing your map, loading in your map labels, and creating a simple interface to control your map.
For this tutorial, you may follow along with your map or use the example map we provide. You’ll need basic web development knowledge (HTML, Javascript, hosting a website locally) to follow the steps below. We recommend using the Google Chrome web browser.
Part 1: Creating Labels
No code required
Navigate to the Ambiarc Web Tool. For this tutorial, we’ll be using the Nelson-Atkins Museum of Art map. Alternatively, if we have provided you with a web tool link for your own map, you may also use that for this guide. The steps will be the same.
When the tool loads, you’ll see a screen that looks something like this:
On the left hand side you’ll find two tabs, Points of Interest and Map Colors:
- Points of Interest: Once points of interest are added to the map, this tab will show a sortable list of labels and icons on your map. Clicking on an icon transitions the map to its location and allows you to edit the properties of that label.
- Map Color: This tab allows you to change the color theme of your map.
Let’s go ahead and click on the map to expand floors. You will enter the maps floor selector mode that looks like this:
Go to the top floor and click on it to bring it into focus. You should now see:
The right mouse button (or gesture) can be used to create a point of interest anywhere on the map. Right click to create a point and a dialog will pop up prompting you to select a label, icon, or label + icon. This is how you add new points to the map or adjust the position of an existing point.
Let’s go ahead and right click to add a label. You should see a default label that looks like this:
You’ll notice a label now appears on the map with a default title and the label has shown up in the Points of Interest tab. Left click on the label (on the map or in the list view). This will focus on that label and reveal its properties.
Within this properties view, you’re able to change many of the settings for that particular label, including the name, position, text size, label type, and more. For the sake of this demo, I went ahead and added the Japanese, Chinese, South Asian, and American galleries.
When you’re finished, click “Back to List.” You may add as many labels as you’d like.
When you’re done adding labels click “Export” in the upper left hand corner. This will bundle up your labels and download them as a GeoJSON file.
GeoJSON is the open standard for representing geographic data in a easily managed and human readable file. Each label you added contains information about its location (latitude , longitude, and floor in the building) as well as other properties that define the label.
You can open it up with your favorite text or code editor. Here is what my “American Indian” label in my GeoJSON export looks like:
{
"type": "Feature",
"properties": {
"buildingId": "0001",
"floorId": "0004",
"label": "American Indian",
"fontSize": "32",
"category": "Label",
"location": "Default",
"partialPath": "Information",
"showOnCreation": true,
"type": "Text",
"showToolTip": false,
"tooltipTitle": "",
"tooltipBody": "",
"mapLabelId": 623
},
"geometry": {
"type": "Point",
"coordinates": [
-94.58128356933594,
39.04481506347656
]
},
"user_properties": {}
}Each label is defined in a list with its location and properties. These are the properties the Ambiarc SDK will accept and what you will be loading into your project. For more information on each property, check out the documentation here. In the next section we’ll load your labels into your map project.
Part 2: Loading Labels
Basic coding required: Javascript
In Part 1, you added labels to your map and exported them to a GeoJSON file. In part 2, you will initialize your map and load up your labels.
Here’s what you’ll need to get started:
- The Nelson-Atkins demo project
- The GeoJson file you exported in Part 1 (or use the file included in demo project)
- A local test server
- One of the easiest ways to do this is with Python’s SimpleHTTPServer module
- Follow the instructions for “Running a simple local HTTP server” here
- A text editor to modify code
Extract your base map project to the directory of your choice. The example project is structured like this:
Deploy the project onto your localhost. Using the Python Simple Server method, open command line and navigate to the project’s directory. Run the command “python -m http.server”.
Navigate to http://localhost:8000/ and you’ll see your blank map load up. If you explore it, you won’t find any labels. We’ll add those soon.
Back in your project directory, open up GettingStarted.js in the editor of your choice.
Find the function “onAmbiarcLoaded” and add the following lines of code:
//retrieve the Ambiarc object
var ambiarc = $("#ambiarcIframe")[0].contentWindow.Ambiarc;
//get full path to our labels file
var full = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + (window.location.pathname ? window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/")) : '');
//load our labels GeoJSON file into the map
ambiarc.loadRemoteMapLabels(full + "/tutorial_map_labels.json").then((out) => {});Diving a bit deeper into the code above:
var ambiarc = $("#ambiarcIframe")[0].contentWindow.Ambiarc;This demonstrates how to access the ambiarc object from a javascript file. The next two lines are setting up the URL that points to your GeoJson file.
ambiarc.loadRemoteMapLabels(full + "/tutorial_map_labels.json").then((out) => {});This line is calling the loadRemoMapLabels function from the SDK. The loadRemoMapLabels accepts a URL pointing to a GeoJson file created in the Ambiarc Web Tool, and renders those map labels onto the map. loadRemoMapLabels returns a promise that resolves to a list of map labels that you can reference in your own application.
To load your map labels, add them to the root project directory, and replace "/tutorial_map_labels.json" with your label file. Reload the project, navigate to the upper floor, and you'll see your labels appear!
Part 3: Making It Interactive
Basic coding required: HTML & Javascript
In part 2, you set up your Ambiarc project and loaded labels into the scene. In part 3, you will create a simple user interface that interacts with the map.
To accomplish this, we’ll add five buttons to the user interface with HTML, one for each label on the map (Japanese, Chinese, South Asian, American, and American Indian). When a button is clicked, the map will translate to the location of that label. When a label on the map is clicked, the corresponding button within the UI will be highlighted.
Open up the project’s index.html and find the following HTML code at line 37:
<div class="tab" style="pointer-events: all">
<!--***Set id and second argument of adjustMapFocus to map label ID***-->
<button id="" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 0)">Japanese</button>
<button id="" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 0)">Chinese</button>
<button id="" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 0)">South Asian</button>
<button id="" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 0)">American</button>
<button id="" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 0)">American Indian</button>
</div>This creates a vertical list of tab buttons, one for each label on the map. Now it’s time to make the buttons take action when selected.
In your GeoJSON file, find the mapLabelId for each label and add them to our HTML tabs as a second parameter to the onclick function and as an id to the HTML element. The HTML id is set to the map label id so we can reference it when a label is clicked, more on this later on. Your HTML should now look like this:
<div class="tab" style="pointer-events: all">
<!--***Set id and second argument of adjustMapFocus to map label ID***-->
<button id="1023" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 1023)">Japanese</button>
<button id="-402" class="tablinks" onclick="adjustMapFocus(event.currentTarget, -402)">Chinese</button>
<button id="931" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 931)">South Asian</button>
<button id="637" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 637)">American</button>
<button id="623" class="tablinks" onclick="adjustMapFocus(event.currentTarget, 623)">American Indian</button>
</div>Note: You can also view your map label’s IDs by accessing the mapLabelId property.
When clicked, the buttons now call adjustMapFocus and pass in the button clicked and the map label ID. Open up GettingStarted.js to view the function.
We’ve stubbed it out to look like this:
// Tells Ambiarc to focus on a map label id
function adjustMapFocus(target, mapLabelId) {
// Declare all variables
var i, tablinks;
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
if (target != undefined) target.className += " active";
/**Ambiarc Specific Code**/
}Right now, all this function does it ensure the correct tab is highlighted in the UI. Now it’s time to make it transition the map to the correct label on a button click.
To do this, we’ll add the following Ambiarc code to the end of the adjustMapLabel function:
// Retrieve ambiarc object
var ambiarc = $("#ambiarcIframe")[0].contentWindow.Ambiarc;
// call the focusOnMapLabel with the map label id
ambiarc.focusOnMapLabel(mapLabelId);This code retrieves the Ambiarc object and calls focusOnMapLabel to transition the map to the label’s location.
Refresh the project; clicking on the buttons will now move the camera to each label!
Next, we will want to make the UI responsive to interaction with the map. For example, when we click on the “American” map label, we want the “American” UI button to be highlighted. To do this, we’ll subscribe to Ambiarc’s event listener for MapLabelSelected.
Add the following code to OnAmbiarcLoaded (after the ambiarc object is declared) in GettingStarted.js and refresh the page:
ambiarc.registerForEvent(ambiarc.eventLabel.MapLabelSelected, (event) => {
adjustMapFocus($("#" + event.detail)[0], event.detail)
});This code will now listen for interaction with map labels and calls adjustMapFocus on a click or tap. As we saw above, adjustMapFocus will highlight the button that corresponds to the map label, and transition the camera to focus on it.
RegisterForEvent is how your application can register for any of the events the Ambiarc SDK supports. It accepts the event as the first parameter and a callback as the second parameter. The callback is usually called back with relevant information regarding the event, in this case the id of the label that was clicked.
Now our project has two way communication between our user interface and map labels!
Developer Documentation
Examples
You will find example projects using Ambiarc on Ambiarc's Github here. These include:
Ambiarc Web Tool
The Ambiarc Web Tool is a web application for managing points of interest and the visual theme of a map.
This project illustrates:
- A custom HTML / Javascript interface created with bootstrap
- Manage points of interest from an interface
- Managing the map theme from an interface
- Updating a HTML UI from map interaction
- Updating the map from UI interaction
- Importing and exporting map labels
Real Time Visitors
This project demonstrates integration of a reelyActive websockets data feed (using beaver.js) into an indoor Ambiarc map. This project maps the Notman House, a technology and startup hub in Montreal, Quebec. The data is real-time and shows active visitors in the building.
Indoor Air Quality
This project features a map of The Pavillion, an upcoming retail space in Shanghai, China. Using the QLEAR API, real-time indoor air quality data is displayed on the map. You can view the air quality of the entire building, each floor, or specific units.
Ambiarc SDK
Labels
Create Map Label
This method will create a MapLabel based on the provided MapLabelType and properties. The callback will return the MapLabel ID so that it can be referenced and accessed for further Ambiarc actions.
createMapLabel(MapLabelType, MapLabelProperties, Callback)
MapLabelType
The Ambiarc SDK provides a convenience object that has available MapLabel types already defined (Ambiarc.mapLabel.x).
| Type | Description |
|---|---|
| Icon | A MapLabel with an image and no text element. Icon image asset can be defined through either one of the built-in icons, providing a URL to one, or by sending one as a base64 string. |
| Text | A MapLabel with text only. No images are available on this type of map label. |
| IconWithText | A MapLabel that contains both Text and an Icon |
MapLabelProperties
The MapLabelProperties specifies properties that determine the labels position and behavior.
| Field | Required | Type | Description | Notes |
|---|---|---|---|---|
| buildingId | Optional |
string | The ID of the building the map label will appear in. | Must be assigned to position Maplabel indoors |
| floorId | Optional |
string | The ID of the Floor the MapLabel will appear on. | Must be assigned to position Maplabel indoors |
| latitude | Optional |
double | The real world latitude position the map label will appear at. | Use if you are not going to use scene_position. |
| longitude | Optional |
double | The real world longitude position of the map label will appear at. | Use if scene_position will not be used. |
| scenePosition | Optional |
{ x:float, y:float, z:float } |
Positions the map label based on Ambiarc's coordinates | Use if longitude and longitude will not be used. |
| category | Required |
string | Used to determine the priority level of the POI. | Category priority levels are defined in AmbiarcPOIPriority.json. |
| height | Optional |
float | Used to position the MapLabel on the y-axis. By default, the MapLabel will be positioned at ground level of the Level. | Only use if you need the MapLabel to appear at a different height than the floor it is on. |
| showOnCreation | Required |
bool | If true the MapLabel will instantly appear on creation. Otherwise, the MapLabel will remain in a hidden state. | |
| showTooltip | Required |
bool | If true the MapLabel will show the default tooltip when clicked on. | |
| tooltipTitle | Optional |
string | The title of the default tooltip. | Required if showTooltip is set to true |
| location | Optional |
string | Determines how Ambiarc will retrieve the Icon asset. URL specifies a remote asset, Default specifies the use of default assets, Base64 specifies the asset resource will be provided as a Base64 encoded string |
Further info regarding asset location of the asset within partialPath. |
| partialPath | Optional |
string | Used to specify the location of the asset. The value should be set according to the asset location type. A URL, Base64 string, or a default icon specifier can be used. | |
| fontSize | Optional |
int | Sets text label font size | Currently only used for text MapLabel |
| label | Optional |
string | Sets the text value for the MapLabel | Currently only used for text MapLabel |
| mapLabelId | Optional |
string | Sets the ID for the label. | Use this if you would like to use your own ID to reference the MapLabel |
| outside | Optional |
bool | Specifies if this Map Label is outside |
Callback
The callback will be called the MapLabel has been added. The callback accept one argument being a string the represents the MapLabel's ID and will be needed to make modifications to the MapLabel.
Default Icons
Default icons will used based on category within MapLabelProperties.
| Name | Name | Name |
|---|---|---|
| Baggage | Bicycle | Boat |
| Bus | Camera | Campsite |
| Charging | Coat Check | Currency Exchange |
| ATM | Elevator | Entrance |
| Escalator | Exit | Food |
| Gas | Hair | Hiking |
| Information | Meditation | |
| Mothers Room | Parking | Question |
| Restroom | Restroom Mens | Restroom Womens |
| Stairs | Star | Table |
| Telephone | Theater | Tickets |
| Walkway | Water | Artwork |
| Building | Closed | Dog |
| Bidirectional Elevator | Tours |
Example
var ambiarc = //...
var MapLabelProperties = {
buildingId: 'B00001',
floorId: 'L001',
latitude: 37.874,
longitude: -130.762,
category: 'Label',
location: 'URL',
label: key,
partialPath: 'http://localhost:8000/img/dot_red@2x.png',
showOnCreation: true
};
ambiarc.createMapLabel(ambiarc.mapLabel.Icon, MapLabelProperties, (labelId) => {
//store ID for later
});Update Map Label
This method will update an existing MapLabel.
updateMapLabel(MapLabelID, MapLabelType, MapLabelProperties)
See Create Map Label more information on MapLabelType and MapLabelProperties
Smooth Update Map Label Position
This method will update an existing MapLabels latitude and longitude position only with a smooth visual animation.
SmoothUpdateMapLabelPosition(MapLabelID, Latitude, Longitude, Duration)
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The MapLabelID returned from createMapLabel |
| Latitude | Required |
double | The latitude position of where the Map Label should animate to |
| Longitude | Required |
double | The longitude position of where the Map Label should animate to |
| Duration | Required |
double | The duration of the animation between the map labels current point and the supplied latitude and longitude |
Hide Map Label
This method will hide a MapLabel without destroying it.
hideMapLabel(MapLabelId, Immediate)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The MapLabelID returned from createMapLabel |
| Immediate | Required |
bool | Indicates weather the MapLabel is hidden without an animation |
Show Map Label
This method will show a hidden MapLabel.
showMapLabel(MapLabelId, Immediate)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The MapLabelID returned from createMapLabel |
| Immediate | Required |
bool | Indicates weather the MapLabel is hidden without an animation |
Destroy Map Label
This method will remove the specified MapLabel. The MapLabel cannot be shown again.
destroyMapLabel(MapLabelID)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The MapLabelID returned from createMapLabel |
Load Remote MapLabels
Loads MapLabels from a remote location and renders them on the map. A promise that will resolve to a list of MapLabels is returned with their Ambiarc ID's set for reference.
loadRemoteMapLabels(URL, FetchParams)
URL
The URL must point to a GeoJSON formatted file.
FetchParams
A set of params that will be passed to fetch.
Events
Register For Event
This method will register the specified callback/delegate to receive notifications for the specified event. See EventTypes for more info on events.
registerForEvent(EventType, Callback)
EventType
The Ambiarc SDK provides a convenience object that has available types already defined (Ambiarc.eventLabel.x).
| Type | Description | Event Parameters |
|---|---|---|
| FloorSelectorEnabled | The map has entered floor selector mode | Event(string), BuildingID(string) |
| FloorSelectorDisabled | The map has exited floor selector mode | Event(string), BuildingID(string) |
| FloorSelected | A Floor was selected | Event(string), BuildingID(string), FloorID(string) |
| FloorSelectorFloorFocusChanged | The floor selector shifted its current focused floor | Event(string), BuildingID(string), PreviousFloor(string), NewFloor(string) |
| MapLabelSelected | A MapLabel was selected | Event(string), mapLabelId(int), customProperties(object) |
| BuildingSelected | A Building was selected | Event(string), BuildingID(string) |
| CameraMotionStarted | The current camera position is starting to shift | Event(string), motionId(int) |
| CameraMotionCompleted | Current movement of the camera has completed | Event(string), motionId(int) |
| CameraRotateStarted | A camera rotate event started | Event(string) |
| CameraRotateCompleted | A camera rotate event ended | Event(string) |
| CameraZoomStarted | A camera zoom event started | Event(string) |
| CameraZoomCompleted | A camera zoom event ended | Event(string) |
| StartedEnteringOverheadCamera | Entering camera into overhead mode started | Event(string) |
| CompletedEnteringOverheadCamera | Entering camera into overhead mode completed | Event(string) |
| StartedExitingOverheadCamera | Started exiting camera from overhead mode | Event(string) |
| CompletedExitingOverheadCamera | Completed exiting camera from overhead mode | Event(string) |
| FocusAndZoomTransitionStarted | Focus and zoom started | Event(string) |
| FocusAndZoomTransitionCompleted | Focus and zoom ended | Event(string) |
| BuildingExitCompleted | The camera has exited a building | Event(string) |
| RightMouseDown | Right mouse click on on the map. | Event(string) |
| AmbiarcAppInitialized | The application has initialized | Event(string) |
| StartedLoadingMap | The map started to load | Event(string) |
| FinishedLoadingMap | The map completed loading | Event(string) |
Callback
The callback will be called on every occurrence of the specified events. Some events will provide an event item as a parameter to this callback.
Example
var EventHandler = function(event) {
}
var ambiarc = //...
ambiarc.registerForEvent(ambiarc.eventLabel.FloorSelectorEnabled, EventHandler);Unregister For Event
This method will unregister the specified callback/delegate to receive notifications for the specified event. See EventTypes for more info on events.
unregisterEvent(EventType, Callback)
See Register For Event for more information on EventType and Callback
Example
var EventHandler = function(event) {
}
var ambiarc = //...
ambiarc.unregisterEvent(ambiarc.eventLabel.FloorSelectorEnabled, EventHandler);Camera and Transitions
Focus on Map Label
This method will transition to the current context of the specified the MapLabel.
focusOnMapLabel(MapLabelID, CameraMotionId)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The MapLabelID returned from createMapLabel |
| CameraMotionId | Optional |
string | This value can be used to track when the camera has completed its motion to the MapLabel. Subscribe to CameraMotionCompleted to be notified of the completion. |
Focus on Floor
This method brings the camera to the context of the giving floor.
focusOnFloor(BuildingId, FloorId, CameraMotionId)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| BuildingId | Required |
string | The ID that specifies the building. |
| FloorId | Required |
string | The ID that specifies the floor. |
| CameraMotionId | Optional |
string | This value can be used to track when the camera has completed its motion to the MapLabel. Subscribe to CameraMotionCompleted to be notified of the completion. |
Exit Building
Exits a the current building, if building is selected.
exitBuilding(CameraMotionId)
View Floor Selector
Enters the floor selector for the specific building.
viewFloorSelector(BuildingId, CameraMotionId)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| BuildingId | Required |
string | The ID that specifies the building. |
| CameraMotionId | Optional |
string | This value can be used to track when the camera has completed its motion to the MapLabel. Subscribe to CameraMotionCompleted to be notified of the completion. |
Rotate Camera
Rotates the camera.
rotateCamera(rotationAmountInDegrees, Duration)
Set Camera Rotation
Rotates the camera to an absolute degrees.
setCameraRotation(degrees, duration)
Get Camera Rotation
Gets the camera absolute rotation.
getCameraRotation(callback)
Zoom Camera
Zooms the camera.
zoomCamera(NormalizedZoomIncrement, Duration)
Get Current Normalized Zoom Level
Gets the current normalized zoom level.
getCurrentNormalizedZoomLevel(callback)
Focus On LatLon And Zoom To Height
Moves the camera to a position and sets its height above the ground.
focusOnLatLonAndZoomToHeight(buildingId, floorId, lat, lon, heightAboveFloor)
Track Map Label
Pins the camera to a Map Label and follows it.
TrackMapLabel(MapLabelId, Height, FollowSpeed)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| MapLabelId | Required |
string | The ID that specifies the Map Label to track. |
| Height | Optional |
int | The height above Map Label the camera should be. |
| FollowSpeed | Optional |
int | The speed at which the camera will follow the Map Label. |
Stop Tracking Map Label
Stops tracking the current Map Label.
StopTrackingMapLabel()
Helper Functions
Get All Buildings
This method returns an array of all buildings in the map.
getAllBuildings(Callback)
Callback
The callback will be executed with an array of strings that denote the BuildingID's of all buildings.
Get All Floors
This method retrieves a list of floors found within the building that has the matching buildingId. Floors are returned in the callback as a parameter.
getAllFloors(BuildingId, Callback)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| BuildingId | Required |
string | The ID that specifies the building. |
| Callback | Required |
function | A callback function that is called with the floors returned. |
Floors
| Field | Required | Type | Description | Notes |
|---|---|---|---|---|
| id | Required | string | The ID of the floor | This value is provided by the SDK |
| positionIndex | Required | int | The ordinal position of the floor | This value is provided by the SDK |
| positionName | Required | string | The typed name of the ordinal position | This value is provided by the SDK |
Get Current Floor
This method returns the current buildings currently focused floor if applicable in the callback.
getCurrentFloor(Callback)
Callback
The callback will be executed with the current floor as a parameter.
Get Map Position At Cursor
This method will return the world position thats under the cursors current position. This can be used to position MapLabels dynamically.
getMapPositionAtCursor(CoordType, Callback)
| Field | Required | Type | Description |
|---|---|---|---|
| CoordType | Required |
string | Specify the type of coordinates to return to callback. gps vs world . |
| Callback | Required |
int | This function will be called with the coordinates. |
Example
// ambiarc.getMapPositionAtCursor((vector3) => {
ambiarc.getMapPositionAtCursor(ambiarc.coordType.gps, (latlon) => {
var mapLabelInfo = {
buildingId: mainBldgID,
floorId: currentFloorId,
latitude: latlon.lat,
longitude:latlon.lon,
label: 'Ambiarc Text Label: ' + poisInScene.length,
fontSize: 24,
category: 'Label',
showOnCreation: true,
type: 'Text',
showToolTip: false,
tooltipTitle: '',
tooltipBody: ''
};Hide Loading Screen
Hides the loading screen.
hideLoadingScreen()
Set Map Asset Bundle URL
Sets the base location of the where the map files are located.
setMapAssetBundleURL(AssetBundleURL)
Load Map
Loads the specified map.
loadMap(MapName)
Get Canvas Position At World Position
Get the pixel position of a point on the map.
getCanvasPositionAtWorldPosition(latitude, longitude, callback)
Get Canvas Position At World Position Indoor
Get the pixel position of a point on the map.
getCanvasPositionAtWorldPositionIndoor(latitude, longitude, buildingID, floorID, callback)
Heatmap
Create Heatmap
This method will create a heatmap with the given dataset and configuration.
createHeatmap([HeatmapPoint, ..])
HeatmapPoint
| Field | Required | Type | Description |
|---|---|---|---|
| latitude | Required |
float | The radii of the points added to the heatmap |
| longitude | Required |
float | Set to 'LatLon' |
| intensity | Required |
float | default is 0.5 |
| radius | Required |
string | default is 1 |
| buildingId | Required |
string | |
| levelId | Required |
string |
Update Heatmap
This method will update the existing heatmap with the given dataset and configuration.
updateHeatmap([HeatmapPoint, ..])
See Create Heatmap more information on HeatmapPoint
Heatmap is limited to data points.
Destroy Heatmap
This method will destroy the existing heatmap.
destroyHeatmap()
Add Raindrop
This method will create a raindrop at the specified point
addRaindrop(Latitude, Longitude, BuildingID, FloorID, {r: Red(0-1), g: Green(0-1), b: Blue(0-1)}, DurationInSeconds)
Visuals and Theming
Set Color by Category
This method sets the color of all features on the map in a given category.
setColorByCategory(Category, Color)
Category
Category is a string that specifies a feature, such as 'wall'
| Category | Description |
|---|---|
| Wall | The walls of the map |
| Room | The rooms of the map |
| Restroom | The restrooms of the map |
| Walkway | The walkways of the map |
| Stair | The stairs of the map |
| Elevator | The elevators of the map |
| Escalator | The escalators of the map |
| Ramp | The ramps of the map |
| Non-Public | The Non-Public spaces of the map |
Color
The indicated color as a hex string.
Set Map Theme
This method will set the map colors to a preset theme.
setMapTheme(MapTheme)
MapTheme
There are two themes available: Ambiarc.mapTheme.dark and Ambiarc.mapTheme.light
Set Environment Lighting
Set the color of the sky and surrounding area.
setSkyColor(TopColor, BottomColor)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| TopColor | Required |
string | A hex string specifying color above. |
| BottomColor | Required |
string | A hex string specifying color below. |
Set Environment Lighting
Updates the environmental lighting.
setEnvironmentLighting(SkyColor, EquatorColor, GroundColor)
Parameters
| Field | Required | Type | Description |
|---|---|---|---|
| SkyColor | Required |
string | A hex string specifying ambient lighting coming from above. |
| EquatorColor | Required |
string | A hex string specifying ambient lighting coming from the sides. |
| GroundColor | Required |
string | A hex string specifying ambient lighting coming from below. |