World Map

by nextsupport

HTML

<link rel="stylesheet" href="//abdvl.github.io/src/dist/css/next.css">
<script src="//abdvl.github.io/src/dist/js/next.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

CSS

body,
        html {
            height: 100%;
        }

JavaScript

var topo = new nx.graphic.Topology({
            width: 800,
            height: 800,
            showIcon: true,
            nodeConfig: {
                label: 'model.name'
            },
            linkConfig: {
                linkType: 'parallel'
            },
            identityKey: 'name',
            layoutType: 'WorldMap',
            layoutConfig: {
                longitude: 'model.longitude',
                latitude: 'model.latitude',
                worldTopoJson: '//bl.ocks.org/mbostock/raw/4090846/world-50m.json'
            }

        });

        //set data
        topo.on('ready', function() {
            topo.registerLayout('WorldMap', new nx.graphic.Topology.WorldMapLayout())
            topo.data(topologyData);
        });

        //create app
        var app = new nx.ui.Application();
        //attach topo to app;
        topo.attach(app);

        var topologyData = {
            "nodes": [{
                "function": "core",
                "name": "sfc",
                "latitude": 63.391326,
                "ipaddress": "29.29.29.29",
                "isisarea": "72",
                "site": "sfc",
                "longitude": -149.8286774,
                "y": 550.31264292335,
                "protected": "F",
                "active": "T",
                "x": -1021.91217850693,
                "type": "physical"
            }, {
                "function": "core",
                "name": "sea",
                "latitude": 47.6062,
                "ipaddress": "28.28.28.28",
                "isisarea": "72",
                "site": "sea",
                "longitude": -122.332,
                "y": -9.8292223022888,
                "protected": "F",
                "active": "T",
                "x": -552.893870303646,
                "type": "physical"
            }, {
                "function": "core",
                "name": "hst",
                "latitude": 29.7633,
                "ipaddress": "20.20.20.20",
              ...