Home > Uncategorized > Using HTML markup to display dynamic information

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!

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: