JSFiddle - React, Tailwind, and code Playground

HTML

<div style='position:relative' id='wrapper'>
    <img src='http://bestclipartblog.com/clipart-pics/earth-clip-art-3.jpg'>
</div>

CSS

.dot {
    height: 2px;
    width: 2px;
    position: absolute;
    border: 2px solid red;
    z-index: 10;
}

JavaScript

var str = 'gid=4&x=20y=30&x=40y=50&x=100y=100';
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = [];
for(var i = 0; i < data.length; i++)
{
    var tmp = data[i].split('=');
    if (tmp[0] == 'x')
        pointsX.push(tmp[1]);
    else
        pointsY.push(tmp[1]);
}
for(var i = 0; i < pointsX.length; i++)
{
    var div = document.createElement('div');
    div.className = 'dot';
    div.style.left = pointsX[i] + 'px';
    div.style.top = pointsY[i] + 'px';
    document.getElementById('wrapper').appendChild(div);
}