Unit Map JavaScript SDK Demo

Engrain Sales Demo

by Jacob Pearlstein

HTML

<script src="https://cdn.unitmap.com/sdk/js/0.9.0/unitmap.js"></script>
<html>

  <body>
    <div class="wrapper">
      <div class="selectWrap">
        <div id="floorSelect">
          <span class="fieldLabel">FLOOR</span><br />
          <select id="floors">
            <option value="12696">Ground</option>
            <option selected value="12434">Floor 1</option>
            <option value="12435">Floor 2</option>
            <option value="12436">Floor 3</option>
          </select>
        </div>
        <div id="spacer">

        </div>
      </div>
      <div class="mapWrap">
        <!-- We will output the unit IDs the user has selected. -->
        <div id="list">
        </div>
        <!-- We will bind to this `map` div. -->
        <div id="map">

        </div>
      </div>
    </div>

  </body>

</html>

CSS

* {
   font-family: sans-serif;
   box-sizing: border-box;
 }

 html,
 body {
   width: 100vw;
   height: 100vh;
   line-height: 1.25;
   background-color: #263349;
   color: #fff;
   margin: auto;
 }

 .wrapper {
   height: 92%;
   width: 100%;
 }

 .selectWrap {
   display: flex;
   flex-direction: row;
   width: 100%;
 }

 #spacer {
   width: 100%;
 }

 #floorSelect {
   padding: 0.5rem;
 }

 #floors {
   height: 1.5rem;
   width: 15rem;
   font-size: 1rem;
   margin-top: 2px;
 }

 .mapWrap {
   display: flex;
   flex-direction: row;
   height: 100%;
   width: 100%;
   padding-right: 2%;
 }

 #list {
   display: flex;
   flex-direction: column;
   width: 16rem;
   min-width: 16rem;
   padding: 0.5rem;
   font-size: 0.85rem;
 }

 #map {
   width: 100%;
   height: 100%;
 }

 #reset {
   font-size: 1rem;
   position: absolute;
   bottom: 20px;
   right: 40px;
 }

JavaScript

// The default values will get you going quickly and when you're ready. Try swapping them out with your provided API Key and a Unit Map ID.

const API_KEY = 'fb710633807b4c39af027fbcd0ffeb65';
const UNIT_MAP_ID = '2966';

// Create a unitmap instance, telling it which DOM element it should bind to along with your API Key.

var map = unitmap('map', API_KEY);

// Load a Unit Map and its background (if present)

map.load(UNIT_MAP_ID);

// When the Unit Map is loaded, we can begin interacting with it.

map.on('ready', function() {

  map.maxScale(3);

  // Display the floor that matches the ID 12696
  var floors = map.levels().has({
    floor: true
  });

  floors.except({
    floor: "12434",
  }).hide();

  // Read floor selector
  var floorSelector = $('#floors');

  floorSelector.on("change", function(event) {

    floors.except({
      floor: this.value,
    }).hide();

    floors.where({
      floor: this.value,
    }).show();

  });

  // Unit colors
  let studio = "rgba(233,177,84,0.55)";
  let oneBed = "rgba(232,178,80,0.54)";
  let twoBed = "rgba(62,62,61,0.53)";
  let threeBed = "rgba(111,124,119,0.53)";
  let activeStudio = "#d78a28";
  let activeOneBed = "#e4b350";
  let activeTwoBed = "#3e3d3c";
  let activeThreeBed = "#6f7c77";

  // Compile unit IDs

  let studioUnits = [
    604641, 604643, 604644, 604645, 604646, 604647, 604648, 604649, 604658, 604660, 604661, 604662, 604663, 604664, 604665, 604666, 604681, 604683, 604684, 604685, 604686, 604687, 604688, 604689, 604702, 604703, 604706, 604724, 604725, 604728, 604746, 604747, 604750, 604763, 604777, 604790, 604801, 604819, 604838
  ];
  let oneBedUnits = [
    604642, 604650, 604659, 604667, 604670, 604671, 604672, 604673, 604675, 604676, 604677, 604682, 604690, 604692, 604693, 604694, 604695, 604698, 604699, 604700, 604701, 604704, 604707, 604708, 604709, 604710, 604711, 604712, 604714, 604715, 604716, 604717, 604720, 604721, 604722, 604723, 604726, 604729, 604730, 604731, 604732, 604733, 604734,...