Need to mark points over a custom map which I have as image

Question

I have a hand drawn map and have to mark points on those map based on an item selected. To implement this, I thought that best would be to ensure that the size of the image is maintained and based on that coordinates of the points are decided and stored in a database. Now when a particular item is selected, I can get the respective coordinates from the database and can mark it on the page where the image will be in background and hence it will appear as the mark is on the image. Can you please tell me how I can create these markers on the image given the coordinates. Please do let me know or point me to some better ways of implementing this also.

Answer 1

Here is a demonstration concept. Once you have the coordinates of the point you want, you can create a marker point and position it with CSS. Of course, there's a lot more work to do such as validation, possible mapping of coordinate sets, etc.

http://jsfiddle.net/tonicboy/L87E5/

JS:

$('#plot_form').submit(function(ev) {
    ev.preventDefault();
    var map = $('#map_wrapper'),
        point = $('<div class="map-point"></div>'),
        x = $('#lon').val(),
        y = $('#lat').val();

    point.css({
        left: x + "px",
        top: y + "px"
    });
    point.appendTo(map);
});

$('#reset').click(function() {
    $('.map-point').remove();
    $('#lat').val('');
    $('#lon').val('');
});

Answer 2

Check this fiddle

HTML

<!-- Add database stored coordinates as value in textarea like below -->

<textarea id="coordinateVals">230|100,30|100,130|30,100|260</textarea>

In the above Coordinate values of points are seperated by " , " . X & Y of each point are seperated by " | " respectively

Javascript

var s=document.getElementById('coordinateVals').value;
var g=s.split(',');

var frag = document.createDocumentFragment(),
    element = 'div',
    clsName = 'sections';

for (var i=0; i<g.length; i++) {
    var box = document.createElement(element);
    box.className = clsName
    var coordinates = g[i].split("|");
    box.setAttribute('style','top:'+coordinates[0]+'px;left:'+coordinates[1]+'px;');
    // Append the child into the Fragment
    frag.appendChild(box);
}

// Finally, append the fragment into the real DOM
document.getElementsByTagName('body')[0].appendChild(frag.cloneNode(true));