UnitMap JavaScript SDK Demo

SmartRent – Parking Map Demo

by Jacob Pearlstein

HTML

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

  <body>
    <div class="wrapper">
      <div class="selectWrap">
        <div id="floorSelect">
          <span class="fieldLabel">FLOOR</span><br />
          <select id="floors">
            <option selected value="21077">Floor 1</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: #fff;
   color: #333;
   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.

var API_KEY = 'lXIPNcwOVgXsjAhJLr5C2iTRP4lPpusS';
var UNIT_MAP_ID = '5236';

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

// Get list of unit IDs and numbers
var data = JSON.stringify(false);

var xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function() {
  if (this.readyState === this.DONE) {
    const {
      data
    } = JSON.parse(this.responseText);

    const oneBedUnits = data.reduce(function(carry, unit) {
      carry.push(unit.id);
      return carry;
    }, []);

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

      map.maxScale(5);

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

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

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

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

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

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

      });

      // Unit colors
      var oneBed = "rgba(232,178,80,0.54)";
      var activeOneBed = "#e4b350";

      // Compile unit IDs

      map.units().find(oneBedUnits).color(oneBed);

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

      // Reference to the active unit.
      var activeUnit;

      var i = 0;

      map.on('unit:click', function(event) {

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

        activeUnit = event.unit;

        // When a user selects a unit, it is activated.

        // ...