The Foundry SightMap JS API Demo

This document is a simple example, containing just an IFrame.

by Jacob Pearlstein

HTML

<!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>

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

  <body>
    <!--
    Include the IFrame embed code. The embed URL must include `enable_api=1` and provide the pages origin, the example uses `https://fiddle.jshell.net`, 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/dzlpod76wg4?enable_api=1&origin=https://fiddle.jshell.net" frameborder="0" width="100%" height="100%"></iframe>

  </body>

</html>

CSS

* {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

JavaScript

// Code is wrapped in jQuery documeny ready function. This is optional. It helps ensure the code does not execute until the document is ready, but that is not problematic for every webpage.
$('document').ready(function() {
  // Create a new embed instance, providing the IFrame id value
  var embed = new SightMap.Embed('sightmap');

  // console log to test embed initlization. If this does not show up in the console, the embed is not initializing.
  console.log(embed);

  // tie function to embed 'ready' event, ensuring nothing executes before the embed is ready
  embed.on('ready', function() {

    // console log to test ready event. If this does not show up in the console, there is an error with ready function or event.
    console.log('hello world');

    // array containing desired unit numbers
    var unitNumbers = [
      '633',
      '631'
    ];

    // function to set unit number matches, using array
    embed.setUnitNumberMatches(unitNumbers);
  });
});