# Examples See how easy it is to create heatmaps with heatmap.js

This example shows a realtime heatmap with click data, if you click on the surface to the right it will add the datapoint right after the click.
Click on the heatmap in order to create datapoints!

    <!DOCTYPE html>
    <html lang="en">
    ...
    <script type="text/javascript" src="heatmap.js"></script>
    <script type="text/javascript">
    window.onload = function(){

        // heatmap configuration
        var config = {
            element: document.getElementById("heatmapArea"),
            radius: 30,
            opacity: 50,
            legend: {
                position: 'br',
                title: 'Example Distribution'
            }
        };

        //creates and initializes the heatmap
        var heatmap = h337.create(config);

        document.getElementById("heatmapArea").onclick = function(e){
            // layerX and layerY is deprecated and will be removed,
            // use another way of determining the x and y position in an element
            heatmap.store.addDataPoint(e.layerX, e.layerY, 1);
        };
    };
    </script>
    </html>