The next application, mapmediabase.html, recreates the first application, but uses a separate file for the content. You can easily make this one your own by changing the content. You need to obtain the latitude/longitude coordinates for your locations. To do so, you can use the mapspotlight.html application covered in the last chapter, you can use Google Maps directly, you can use Wolfram Alpha, or you can look them up in an atlas. A quick summary of the application follows:
1. init: Performs initialization, including the call to loadcontent.
2. loadcontent: Uses the variables, most significantly the precontent array included in the external script element, to create new markup for the media. It also invokes makemap.
3. makemap: Brings in the map and sets up event handling, including the call to checkit.
4. checkit: Compares the clicked location with the locations described in the content array. If one is close enough, then the associated media is shown and played.
5. dist: Computes the distance between two locations.
Table 5-4 outlines the functions in the second portal application. The function table describing the invoked/called by and calling relationships for the mapmediabase.html application is similar for all the applications.
Table 5-4. Functions in the Second Portal Application
Function Invoked/Called By Calls
init Invoked by action of the onLoad attribute in the <body> tag makemap makemap Invoked by init
checkit Invoked by addListener call in makemap dist
dist Invoked by checkit
loadcontent Invoked by init
Table 5-5 shows the code for the second portal application, named mapmediabase.html. Please look back at the “External Script File” section to see the code (all the variable declarations) for the contents of mediacontent.js.
Code Line Description
video {display:none; position:absolute; top: 60px;
right: 20px; }
Required to get video to be on the right
audio {display:none; position:absolute; top: 60px;
right: 20px;}
Required to get audio controls to be on the right
canvas {position:relative; top:60px}
#answer {position:relative; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;}
</style>
Bring in the specific content
<script type="text/javascript" charset="UTF-8">
Code Line Description
var videotext1 = "<video id=\"XXXX\" preload=\"auto\"
controls=\"controls\" width=\"400\"><source src=\"XXXX.mp4\"
type=\'video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"\'>";
The first dummy (template) text to be used to create markup for video element
var videotext2="<source src=\"XXXX.theora.ogv\"
type=\'video/ogg; codecs=\"theora, vorbis\"\'><source src=\"XXXX.webmvp8.webm\" type=\'video/webm; codec=\"vp8, vorbis\"\'>";
The second piece of dummy text to be used to create markup for video element
var videotext3="Your browser does not accept the video tag.</video>";
The third piece of dummy text to be used to create markup for video element
var audiotext1="<audio id=\"XXXX\" controls=\"controls\"
preload=\"preload\"><source src=\"XXXX.ogg\"
type=\"audio/ogg\" />";
The first piece of dummy text to be used to create markup for audio element
var audiotext2="<source src=\"XXXX.mp3\" type=\"audio/mpeg\"
/><source src=\"XXXX.wav\" type=\"audio/wav\" /></audio>";
The second piece of dummy text to be used to create markup for audio element
function init() {
ctx = document.getElementById("canvas").getContext('2d');
answer = document.getElementById("answer");
loadcontent(); Invoke loadcontent to perform the rest of the initialization
}
function loadcontent() { Header for loadcontent
function
name because slot in inner array is overwritten for (var i=0;i<precontent.length;i++) { Iterate over the precontent
items
content.push(precontent[i]); Add the item (itself an array) to the content array
Code Line Description name = precontent[i][4]; Extract the name
switch (precontent[i][3]) { Switch over the different types (video, picture, pictureaudio)
case "video": For the video case
divelement= document.createElement("div"); Create a new container div
divelement.style = "float: right;width:30%;"; Style it to float to the right (though this does not work in all browsers)
videomarkup = videotext1+videotext2+videotext3; Create the whole HTML markup for video elements videomarkup = videomarkup.replace(/XXXX/g,name); Change XXXX to the name given
in precontent
divelement.innerHTML = videomarkup; Set the constructed text to be the HTML within the div document.body.appendChild(divelement); Add the div to the body
videoelementreference = document.getElementById(name); Obtain a reference to the created video element
content[i][4] = videoelementreference; Put this value into the content array
break; Leave switch
case "pictureaudio": For the pictureaudio case
divelement = document.createElement("div"); Create a new container div
divelement.style = "float: right;width:30%;"; Style it to float to the right (though this does not work in all browsers)
audiomarkup = audiotext1+audiotext2; Create the whole HTML
markup for audio elements
audiomarkup = audiomarkup.replace(/XXXX/g,name); Change the XXXX to the name given in precontent
divelement.innerHTML = audiomarkup; Set the constructed text to be the HTML within the div document.body.appendChild(divelement); Add the div to the body
audioreference = document.getElementById(name); Obtain a reference to the created audio element
savedimagefilename = content[i][5]; Save the file name
content[i][5] = audioreference; Overwrite that position to be
the reference to the audio
imageobj = new Image(); Create a new Image object
imageobj.src= savedimagefilename; Set its src to be the file name
content[i][4] = imageobj; Set the content item to be the
Image object
break; Leave the switch
case "picture": In the case of picture
imageobj = new Image(); Create a new Image object
imageobj.src= precontent[i][4]; Set its src to be the file name
content[i][4] = imageobj; Set the content item to be the
Image object
break; Leave the switch (not strictly
necessary, because it is the last one, but leave in just in case new media types are added)
} Close switch
} Close for loop
} Close loadcontent function
Code Line Description
var xmarker = "x1.png"; Image for marker on map
function makemap(mylat,mylong) {
var marker;
blatlng = new google.maps.LatLng(mylat,mylong);
myOptions = {
zoom: zoomlevel, Pick up this value from the
external file
center: blatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("place"), myOptions);
marker = new google.maps.Marker({
position: blatlng,
title: "center",
icon: xmarker,
map: map });
listener = google.maps.event.addListener(map, 'click', function(event) {
checkit(event.latLng);
});
}
function checkit(clatlng) {
var i;
var latlnga =new
google.maps.LatLng(content[0][0],content[0][1]);
var bestyet = 0;
var closestdistance = dist(clatlng,latlnga);
var distance;
for (i=1;i<content.length;i++) {
latlnga = new
google.maps.LatLng(content[i][0],content[i][1]);
distance = dist(clatlng,latlnga);
if (distance < closestdistance) {
closestdistance = distance;
bestyet = i;
}
}
distance = Math.floor((closestdistance+.005)*100)/100;
if (distance<maxdistance) {
marker = new google.maps.Marker({
position: clatlng,
title: content[bestyet][2], icon: xmarker,
map: map });
if (v != undefined) {
v.pause();
v.style.display = "none";
Code Line Description }
if (audioel != undefined) {
audioel.pause();
audioel.style.display = "none";
}
switch (content[bestyet][3]) {
case "video":
answer.innerHTML=content[bestyet][2];
ctx.clearRect(0,0,300,300);
v = content[bestyet][4];
v.style.display="block";
v.currentTime = 0;
v.play();
break;
case "picture":
case "pictureaudio":
answer.innerHTML=content[bestyet][2];
ctx.clearRect(0,0,300,300);
ctx.drawImage(content[bestyet][4],10,10);
if (content[bestyet][3]=="picture") {
break;}
else {
audioel = content[bestyet][5];
audioel.style.display="block";
audioel.currentTime = 0;
audioel.play();
break;
}
}
}
else {
answer.innerHTML= "Not close enough to any [new] target.";
}
}
function dist(point1, point2) {
var R = 6371; // km
// var R = 3959; // miles
var lat1 = point1.lat()*Math.PI/180;
var lat2 = point2.lat()*Math.PI/180 ;
var lon1 = point1.lng()*Math.PI/180;
var lon2 = point2.lng()*Math.PI/180;
var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) +
Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * R;
return d;
Code Line Description }
</script>
</head>
<body onLoad="init();">
<header id="header">Click on map.</header>
<div id="place" style="float: left;width:50%;
height:400px"></div>
<div style="float: right;width:30%;height:400px">
<div id="answer">Title will be placed here.</div>
<p> </p>
<canvas id="canvas" width="300" height="300" >
Your browser doesn't recognize canvas
</canvas>
</div>
</body>
</html>