SightMap JS API Floor Picker Demo

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>
    <script src="https://sightmap.com/embed/api.js">


    </script>

  </head>

  <body>
    <div class="margin">
      <div class="head-container">
        <div class="title">
          <div class="textbox">
            Select a Floor
          </div>
        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1045 980">
        <defs>
          <style>
            .cls-1 {
              fill: none
            }

          </style>
        </defs>
        <title>CircFP_RentCafeExport_120619_JP</title>
        <g id="background">
          <image width="1045" height="980" xlink:href="https://cdngeneral.rentcafe.com/dmslivecafe/3/1102311/CircFP2.jpg"></image>
        </g>
        <g id="floors">
          <polygon id="17702" data-name="17702" class="cls-1" points="415.49 497.08 394.24 500.94 390.38 500.35 312.96 512.83 312.96 517 298.25 518.78 289.33 517.97 289.33 498.05 253.07 492.18 257.38 490.38 184.89 478.39 184.89 476.94 180.66 475.94 214.32 468.92 221.26 470.18 262.24 462.15 262.24 461.58 256.78 460.37 287.24 453.98 297.05 456.36 341.33 447.74 338.66 445.96 389.78 436 394.09 436.59 415.79 432.14 415.79 422.18 409.39 420.1 473.44 406.58 476.12 407.91 555.02 391.72 553.54 389.93 631.7 373.44 656.97 382.35 693.67 375.22 689.21 372.69 759.5 358.28 773.92 364.82 773.92 359.62 771.84 358.13 780.31 356.05 837.07 381.76 834.1 384.14 852.83 392.46 861.29 392.46 906.17 412.82 902.01 413.71 902.01 420.69 984.12 456.28 984.12 458.42 983.17 458.42 983.17 515.44 901.73 488.44 901.73 485.79 858.82 471.4 850.63 471.4 832.8 465.86 832.8 462.69 779.73 444.87 773.13 446.05 758.32 440.91 758.32 418.39 631.7 373.44 553.54 389.93 555.02 391.72 476.12...

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: open sans, sans-serif;
}

svg {
	width: 100%;
	padding-top: -400px;
	max-height: 100%;
}

svg#building path,
#floors > path,#floors > polygon {
	fill: rgba(0,0,0,0.4);
}

#floors > path:hover,#floors > polygon:hover,#floors > path.active,#floors > polygon.active {
	fill: rgba(72,138,153,0.8);
}

.margin {
  margin: 1vh;
  height: 98vh;
}

.head-container {
  width: 100%;
  margin: auto;
}

nav.container {
  display: block;
  background-color: #333333;
  text-align: center;
  margin: auto;
}

.nav-button {
  text-align: center;
  color: white;
  width: 100%;
}

.sightmap-container {
  height: 80vh;
  width: 100%;
}

.title {
  background-color: hsl(211, 38%, 61%);
  color: white;
  margin: auto;
}

.textbox {
  text-align: center;
  line-height: 233%;
  font-size: 40pt;
}

.button-list {
  display: flex;
  flex-direction: row;
}

JavaScript

$('document').ready(function() {
  // Create a new embed instance, providing the IFrame id value:
  var embed = new SightMap.Embed('sightmap');

  $('#floors > path, #floors > polygon').each(function() {
    $(this).on('click', function() {

      // Create a new embed instance, providing the iframe id value:
      embed.setFloor($(this).attr('id'));

      //Auto-scroll to map
      $('html, body').animate({
        scrollTop: $('#sightmap').offset().top
      }, 300);

      //Change svg state
      $('#floors > path.active, #floors > polygon.active').removeAttr('class');
      $(this).attr('class', 'active');
    });

  })

  // Listen for floor changes
  var selectedID;
  embed.on('floor:change', function(event) {
    $('#floors > path.active, #floors > polygon.active').removeAttr('class');
    selectedID = event.id;
    $('#' + selectedID).attr('class', 'active');
  })

  embed.on('floor:change', function(event) {
    console.log('floor id is now: ', event.id)
  })
});