const TAILLE_SPRITE = 32;

var places = document.getElementsByClassName('place');
var map = document.getElementById('map');
var origLat = map.getAttribute('data-orig-lat');
var origLon = map.getAttribute('data-orig-lon');
var radius = map.getAttribute('data-radius');

function computeLatDistanceInKm (dest, orig) {

	// Approximation française
	return ((dest - orig) * 111);
}

function computeLonDistanceInKm (dest, orig) {

	// Approximation française
	return ((dest - orig) * 79);
}

// Position places on map

for (place of places) {

	var placeLat = place.getAttribute("data-place-lat");
	var placeLon = place.getAttribute("data-place-lon");

	var latDistanceKm = computeLatDistanceInKm(placeLat, origLat);
	var lonDistanceKm = computeLonDistanceInKm(placeLon, origLon);

	var latDistancePcts = latDistanceKm / (2 * radius) * 100;
	var lonDistancePcts = lonDistanceKm / (2 * radius) * 100;

	var leftPcts = 50 + lonDistancePcts;
	var topPcts = 50 - latDistancePcts;

	var cssLeft = 'calc(' + leftPcts + '% - ' + (TAILLE_SPRITE / 2) + 'px)';
	var cssTop = 'calc(' + topPcts + '% - ' + (TAILLE_SPRITE / 2) + 'px)';

	place.style.left = cssLeft;
	place.style.top = cssTop;
}