Indoor maps

This example shows how to use custom coordinate system to display nodes on a plan or a map in geo mode.

index.jsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

Ogma.libraries['leaflet'] = L;

const 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 }
    }
  ]
};

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

const computerIcon = '\uf108';
const internetIcon = '\uf0c2';
const routerIcon = '\uf277';
const switchIcon = '\uf362';
const printerIcon = '\uf02f';
const serverIcon = '\uf233';

ogma.styles.addNodeRule({
  radius: 10,
  text: {
    content: node => node.getId(),
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    minVisibleSize: 0
  },
  color: 'white',
  outerStroke: {
    color: '#2171b5',
    width: 1
  },
  icon: {
    content: node => {
      const 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: 'Font Awesome 5 Free',
    color: '#2171b5',
    style: 'bold',
    minVisibleSize: 0
  }
});

ogma.styles.addEdgeRule({
  color: edge => {
    const 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
const floorPlanWidth = 3012;
const floorPlanHeight = 1984;
const 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
const ratio = floorPlanWidth / floorPlanHeight;
const bounds = L.latLngBounds([
  [0, 0],
  [1000 / ratio, 1000]
]);

const toggleTopology = () =>
  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(() => {
      if (ogma.geo.enabled()) {
        const map = ogma.geo.getMap();
        map.fitBounds(bounds);
      }
    });

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
      rel="stylesheet"
    />
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <!-- we force the loading of the font awesome -->
    <i class="fas fa-camera fa-1x" style="color: rgba(0, 0, 0, 0)"></i>
    <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
        >
      </form>
    </div>
    <script src="index.js"></script>
  </body>
</html>

css

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

Indoor maps ​

Indoor maps