Unit Map JavaScript SDK Demo

Unit Map Sales Demo

by Jacob Pearlstein

HTML

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

  <body>
    <!-- We will bind to this `map` div. -->
    <div id="map" style="width: 100%; height: 100%">

    </div>
    <!-- We will output the unit ID the user is currently interacting with. -->
    <div id="output">

    </div>
    <div class="legend">
      <div class="legendItem">
        <span class="lOccupied"></span>
        16 Units
        <span class="legendCopy">Leased Occupied</span>
      </div>
      <div class="legendItem">
        <span class="aVacant"></span>
        6 Units
        <span class="legendCopy">Available Vacant</span>
      </div>
      <div class="legendItem">
        <span class="lVacant"></span>
        5 Units
        <span class="legendCopy">Leased Vacant</span>
      </div>
    </div>
  </body>

</html>

CSS

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

 }

 html,
 body {
   margin: 0;
   width: 100%;
   height: 100%;
   line-height: 1.15;
   background-color: #fff;
 }

 #map {
   border: 1px;
   width: 100%;
   max-height: 90vh;
   border-color: #333;
   margin-left: 2%;
   margin-right: 2%;
   margin-top: 0;
   margin-bottom: 0;
 }

 #output {
   position: fixed;
   top: 10px;
   left: 10px;
 }

 .legend {
   display: flex;
   width: 100%;
   height: 10vh;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   user-select: none;
   font-size: 14px;
   margin: auto;
   text-align: center;
   padding: 8px;
   border-radius: 5px;
 }

 .legendItem {
   margin: 2%;
 }

 .lOccupied {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #70c49d;
   border-width: initial;
   border-style: none;
   border-color: initial;
   border-image: initial;
   border-radius: 50%;
 }

 .aVacant {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #e07a70;
   border-width: initial;
   border-style: none;
   border-color: initial;
   border-image: initial;
   border-radius: 50%;
 }

 .lVacant {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #248ED8;
   border-width: initial;
   border-style: none;
   border-color: initial;
   border-image: initial;
   border-radius: 50%;
 }


 .legendCopy {
   padding-left: 7px;
   margin-left: 3px;
   border-left: 1px solid rgb(219, 219, 219);
 }

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.

var API_KEY = 'fb710633807b4c39af027fbcd0ffeb65';
var UNIT_MAP_ID = '2837';

// 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.

map.load(UNIT_MAP_ID);

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

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

  map.maxScale(1);

  // Reference to the active unit.

  var activeUnit;

  // Display the last level which contains a floor tag.

  var floors = map.levels().has({
    floor: true
  });
  floors.except(floors.last().tags().only('floor')).hide();

  var aVacant = "#E07A70"

  var lOccupied = "#70C49D"

  var lVacant = "#248ED8"

  // Color units according to desired scheme. Leasing BI example implemented.

  var AVUnits = [583072, 583087, 583122, 583146, 583164, 583171];
  var LOUnits = [583073, 583075, 583084, 583085, 583086, 583123, 583141, 583142, 583143, 583144, 583145, 583147, 583165, 583166, 583167, 583168, 583169];
  var LVUnits = [583074, 583120, 583121, 583140, 583170];

  map.units().find(AVUnits).color(aVacant);

  map.units().find(LOUnits).color(lOccupied);

  map.units().find(LVUnits).color(lVacant);

  // Add events to listen for unit interaction. For this example, we are tracking the unit the user interacts with.

  map.on('unit:mouseover', function(event) {
    document.getElementById('output').innerHTML = 'Unit ID: ' + event.unit.id;

    if (isActive(event.unit)) {
      return;
    }

    event.unit.color('#6bbabf');
  });

  map.on('unit:mouseout', function(event) {
    if (isActive(event.unit)) {
      return;
    }

    var unitId = parseInt(event.unit.id)

    if (AVUnits.includes(unitId)) {
      event.unit.color(aVacant);
    }

    if (LOUnits.includes(unitId)) {
      event.unit.color(lOccupied);
    }

    if (LVUnits.includes(unitId)) {
     ...