Using HTML markup to display dynamic information
I wanted to associate Longitude & Latitude values with HTML elements on a page, and then using this data, display the KM distance from the current location. Using JQuery, and omitting the HTML5 Geolocation code, this is what I came up with
<html>
<head>
<script src=”jquery-1.8.2.js”></script>
<script lanaguage=”javascript”>
$(init);
function init()
{
$(“.autoDistance”).each(function()
{
$(this).html(renderDistance($(this)));
}
);
}
function renderDistance(obj,position)
{
var a = {
Latitude:obj.attr(“latitude”),
Longitude:obj.attr(“longitude”)
};
var b = { latitude:55.1, longitude:-6.9}; // current location
var distance = Math.sqrt(Math.pow( 69.1 * (a.Latitude – b.latitude),2) +
Math.pow(53.0 * (a.Longitude – b.longitude),2)) * 1.609344;
return Math.round(distance) + ” KM”;
}
</script>
</head>
<body>
Waypoint 1: <div class=”autoDistance” latitude=”55″ longitude=”-7″></div>
<br>
Waypoint 2: <div class=”autoDistance” latitude=”10″ longitude=”-7″></div>
</body>
</html>
Hope this helps someone!
