1. Click and drag to spray labels on the screen.
2. Scroll with mouse to zoom in and out.

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.