I try to convert lat-lon values to pixels, I tried this excellent example, here the solution (converted to JS):
<div id="dz" style="background-image: url('algerie.png');height: 558px;width: 571px;background-size: contain;background-repeat: no-repeat;">
<p id="hey">0</p>
</div>
<script>
function placeDiv(x_pos, y_pos) {
var d = document.getElementById('hey');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';
}
var mapWidth = 571;
var mapHeight = 558;
var mapLonLeft = -8.66884;
var mapLonRight = 11.99733;
var mapLonDelta = mapLonRight - mapLonLeft;
var mapLatBottom = 18.96815;
var mapLatBottomDegree =mapLatBottom * Math.PI / 180;
function convertGeoToPixel(lat, lon)
{
x = (lon - mapLonLeft) * (mapWidth / mapLonDelta);
lat = lat * Math.PI / 180;
worldMapWidth = ((mapWidth / mapLonDelta) * 360) / (2 * Math.PI);
mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(mapLatBottomDegree)) / (1 - Math.sin(mapLatBottomDegree))));
y = mapHeight - ((worldMapWidth / 2 * Math.log((1 + Math.sin(lat)) / (1 - Math.sin(lat)))) - mapOffsetY);
return placeDiv(x, y);
}
</script>
But I dont get accurate values; if I test this:
I get:
As you can see, the marker (I use a simple number) was out.
Update: By the way, I used MOBAC to get the further extreme point (the image is just illustrative, because the point, I got it with the highest zoom to get good precision)
