Plans JavaScript SDK

The Plans JavaScript SDK allows you to add customisable plan viewers to your website using JavaScript. The SDK manages the loading of plans and allows you to query them for information (such as what icons are present) so that you can create your own tailored experiences.

Getting the SDK

The SDK can be loaded using a <script> tag.

<script src="https://api.locatrix.com/plans-javascript/v1/sdk.js"></script>

No other stylesheets/images/assets are required.

To ensure that the SDK is kept constantly up-to-date and can always load plans created by the latest versions of PlanStudio, we require that the SDK is always loaded using a <script> tag from the given URL.

Creating a Viewer

Once the SDK is loaded, you can create a viewer by constructing a locatrix.plans.Viewer object and pointing it at a target <div> element to render into. The viewer will fill the div with a gray background and grid pattern once constructed.

var myViewer = new locatrix.plans.Viewer(document.querySelector('#target-div-id'));

Unloaded viewer

If you would like to keep your page loaded but unload the viewer, you can call the viewer’s dispose() method to unload it from your page.

myViewer.dispose();

Loading plans using viewer tokens

Viewer tokens are generated by the ESAPI.

After creating a Viewer, use its loadPlan() method to load a plan using a viewer token.

const clientViewerToken = '<...>';
myViewer.loadPlan(clientViewerToken, { planCode: 'pln_v2p3zaznepc9zte4gxsvjqnhq' });

If you have a viewer token for a campus or floor, you don’t need to provide the plan code as the viewer will automatically default to a campus’s site plan or a floor’s floor plan.

const campusViewerToken = '<...>';
myViewer.loadPlan(viewerToken); // load the campus's site plan

Customising the viewer

Once a plan is loaded, you can use the methods of the Viewer to customise the viewer and access information about the loaded plan/icon library. Refer to the SDK Reference for details.