UnitMap JavaScript SDK Demo

stevo demo 1

by Jacob Pearlstein

HTML

<script src="https://cdn.unitmap.com/sdk/js/0.8.0/unitmap.js"></script>
<html>
<!-- We will bind to this `map` div. -->
<script src="https://cdn.unitmap.com/sdk/js/0.8.0/unitmap.js"></script>
<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>
</html>

CSS

html,
 body {
   margin: 0;
   width: 100%;
   height: 100%;
 }
 
 #output {
   position: fixed;
   top: 10px;
   left: 10px;
 }

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 = '3947';

// 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 first level which contains a floor tag.

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

  // 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;
    }

    event.unit.color('#fff');
  });

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

    if (activeUnit) {
      activeUnit.color('#fff');
    }

    // When a user selects a unit, we will pan to the unit's center and
    // highlight it.

    map.panTo(event.unit.center());
    event.unit.color('#80dfe5');

    activeUnit = event.unit;
  });

  // Helper to determine if a given unit is the active unit.

  function isActive(unit) {
    return activeUnit && activeUnit.id === unit.id;
  }
});

var data = JSON.stringify(false);