SightMap

The SightMap® Developer Hub

Welcome to the SightMap Developer Hub. You'll find code snippets and example integrations to get you started. Let's jump right in!

SightMap® JavaScript API

Introduction

The SightMap® JavaScript IFrame API provides third-party developers the ability to deeply integrate SightMap which can enable rich user experiences and allow websites or applications to move beyond typical integration standards.

Quick Start

A working example integrating the API with an example SightMap instance is below. You may insert following usage examples within this HTML document in order to explore the API.

Setting the origin value

Set the origin query parameter to the origin serving the document. The example uses http://localhost:3000, however please update the value accordingly.

If you need to start a local server, the following gist provides instructions for doing so quickly on either Mac or PC: https://gist.github.com/jgravois/5e73b56fa7756fd00b89.

For security reasons, the example must be served from an origin and will not function correctly when directly opened in a Browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SightMap JavaScript IFrame API Example</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- The API script must be included on the page -->
    <script src="https://sightmap.com/embed/api.js"></script>

    <!--
    Include the IFrame embed code. The embed URL must include `enable_api=1` and 
    provide the pages origin, the example uses `http://localhost:3000`, however
    update this accordingly. Additionally, the iframe must declare an id
    attribute, in this case it is set to `sightmap`.
    -->
    <iframe id="sightmap" src="https://sightmap.com/embed/dgow3krqp2m?enable_api=1&origin=http://localhost:3000" frameborder="0" width="100%" height="100%"></iframe>

    <script type="text/javascript">
        // Create a new embed instance, providing the IFrame id value:
        var embed = new SightMap.Embed('sightmap');

        embed.on('ready', function () {
            // Usage example code goes here...
        });
    </script>
</body>
</html>

Usage Requirements

In order to use the SightMap JavaScript IFrame API, the page must include the following script tag prior to the embed code.

<!-- The API script must be included on the page -->
<script src="https://sightmap.com/embed/api.js"></script>

setFloor

Set the active Floor by given ID.

TypeScript Definition

setFloor(id: string): void
// Set the active floor to the 2nd floor, which has an ID of `4731`:
embed.setFloor('4731');

getFloor

Retrieve the active floor ID if set.

TypeScript Definition

getFloor(callback: (id?: string) => void): void
// Get the active floor ID:
embed.getFloor(function (id) {
  console.log('Active Floor ID:', id);
});

locateUnitById

Locate and activate a Unit by ID.

TypeScript Definition

locateUnitById(id: string, options?: object): void
// Locate unit E05, which has ID `258702`.

embed.locateUnitById('258702');

// Locate unit `258702` and display the Unit Details modal.

embed.locateUnitById('258702', {displayDetails: true});

Options

Option
Type
Default Value
Description

displayDetails

Boolean

false

Determines if the Unit Details modal is displayed.

locateUnitByUnitNumber

Locate and activate a Unit by unit number.

TypeScript Definition

locateUnitByUnitNumber(unitNumber: string, options?: object): void

Unit Number Uniqueness

There are SightMap instances in which unit numbers are not unique within the set of units. Use the locateUnitById method in these cases.

To obtain unit ID values, please contact your SightMap Integration Specialist.

// Exp. 1: Locate unit `E05`.

embed.locateUnitByUnitNumber('E05');

// Exp. 2: Locate unit `E05` and display the Unit Details modal.

embed.locateUnitByUnitNumber('E05', {displayDetails: true});

Options

Option
Type
Default Value
Description

displayDetails

Boolean

false

Determines if the Unit Details modal is displayed.

setUnitIdMatches

Provide a custom result set of unit ID values to filter on, known as "Your Matches".

TypeScript Definition

setUnitIdMatches(unitIds: string[], options?: object): void
// Exp. 1: Set matches to the given units based on id.

var ids = [
  '258780', // W04
  '258702', // E05
  '258748', // E10
  '258672', // SE100
  '258759', // W22
];

embed.setUnitIdMatches(ids);

// Exp. 2: Set matches to the given units based on id and display filter input.

var ids = [
  '258780', // W04
  '258702', // E05
  '258748', // E10
  '258672', // SE100
  '258759', // W22
];

embed.setUnitIdMatches(ids, {filterEditing: true});

Options

Option
Type
Default Value
Description

filterEditing

Boolean

false

Determines if filter input is displayed.

setUnitNumberMatches

Provide a custom result set of unit number values to filter on, known as "Your Matches".

TypeScript Definition

setUnitNumberMatches(unitNumbers: string[], options?: object): void

Unit Number Uniqueness

There are SightMap instances were unit numbers are not unique within the set of units. Use the setUnitIdMatches method in these cases.

To obtain unit ID values, please contact your SightMap Integration Specialist.

// Exp. 1: Set matches to the given units based on unit number.

var unitNumbers = [
  'W04',
  'E05',
  'E10',
  'SE100',
  'W22'
];

embed.setUnitNumberMatches(unitNumbers);

// Exp. 2: Set matches to the given units based on unit number and display filter input.

var unitNumbers = [
  'W04',
  'E05',
  'E10',
  'SE100',
  'W22'
];

embed.setUnitNumberMatches(unitNumbers, {filterEditing: true});

Options

Option
Type
Default Value
Description

filterEditing

Boolean

false

Determines if filter input is displayed.

getUnitIds

Retrieve a list of unit IDs from the set of units.

TypeScript Definition

getUnitIds(callback: (unitIds: string[]) => void): void
// Get the list of unit IDs:
embed.getUnitIds(function (unitIds) {
  console.log('Unit IDs:', unitIds);
});

getUnitNumbers

Retrieve a list of unit numbers from set of the units.

TypeScript Definition

getUnitNumbers(callback: (unitNumbers: string[]) => void): void
// Get the list of unit numbers:
embed.getUnitNumbers(function (unitNumbers) {
  console.log('Unit Numbers:', unitNumbers);
});

Unit Number Uniqueness

There are SightMap instances in which unit numbers are not unique within the set of units. Therefore, this method may return duplicate values.

If unique values are required or preferred, use the getUnitIds method instead. To obtain unit ID values, please contact your SightMap Integration Specialist.

disableUI

Disable certain UI elements

TypeScript Definition

disableUI(elements: string[]): void
/* Disable certain UI elements
'filters' hides the filter section
'unitList' hides the unit list section
'floorSelection' hides the floor selector, including floor picker if present
*/
embed.disableUI(['filters','unitList','floorSelection']);

Floor Navigation

Do not hide the floor selector unless you have created a alternate way to identify the floors. Exceptions may be made for properties that have only ONE floor, and there are NO other floors in the building(s).

Examples

SightMap® JavaScript API


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.