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

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


    </script>

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

    <style>
      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(219, 1, 49, 0.5);
      }

    </style>

  </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 2000 1500">
        <defs>
          <style>
            .cls-1 {
              fill: none;
            }

          </style>
        </defs>
        <g id="background">
          <image width="2000" height="1500" xlink:href="https://i.imgur.com/JqLsEwm.jpg" />
        </g>
        <g id="floorPicker">
          <g id="floors">
            <path id="42088" data-name="42088" class="cls-1" d="M989.46,660.21h104.61l724.69-158.74,6-.36,32.76-8.19.48-22.33-37-13.07V392.13l6.54-1.45-93.36-46.13-99.39-4.95-68.43,34.73-57-4-.37,9-32.6-1.09V367.79l-100.71-7.49V323.84l-39.23-2.18v26.15l-87.54-5.44-193.25,16v62.11l-13.08,1.46L939,410.29l-49.4,17.08V370.7l-44.68-3.63v57l-24.34-3.27V407l-50.12-6.53-16.71,1.45v9.81l-37.78-4.36L516.5,426.19v-7.72l1.37-6.45H508.6v-6.26a23.44,23.44,0,0,0-23.44-23.44H471.9A18.87,18.87,0,0,0,453,401.2v4.55h-9.81V412H447v8.72l-3.81,1.9h-6.4v11.17H425l-16.89,1.91v20.16l.92,70.74Z" />
            <polygon id="42087" data-name="42087" class="cls-1" points="989.46 660.21 408.99 526.62 409.71 582.29 990.55 741.94 1094.07 741.94 1817.67 557.05 1824.15 556.47 1856.31 548.33 1856.86 522.9 1829.13 512.63 1818.58...