SightMap JS API Floor Picker + Knock
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...