AK plot on map

by aaronk85

HTML

<div id="box"></div>
<ul>
    <p>Click a name</p>
    <li id="id-1" data-id="1">tom</li>
    <li id="id-2" data-id="2">jerry</li>
</ul>
<div id="result"></div>

CSS

#box {
    border: 1px solid #666666;
    /*display:none;*/
    height: 100px;
    width: 200px;
}
#box div {
    position: absolute;
}
ul {
    float:left;
}
#result, .item {
    float: left;
    width:100%;
}

JavaScript

$(document).on("click", "li", function (e) {
    /*
    var offset = $(this).offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);
    
    $(this).data('relativeX', relativeX);
    $(this).data('relativeY', relativeY);
    $(this).data('id');
    */
    $("#box").show();
});

$("#box").click(function (e) {
    var offset = $(this).offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);
    console.log(relativeX);
    console.log(relativeY);
    
    var $box = $("#result").empty();
    $('li').each(function (i, el) {

        $(this).data('relativeX', relativeX);
        $(this).data('relativeY', relativeY);
        $(this).data('id');
        var $li = $(el);
        var clickDate = $li.data('relativeX');
        var clickDate2 = $li.data('relativeY');
        var plotted = $li.data('id');
        /*
        var $div = $('<p />', {
            text: $li.text() + ' : ' + (clickDate || '') + ',' + (clickDate2 || '')
        });
   
        $box.append($div);
  */
        localStorage.setItem('x-' + plotted, clickDate);
        localStorage.setItem('y-' + plotted, clickDate2);
        addText(plotted, clickDate, clickDate2, "http://www-static.spulsecdn.net/images/red_house.gif");
        //console.log(plotted);
    });
});

function addText(txt, x, y, z) {
    $('<div id="' + txt + '">').css({
        left: x,
        top: y,
        height: '10px',
        width: '10px',
            'background': 'url(' + z + ') no-repeat scroll 0 0 transparent'
    }).appendTo('#box');
}