Lafayette West Building Picker

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

    <script src="https://sightmap.com/embed/api.js">


    </script>

  </head>

  <body>
    <div class="margin">
      <div class="head-container">
        <div class="title">

        </div>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
        <defs>
          <style>
            .cls-1 {
              fill: none;
            }

          </style>
        </defs>
        <g id="background">
          <image xlink:href="https://i.imgur.com/QljdAp4.jpg" />
        </g>
        <g id="buildingPicker">
          <g id="buildings">

            <polygon id="91181" data-name="91181" class="cls-1" points="725.51 549.68 774.19 519.35 764.62 445.94 569.5 417.61 512.04 437.56 524.41 499 533.99 500.6 535.58 510.18 537.67 510.35 536.54 501 540.11 501.42 559.04 593.12 625.08 611.72 711.49 557.6 711.49 547.85 715.17 546.43 725.51 549.68" />


            <polygon id="91177" data-name="91177" class="cls-1" points="503.26 710.88 574.69 665.79 551.94 569.23 312.93 514.57 226.34 544.49 267.04 632.28 503.26 710.88" />
          </g>
        </g>
      </svg>
      <br />
    </div>
    
  </body>

  <script src="jquery-3.5.1.min.js"></script>

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

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

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


          //Change svg state
          $('#buildings > path.active, #buildings > polygon.active').removeAttr('class');
         ...