vis.js HTML overlay demo

<!doctype html>
<html>
<head>
    <title>HTML Overlay</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.js"></script>

<style type="text/css">
#network {
  width: 600px;
  height: 600px;
  border: 1px solid lightgray;
}

p {
  max-width: 600px;
}

h4 {
  margin-bottom: 3px;
}

.overlay {
	position: absolute;
  pointer-events: none;
}

#html2 {
	font-family: sans-serif;
	color: #cccccc;
	background-color: #0000aa;
}

#html2 img {
	width: 100px
}
</style>
</head>

<body>
<div id="network"></div>

<div id='html2' draggable='true' class='overlay'>
<table><tr><td>
	<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/03-train-cat-come-on-command.jpg">
</td><td>
	Luke Warm<br>
	Title: VP Marketing/Sales<br>
	ID: 2 Boss: 1
</tr></table>
</div>

</body>
</html>

<script type="text/javascript" src="data.js"></script>

// options 
var optionsSEV = {
  groups: {
    // sev items - person, location, vehicle, telephone etc.
    item_person: {
      shape: 'ellipse',
      color: 'gold'
    },
    item_location: {
      shape: 'ellipse',
      color: '#aaaaff'
    },
    // references - crime, custody, intel etc.
    reference_crime: {
      shape: 'box',
      color: '#aa0000'
    },
    reference_custody: {
      shape: 'box',
      color: '#bb0000'
    },
    reference_intel: {
      shape: 'box',
      color: '#cc0000'
    },
    // associations
    association_crime_offender: {
      label: 'Crime Offender'
    },
    association_crime_victim: {
      label: 'Crime Victim'
    },
    association_custody: {
      label: 'Custody'
    },
    association_intel_subject: {
      label: 'Intel Subject'
    }
  },
  edges: {
    "smooth": {
      "forceDirection": "none"
    }
  }
};
var nodesSEV = new vis.DataSet([
{id: 'item_person_123', label: 'Person\nJohn Smith', shape: 'image', image: 'http://www.rd.com/wp-content/uploads/sites/2/2016/02/03-train-cat-come-on-command.jpg'},
{id: 'item_person_234', label: 'Person\nGeorge Michael', group: 'item_person'},
{id: 'item_person_567', label: 'Person\nRichard Jones', group: 'item_person'},
{id: 'item_person_890', label: 'Person\nBob Builder', group: 'item_person'},
{id: 'item_location_1001', label: 'Location\n1 High Street', group: 'item_location'},
{id: 'reference_crime_ABC123', label: 'Crime\nABC123', group: 'reference_crime'},
{id: 'reference_custody_DEF123', label: 'Custody\nDEF123', group: 'reference_custody'},
{id: 'reference_intel_GHI123', label: 'Intel\nGHI123', group: 'reference_intel'},
{id: 'reference_crime_XXX999', label: 'Crime\nXXX999', group: 'reference_crime'}
]);

// edges / connections
var edgesSEV = new vis.DataSet([
{from: 'item_person_123', to: 'reference_crime_ABC123',arrows: 'to', group: 'association_crime_offender'},
{from: 'item_person_123', to: 'reference_custody_DEF123', arrows: 'to' , group: 'association_custody'},
{from: 'item_person_123', to: 'reference_intel_GHI123', arrows: 'to' , group: 'association_intel_subject'},
{from: 'reference_crime_ABC123', to: 'item_person_234', arrows: 'to' , group: 'association_crime_offender'},
{from: 'reference_crime_ABC123', to: 'item_person_567', arrows: 'to' , group: 'association_crime_victim'},
{from: 'reference_crime_ABC123', to: 'item_location_1001', arrows: 'to' , group: 'association_crime_victim'},
{from: 'reference_custody_DEF123', to: 'item_location_1001', arrows: 'to' , group: 'association_custody'},
{from: 'reference_intel_GHI123', to: 'item_person_567', arrows: 'to' , group: 'association_intel_subject'},
{from: 'item_person_567', to: 'reference_crime_XXX999', arrows: 'to' , group: 'association_intel_subject'},
{from: 'reference_crime_XXX999', to: 'item_person_890', arrows: 'to' , group: 'association_crime_offender'}
]);

// create a network
var containerSEV = document.getElementById('mynetworkFA');
var dataSEV = {
  nodes: nodesSEV,
  edges: edgesSEV
};

var networkSEV = new vis.Network(containerSEV, dataSEV, optionsSEV);

/* Styles go here */

#mynetworkFA {
  width: 600px;
  height: 400px;
  border: 1px solid lightgray;
}

p {
  max-width:800px;
}

var img = 'bartender-icon.png';

var container = document.getElementById('network');

var nodes = [
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4}
];

var edges = [
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 1, to: 4},
];



var data = {
    nodes: nodes,
    edges: edges
  };

var options = {
/*
	interaction: {
 		zoomView:false,
 		dragNodes:false,
 		dragView: false
 	},
*/
 	nodes: {
    borderWidth: 2,
    size: 24,
    shapeProperties: {
        useBorderWithImage: false
    },
    scaling: {
        min: 10,
        max: 30
    },
    fixed: {
        x: false,
        y: false
    }
    // clickToUse: false
   },
   edges: {
     length: 400,
     color: '#3598DC',
   },

   layout: {
     randomSeed: 1,
/*
     hierarchical: {
       levelSeparation: 200,
       direction: "LR"
     }
*/
   },
   physics: {
     enabled: true
   }
 };


function getNode(nodeId) {
  var item;
  for (var n in data.nodes) {
    var tmp = data.nodes[n];
    if (tmp.id === nodeId) {
      item = tmp;
      break;
    }
  }

  return item;
}

function hideNode(nodeId) {
  var item = getNode(nodeId);
  if (item === undefined) return;

	// Make the actual node invisible
	item.color = {
    border: 'RGBA(0,0,0,0)',
    background: 'RGBA(0,0,0,0)',
    highlight: {
      border: 'RGBA(0,0,0,0)',
      background: 'RGBA(0,0,0,0)'
    },
  }
}

function initSizes(elementId, nodeId) {
	var element = document.getElementById(elementId);
  var item = getNode(nodeId);
  if (item === undefined) return;

	item.widthConstraint = element.clientWidth;
	item.heightConstraint = element.clientHeight;
	hideNode(nodeId);
}

// TODO: add image centering
function placeOverlay(elementId, nodeId) {
  var pos = network.getPositions([nodeId]);
  var dom_coords = network.canvasToDOM({x:pos[nodeId].x,y:pos[nodeId].y});
	var element = document.getElementById(elementId);
	element.style.left = '' + (dom_coords.x - element.clientWidth/2 ) + 'px';
	element.style.top  = '' + (dom_coords.y - element.clientHeight/2) + 'px';
}	

initSizes('html2', 4);

var network = new vis.Network(container, data, options);


network.on("afterDrawing", function (ctx) {
  placeOverlay('html2', 4);
});