LabelLayer
Fast on-the-fly HTML/CSS label placement with conflict detection. Labels will not overlap.
Conflict detection is greedy, based on label priority.
Why?
Style your labels using
everything that HTML/CSS has on offer.
Vanilla HTML/CSS is significantly more expressive than most libraries that use svg, HTML5-canvas, or WebGL.
Demo
Change label template here, and spray the results on the screen below.
API
//---------------------------------
//BASICS
//create LabelLayer
var layer = new LabelLayer(document.getElementById('nodeToPlaceLabelsIn'));
//creates a label
//returns a handle that can then be used for other operations
var labelHandle = layer.createLabel(
x, //x in pixels
y, //y in pixels
contents, //string of valid HTML contents
priority //higher means priority in placement
);
//add a label
layer.addLabel(labelHandle);
//move label to new position
layer.moveLabel(labelHandle, newX, newY);
//remove label that was added earlier
layer.removeLabel(labelHandle);
//add label that was removed earlier
layer.addLabel(labelHandle);
//ensure the LabelLayer instance fits the surrounding div
//call this on a resize of the surrounding node.
layer.resize();
//get the visible layers
var visibleLayer = layer.getVisibleLabels();
//destroy the layer
layer.destroy();
//---------------------------------
//ADVANCED
//create LabelLayer, but do not automatically paint the result
//use this if you manage your own paintloop
var layer = new LabelLayer(document.getElementById('nodeToPlaceLabelsIn'), {
autoPaint: false
});
//paint the current state of the labels
layer.paint();
Download
Download
LabelLayer.js. Include this script to add the
LabelLayer
constructor to the global object.
Find source code
here.