The mapvideos application sets up the combination of Google Maps functionality with HTML5 coding for video, audio, and pictures on canvas. The canvas is not on top of the map. A quick summary of the application follows:
1. init: Performs initialization, including invoking makemap for bringing in the map. The init function constructs the content array using data constructed as references to elements in the body.
2. makemap: Brings in a map and sets up event handling, including the call to checkit.
played.
4. dist: Computes the distance between two locations.
Table 5-2 outlines the functions in the mapvideos project. The function table describing the invoked/called by and calling relationships is similar for all the applications.
Table 5-2. Functions in the Mapvideos Portal Project
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
Table 5-3 shows the code for the original portal application, mapvideos.html.
Table 5-3. Complete Code for the Mapvideos Portal Application
Code Line Description
<!DOCTYPE html> Doctype for HTML5
<html> html tag
<head> Head tag
<title>Clickable map </title> Complete title element
<meta charset="UTF-8"> Meta tag, standard for HTML5
<style> Style tag
header {font-family:Georgia,
"Times New Roman",serif;
Set styling for the header, a semantic element;
the font family makes Georgia the first choice, with Times New Roman a fallback, and the default serif the next fallback choice of fonts
font-size:20px; Fairly big font
display:block; Set line breaks before and afterward
} Close style directive
video {display:none; position:relative; } Style directive for video
audio {display:none; position:relative;} Style directive for audio; note that this is for the controls
</style> Closing style tag
<script type="text/javascript" charset="UTF-8"
src="http://maps.google.com/maps/api/js?sensor=
false"></script>
Script element bringing in Google Maps API
<script type="text/javascript" charset="UTF-8"> Starting script tag
var maxdistance = 5; Set maxdistance to be 5, a value I decided was appropriate; a click needed to be within 5 kilometers of one of the targets to be considered close enough
var listener; Placeholder for call of addListener
var map; Variable holding the current map
var myOptions; Variable for the associative array holding the
options for a call to the Map constructor
var ctx; Variable holding the context of the canvas
var blatlng; Variable holding the constructed
latitude/longitude object for the base location
var esther = new Image(); Variable holding an Image object
esther.src = "esther.jpg"; Set the src of this Image object to the file address
var aviva = new Image(); Variable holding an Image object
aviva.src = "avivadixon.jpg"; Set the src of this Image object to the file address
var vid1; Set in init to one of the video elements
var vid2; Set in init to one of the video elements
var content; Declared here as global variable; will be set in init
var answer; Will be set in init to reference a div in the body
var v; reference to current (last) video
var audioel; Reference to current (last) audio
var base= [41.04796,-73.70539,
"Purchase College/SUNY"];
Variable set to the base for my project
function init() { Function header for init
ctx =
document.getElementById("canvas").getContext('2d ');
Set ctx for use in drawing on canvas
makemap(base[0],base[1]); Invoke makemap
answer = document.getElementById("answer"); Set answer
vid1 = document.getElementById("maze"); Set vid1 for one of the video elements
vid2 = document.getElementById("fire"); Set vid2 for the other video element
aud1 = document.getElementById("mpiano"); Set aud1 for the audio element
content = [ Set the setting of the content array
[41.19991,-73.72353,"Esther at home","pictureaudio",esther,aud1],
Info for the Esther picture audio combination
[41.05079,-73.70448,"Lego robot
","video",vid1],
Info for the Lego robot video
[40.68992,-74.04460,"Fire works
","video",vid2],
Info for the Fireworks video
[41.8442,-89.480,"Aviva in Dixon","picture",aviva]
Info for the Aviva picture
]; End of content array
} Close init function
var xmarker = "x1.png"; Set file address for marker on the map
function makemap(mylat,mylong) { Header for makemap function; map to be centered (mylat,mylong)
var marker; Holds the constructed marker
blatlng = new google.maps.LatLng(mylat,mylong); Set the latitude/longitude object
myOptions = { Start to set up the options array
zoom: 13, Zoom set at constant, arrived at after
experimenting
center: blatlng, Center at blatlng
mapTypeId: google.maps.MapTypeId.ROADMAP Roadmap type
}; Close myOptions array
map = new
google.maps.Map(document.getElementById("place") , myOptions);
Invoke constructor to bring in the Google Maps
marker = new google.maps.Marker({
Set up event handling for clicking the map
checkit(event.latLng); The function checkit is invoked with the latLng attribute of the event as the parameter
}); Close call to bring in map
} Close makemap function
function checkit(clatlng) { Header for checkit function
var i; Used for indexing
google.maps.LatLng(content[0][0],content[0][1]); element of content
var bestyet = 0; Will point to the index determined to be the best (closest) so far
var closestdistance = dist(clatlng,latlnga);
Calculate distance to the first element
var distance; Used to hold distance
for (i=1;i<content.length;i++) { Set up iteration over content, starting at the second (index = 1) element
latlnga = new
Compare to the closest so far; if this one is less. . .
closestdistance = distance;
. . . then replace previous candidate for closest distance . . .
Set distance; note that formatting not needed at this stage; may choose to use in the future
if (v != undefined) { Check if there was a previous video
v.pause(); Pause it
v.style.display = "none"; Remove from display
} Close if previous video clause
if (audioel != undefined) { Check if previous audio
audioel.pause(); Pause it
Mark the target position on the map; note that this is the target location, not the click location
switch (content[bestyet][3]) { Determine what type of media this is
case "video": For video
answer.innerHTML=content[bestyet][2]; Display the title
v = content[bestyet][4]; Set v to be the video
v.style.display="block"; Make the video element visible (The previous setting of style.display was "none".”
v.currentTime = 0; Set the video time to zero to start playback at the beginning; this restarts the video, just in case it has starting playing before
v.play(); Play the video
Draw the image on the canvas
(content[bestyet][3]=="picture") {
break;} . . . leave the switch
else { Else (for the picture/audio combination)
audioel = content[bestyet][5]; Set audioel to be the audio element
audioel.style.display="block"; Display the audio—that is, the controls
audioel.currentTime = 0; Set time to zero
audioel.play(); Play the audio
break; Leave the switch
} Close the picture or pictureaudio clause
} Close the switch
} Close the if close enough clause
else { Else
answer.innerHTML="Not close enough to any [new] target";
Display message that click was not close enough to anything
} Close clause
} Close checkit function
function dist(point1, point2) { Header for dist-between-two-points function
var R = 6371; // km Factor used for kilometers (the radius of the earth)
// var R = 3959; // miles Comment in code; leave in just in case you want to switch to miles
var lat1 = point1.lat()*Math.PI/180; Change to radians
var lat2 = point2.lat()*Math.PI/180 ; Change to radians
var lon1 = point1.lng()*Math.PI/180; Change to radians
var lon2 = point2.lng()*Math.PI/180; Change to radians
var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) +
Math.cos(lat1)*Math.cos(lat2) * Math.cos(lon2-lon1)) * R;
Calculation based on spherical law of cosines
return d; Return result
} Close dist function
</script> Closing script tag
</head> Closing head tag
<body onLoad="init();"> Body tag, invoked init
<header id="header">Click on map.</header> Header for the page
<div id="place" style="float: left;width:60%;
height:400px"></div>
Set up div to float to the left; this will be the place for the map
<div style="float:
right;width:38%;height:400px">
Set up div to float to the right; it holds the answer and the media (video, audio, and canvas)
<div id="answer">Title will be placed here.</div>
Place for the titles (i.e., text about the location and the media)
Your browser does not accept the video tag. Standard text for noncompliant browsers
</video> Closing video tag
controls="controls">
<source src="sfire3.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
Possible source
<source src="sfire3.theora.ogv" type='video/ogg;
codecs="theora, vorbis"'>
Possible source
<source src="sfire3.webmvp8.webm"
type='video/webm; codec="vp8, vorbis"'>
Possible source
Your browser does not accept the video tag. Standard text for noncompliant browsers
</video> Closing video tag
<audio id="mpiano" controls="controls"
preload="preload">
Audio tag
<source src="estherT.ogg" type="audio/ogg" /> Possible source
<source src="estherT.mp3" type="audio/mpeg" /> Possible source
<source src="estherT.wav" type="audio/wav" /> Possible source
</audio> Closing tag
<canvas id="canvas" width="300" height="300" > Canvas tag
Your browser doesn't recognize canvas Standard text for noncompliant browsers
</canvas> Closing canvas tag
</div> Closes div that floated from the right
</body> Closing body tag
</html> Closing html tag