Hi,
I am very much a js novice, and trying to follow a tutorial that plots markers on top of Ordnance Survey map. The code used works in part by loading the map, but the markers it loads from a locations_complete.xml file do not show, and no error message is generated.
The code and the xml file are in the same folder.
The bit that is working can be seen here:http://www.swaag.org/Workshop_OS/exercise_5_complete.html
The code knows the file name from line 62, and is loaded in line 153.
Any thoughts what is wrong? Thanks. The code and a small sample of the xml file data is shown below:
<html>
<head>
<!--the title to appear across the top of the webpage-->
<title>OS OpenSpace Tutorial</title>
<!--the code which tells the browser to pull in the OS OpenSpace JavaScripyt API-->
<script type= "text/javascript"src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=B7A899F4BDF8CDD1E0405F0ACA6050EF&v=0.8.0"></script>
</head>
<!--the javascript section-->
<script type="text/javascript">
//this function tells the different browsers how to parse an xml file and handle the xmlDoc variable
function parseXML()
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
}
}
//this defines a new variable called osMap
var osMap;
//this defines a variable osmarkers array used later
var osmarkers = [];
//this variable which is used as a counter used in the osmarkers variable and setting it to 0
var i = 0;
//this defines the init function
function init()
{
/*the osMap variable creates a new map object and passes it to the "map" element id,
the div element whose size we have set in the html body*/
osMap = new OpenSpace.Map('map');
/* Add the map control, changing Large for Small changes the type of control visible to include or
exclude the ladder in the zoom function*/
osMap.addControl(new OpenSpace.Control.LargeMapControl());
//this variable tells the browser to add in an overview map into the map window
var control = new OpenSpace.Control.OverviewMap();
osMap.addControl(control);
control.maximizeControl();
//setting the centre of the map and the zoom scale of the map when first opening, the lower the number the more zoomed out
osMap.setCenter(new OpenSpace.MapPoint (442900, 314600), 2);
//setting a variable "size" that will be used to determine the size of the info window when it opens
var size = new OpenLayers.Size(300, 300);
//defining the name of the xml file to read in
xmlDoc.async=false;
xmlDoc.load("locations_complete.xml");
//defining a variable side_bar_html that is used to populate the side bar navigation with the list of images in it
var side_bar_html = "";
// defining a variable isize that defines the size of the different icon being called into the map
var isize = new OpenLayers.Size(33, 45);
// defining a variable that sets the offset of the marker when it appears in the map window
var offset = new OpenLayers.Pixel(-isize.w / 2, -isize.h / 2);
/* tells the browser to read through the xml file and read each marker into a variable "x" and then asking
it to go from number 1 to the end of the file*/
var x=xmlDoc.getElementsByTagName("marker");
for (i=0;i<x.length;i++)
{
/*the following list is the variables from the xml file that are being read in, each one has a variable name
and in brackets the name of the field in the xml file that is being read in*/
var pos = new OpenSpace.MapPoint(x[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue, x[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue);
var names = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var county = x[i].getElementsByTagName("county")[0].childNodes[0].nodeValue;
var date = x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue;
var links = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
var label = x[i].getElementsByTagName("label")[0].childNodes[0].nodeValue;
var image = x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue;
var photo = x[i].getElementsByTagName("copyright")[0].childNodes[0].nodeValue;
var imagetype = x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue;
var icongif = x[i].getElementsByTagName("icongif")[0].childNodes[0].nodeValue;
//the variable below is pulling in the icongif, isize and offset variables defined above to define the icons on the map
var icon = new OpenSpace.Icon(icongif, isize, offset);
/*this is the start of the if else statement that tells the browser which variant of the content and contents variables
to use depending on the value of the image type variable. The indexOf function parses the xml file looking for all
entries that have the string image starting at any point greater than 0 (i.e. 1st, 2nd, 3rd character)*/
if (imagetype.indexOf('image') > 0)
{
/*the variable below is the html string that defines the layout of the information in the info window pulling all
of the variables defined above to populate the fields defined here WHEN A MARKER IS CLICKED ON IN THE MAP WINDOW.
For example the content below defines the text Name: in bold and then calls the "names" field to populate this from
the xml file. The two other contents variables below are for the cases of video and flash being called
from clicking points on the map*/
var content = "<font face='verdana' size='1'><b>Name: </b>" + names + "<br><b>County: </b>" + county + "<br><b>Date: </b>" + date + "<br><b>Photo: </b>" + photo + "<br><br><a href='" + links + "' target='_blank'>weblink</a><br><br><img src='" + image + "' width='200' height='150'></font>";
/*the variable below is the html string that defines the content and layout of the information in the info window pulling all
of the variables defined above to populate the fields defined here WHEN A MARKER IS CLICKED ON FROM THE SIDE BAR MENU.
For example the content below defines the text Name: in bold and then calls the "names" field to populate this from
the xml file. As this content is being called from JavaScript rather than from within the map window all the " symbols
have all been changed to " so that when reading through the file the browser does not assume that the " symbol is the
end of the string when it is not. The two other contents variables below are for the cases of video and flash being called
from the side bar menu*/
var contents = "<font face="verdana" size="1"><b>Name: </b>" + names + "<br><b>County: </b>" + county + "<br><b>Date: </b>" + date + "<br><b>Photo: </b>" + photo + "<br><br><a href="" + links + "" target="_blank">weblink</a><br><br><img src="" + image + "" width="200" height="150"></font>";
}
else if (imagetype.indexOf('video') > 0)
{
var content = "<font face='verdana' size='1'><b>Name: </b>" + names + "<br><b>Video: </b>" + photo + "<br><a href='" + links + "' target='_blank'>weblink</a></font><br><br><OBJECT id='mediaPlayer' width='160' height='185' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'><param name='" + image + "' value='" + image + "'><param name='animationatStart' value='true'><param name='transparentatStart' value='true'><param name='autoStart' value='true'><param name='showControls' value='true'><param name='loop' value='true'><EMBED type='application/x-mplayer2' pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' bgcolor='darkblue' showcontrols='true' showtracker='-1' showdisplay='0' showstatusbar='0' videoborder3d='-1' width='160' height='185' src='" + image + "' autostart='true' designtimesp='5311' loop='true'></EMBED></OBJECT>";
var contents = "<font face="verdana" size="1"><b>Name: </b>" + names + "<br><b>Video: </b>" + photo + "<br><a href="" + links + "" target="_blank">weblink</a></font><br><br><OBJECT id="mediaPlayer" width="160" height="185" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"><param name="" + image + "" value="" + image + ""><param name="animationatStart" value="true"><param name="transparentatStart" value="true"><param name="autoStart" value="true"><param name="showControls" value="true"><param name="loop" value="true"><EMBED type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" id="mediaPlayer" name="mediaPlayer" displaysize="4" autosize="-1" bgcolor="darkblue" showcontrols="true" showtracker="-1" showdisplay="0" showstatusbar="0" videoborder3d="-1" width="160" height="185" src="" + image + "" autostart="true" designtimesp="5311" loop="true"></EMBED></OBJECT>";
}
else
{
var content = "<font face='verdana' size='1'><b>Name: </b>" + names + "<br><b>Video: </b>" + photo + "<br><a href='" + links + "' target='_blank'>weblink</a></font><br><br><object width='200' height='162'><param name='movie' value='"+ image +"'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='"+ image +"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='200' height='162'></embed></object>";
var contents = "<font face="verdana" size="1"><b>Name: </b>" + names + "<br><b>Video: </b>" + photo + "<br><a href="" + links + "" target="_blank">weblink</a></font><br><br><object width="200" height="162"><param name="movie" value=""+ image +""></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=""+ image +"" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="162"></embed></object>";
}
/*this variable is pulling in the variables defined above for position, icon, info window content and info window size
to add them to the variable marker used below*/
var marker = osMap.createMarker(pos, icon, content, size);
/*this creates an array called osmarker and sets it to equal the marker set above*/
osmarkers[i] = marker;
/*this line is setting the function to list all of the "label" features in the side bar and then when they are clicked on
to open an info window populated with the "contents" variable defined above.*/
side_bar_html += '<a href="javascript:onclick=doOpenInfoWindow(osmarkers[' + i + '],\'' + contents + '\');">' + label + '</a><br>';
}
//this line is setting the HTML tag side_bar and setting the innerHTML to hold the information from the side_bar_html defined above
document.getElementById("side_bar").innerHTML = side_bar_html;
}
//this function is for when the info window is being opened from the sidebar menu and defining the content of the window
function doOpenInfoWindow(marker, content)
{
var size = new OpenLayers.Size(300,300);
osMap.openInfoWindow(marker.icon, marker.lonlat, content, size);
}
</script>
<!--in the body tag the onload function tells the browser to run the init and parseXML functions defined above in the JavaScript-->
<body bgcolor="#000000" text="#000000" onload="parseXML(); init();">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tr>
<td width="800" height="800" align="left">
<!--the map window div, the HTML element that will contain the map, here the width, height and any border is also set-->
<div id="map" style="width: 800px; height: 800px; border: 1px solid white;"></div>
</td>
<!--the side bar navigation window, setting the width, height, scroll function, border etc...-->
<td width = 190 valign="top" style="text-decoration: underline; color: #ff0000;">
<div style="font-family:Verdana,Arial,Helvetica,sans-serif;font-size:11px;width:190px;height:800px;overflow-y:auto;overflow-x:auto;border:1px solid black;" id="side_bar"></div>
</td>
</tr>
</table>
<p> </p>
</body>
</html>Small part of the xml code below:
<markers>
-<marker> <lat> 216700 </lat> <lng> 771200 </lng> <name> Ben Nevis Flythrough </name> <county> Highland </county> <date> Dec-99 </date> <copyright> © Crown Copyright </copyright> <link> http://www.ordnancesurvey.co.uk/oswebsite/freefun/flythroughs.html </link> <image> images/bennevis.wmv </image> <label> Ben Nevis </label> <type> video </type> <icongif> markers/marker_black.png </icongif> </marker> -<marker> <lat> 438650 </lat> <lng> 114750 </lng> <name> OS Select advert </name> <county> Ordnance Survey </county> <date> Summer-06 </date> <copyright> © Crown Copyright </copyright> <link> www.ordnancesurvey.co.uk </link> <image> http://www.youtube.com/v/deZxw7Vr5Jk&hl=en&fs=1 </image> <label> OS Select </label> <type> flash </type> <icongif> markers/marker_black.png </icongif> </marker> </markers>Many thanks for taking time to look at his for me. All the files are attached.
Stephen