All versions of this documentation
X

Indoor maps


Open in a new window.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js">
  </script>
  <script src="../build/ogma.min.js"></script>
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <style>
    html,
    body {
      margin: 0;
    }

    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }

    .control-bar {
      font-family: Helvetica, Arial, sans-serif;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      border-radius: 4px;
      background: white;
      padding: 5px 10px;
    }

    #controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 9999;
    }

    #controls label {
      display: block;
    }

    #controls form {
      padding-top: 5px;
      line-height: 1.5em;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <div class="control-bar" id="controls">
    <form id="ui">
      <span>Topology View</span>
      <label><input type="radio" name="topology" value="logical" checked="checked" />
        <i>Logical Topology</i></label>
      <label><input type="radio" name="topology" value="physical" />
        <i>Physical Topology</i></label>
      </label>
    </form>
  </div>

  <script>
    'use strict';

    Ogma.libraries['leaflet'] = L;

    var graph = {
      nodes: [
        { id: 'Router', data: { floorPlanY: 36, floorPlanX: 953 } },
        { id: 'Web Server', data: { floorPlanY: 72, floorPlanX: 903 } },
        { id: 'Switch', data: { floorPlanY: 476, floorPlanX: 953 } },
        { id: 'Admin Hub', data: { floorPlanY: 478, floorPlanX: 497 } },
        { id: 'Admin Workstation 1', data: { floorPlanY: 545, floorPlanX: 658 } },
        { id: 'Admin Workstation 2', data: { floorPlanY: 545, floorPlanX: 497 } },
        { id: 'Admin Workstation 3', data: { floorPlanY: 545, floorPlanX: 318 } },
        { id: 'Network Printer 1', data: { floorPlanY: 36, floorPlanX: 827 } },
        { id: 'Network Printer 2', data: { floorPlanY: 36, floorPlanX: 320 } },
        { id: 'Internet', data: { floorPlanY: 103, floorPlanX: 991 } },
        { id: 'Workstation 1', data: { floorPlanY: 334, floorPlanX: 335 } },
        { id: 'Workstation 2', data: { floorPlanY: 334, floorPlanX: 425 } },
        { id: 'Workstation 3', data: { floorPlanY: 294, floorPlanX: 392 } },
        { id: 'Workstation 4', data: { floorPlanY: 294, floorPlanX: 483 } },
        { id: 'Workstation 5', data: { floorPlanY: 334, floorPlanX: 554 } },
        { id: 'Workstation 6', data: { floorPlanY: 294, floorPlanX: 609 } },
        { id: 'Workstation 7', data: { floorPlanY: 334, floorPlanX: 645 } },
        { id: 'Workstation 8', data: { floorPlanY: 294, floorPlanX: 698 } },
        { id: 'Workstation 9', data: { floorPlanY: 334, floorPlanX: 762 } },
        { id: 'Workstation 10', data: { floorPlanY: 294, floorPlanX: 826 } },
        { id: 'Workstation 11', data: { floorPlanY: 334, floorPlanX: 859 } },
        { id: 'Workstation 12', data: { floorPlanY: 294, floorPlanX: 917 } },
        { id: 'Workstation 13', data: { floorPlanY: 151, floorPlanX: 552 } },
        { id: 'Workstation 14', data: { floorPlanY: 111, floorPlanX: 608 } },
        { id: 'Workstation 15', data: { floorPlanY: 151, floorPlanX: 642 } },
        { id: 'Workstation 16', data: { floorPlanY: 111, floorPlanX: 697 } },
        { id: 'Isle 1 Switch', data: { floorPlanY: 314, floorPlanX: 412 } },
        { id: 'Isle 2 Switch', data: { floorPlanY: 314, floorPlanX: 628 } },
        { id: 'Isle 3 Switch', data: { floorPlanY: 314, floorPlanX: 840 } },
        { id: 'Isle 4 Switch', data: { floorPlanY: 129, floorPlanX: 628 } },
        { id: 'Ethernet Switch', data: { floorPlanY: 194, floorPlanX: 953 } },
      ],
      edges: [
        { id: 'Admin to Hub 1', source: 'Admin Workstation 1', target: 'Admin Hub', attributes: { width: 1 } },
        { id: 'Admin to Hub 2', source: 'Admin Workstation 2', target: 'Admin Hub', attributes: { width: 1 } },
        { id: 'Admin to Hub 3', source: 'Admin Workstation 3', target: 'Admin Hub', attributes: { width: 1 } },
        { id: 'Server to Router', source: 'Web Server', target: 'Router', attributes: { width: 5 } },
        { id: 'Admin to Switch', source: 'Admin Hub', target: 'Switch', attributes: { width: 5 } },
        { id: 'Switch to Internet', source: 'Switch', target: 'Router', attributes: { width: 5 } },
        { id: 'Printer 1 Linking', source: 'Network Printer 1', target: 'Router', attributes: { width: 1 } },
        { id: 'Printer 2 Linking', source: 'Network Printer 2', target: 'Router', attributes: { width: 1 } },
        { id: 'W1 to Switch', source: 'Workstation 1', target: 'Isle 1 Switch', attributes: { width: 1 } },
        { id: 'W2 to Switch', source: 'Workstation 2', target: 'Isle 1 Switch', attributes: { width: 1 } },
        { id: 'W3 to Switch', source: 'Workstation 3', target: 'Isle 1 Switch', attributes: { width: 1 } },
        { id: 'W4 to Switch', source: 'Workstation 4', target: 'Isle 1 Switch', attributes: { width: 1 } },
        { id: 'W5 to Switch', source: 'Workstation 5', target: 'Isle 2 Switch', attributes: { width: 1 } },
        { id: 'W6 to Switch', source: 'Workstation 6', target: 'Isle 2 Switch', attributes: { width: 1 } },
        { id: 'W7 to Switch', source: 'Workstation 7', target: 'Isle 2 Switch', attributes: { width: 1 } },
        { id: 'W8 to Switch', source: 'Workstation 8', target: 'Isle 2 Switch', attributes: { width: 1 } },
        { id: 'W9 to Switch', source: 'Workstation 9', target: 'Isle 3 Switch', attributes: { width: 1 } },
        { id: 'W10 to Switch', source: 'Workstation 10', target: 'Isle 3 Switch', attributes: { width: 1 } },
        { id: 'W11 to Switch', source: 'Workstation 11', target: 'Isle 3 Switch', attributes: { width: 1 } },
        { id: 'W12 to Switch', source: 'Workstation 12', target: 'Isle 3 Switch', attributes: { width: 1 } },
        { id: 'W13 to Switch', source: 'Workstation 13', target: 'Isle 4 Switch', attributes: { width: 1 } },
        { id: 'W14 to Switch', source: 'Workstation 14', target: 'Isle 4 Switch', attributes: { width: 1 } },
        { id: 'W15 to Switch', source: 'Workstation 15', target: 'Isle 4 Switch', attributes: { width: 1 } },
        { id: 'W16 to Switch', source: 'Workstation 16', target: 'Isle 4 Switch', attributes: { width: 1 } },
        { id: 'Isle 1 to Switch', source: 'Isle 1 Switch', target: 'Ethernet Switch', attributes: { width: 3 } },
        { id: 'Isle 2 to Switch', source: 'Isle 2 Switch', target: 'Ethernet Switch', attributes: { width: 3 } },
        { id: 'Isle 3 to Switch', source: 'Isle 3 Switch', target: 'Ethernet Switch', attributes: { width: 3 } },
        { id: 'Isle 4 to Switch', source: 'Isle 4 Switch', target: 'Ethernet Switch', attributes: { width: 3 } },
        { id: 'Office To Internet', source: 'Ethernet Switch', target: 'Router', attributes: { width: 5 } },
        { id: 'To Internet', source: 'Router', target: 'Internet', attributes: { width: 10 } },
      ]
    };

    var ogma = new Ogma({
      graph: graph,
      container: 'graph-container'
    });

    var computerIcon = '\uf108';
    var internetIcon = '\uf0c2';
    var routerIcon = '\uf277';
    var switchIcon = '\uf0ec';
    var printerIcon = '\uf02f';
    var serverIcon = '\uf233';

    ogma.styles.addNodeRule({
      radius: 10,
      text: {
        content: function (node) {
          return node.getId();
        },
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        minVisibleSize: 0
      },
      color: 'white',
      outerStroke: {
        color: '#2171b5',
        width: 1
      },
      icon: {
        content: function (node) {
          var name = node.getId();
          if (/switch/i.test(name)) {
            return switchIcon;
          }
          if (/workstation/i.test(name)) {
            return computerIcon;
          }
          if (/printer/i.test(name)) {
            return printerIcon;
          }
          if (/router/i.test(name)) {
            return routerIcon;
          }
          if (/internet/i.test(name)) {
            return internetIcon;
          }
          return serverIcon;
        },
        font: 'FontAwesome',
        color: '#2171b5',
        minVisibleSize: 0
      }
    });

    ogma.styles.addEdgeRule({
      color: function (edge) {
        var width = edge.getAttribute('width');
        if (width === 1) {
          return '#bae4b3';
        }
        if (width < 5) {
          return '#a1dab4';
        }
        if (width < 10) {
          return '#41b6c4';
        }
        return '#225ea8';
      }
    })

    ogma.layouts.force({ locate: true });

    // these are the real dimensions of the image
    var floorPlanWidth = 3012;
    var floorPlanHeight = 1984;
    var floorPlanUrl = 'img/office-floorplan.png';

    // L.CRS.Simple world maps a world bound of 1000 units per side:
    // because the image is not squared we need to map the height
    // based on its ratio proportion
    var ratio = (floorPlanWidth / floorPlanHeight);
    var bounds = L.latLngBounds([[0, 0], [1000 / ratio, 1000]]);

    function toggleTopology() {

      return ogma.geo.toggle({
        // note that in L.CRS.Simple x and y are
        // longitude and latitude, respectively
        longitudePath: 'floorPlanX',
        latitudePath: 'floorPlanY',
        // set the custom layer as tiles object
        tiles: L.imageOverlay(floorPlanUrl, bounds),
        // Use a custom projection function
        crs: L.CRS.Simple,
        // Do not wrap coordinates: let the user to handle it
        wrapCoordinates: false,
        // when using custom projections zoom level can be negative too
        minZoomLevel: -2,
        // Transition time from Graph to Geo mode
        duration: 1000,
      }).then(function () {
        if (ogma.geo.enabled()) {
          var map = ogma.geo.getMap();
          map.fitBounds(bounds);
        }
      });
    }

    document.querySelector('#ui').addEventListener('change', function (evt) {
      toggleTopology();
    });

  </script>
</body>

</html>