Chapter 11 — Building a Community Site 219
‘<a href=”#” onClick=”movemap(‘ + index + ‘,’ + index + ‘);”>’ +
title +
‘
’;
markindex++;
}
The entity is then created and added to the array of entities that were added to the map. Then
a list of entities is shown in the information panel.
Loading Markers for a Type
Loading an entity parses the XML generated from the database, generates the markers, and
recenters and zooms the map:
function loadentity(index) {
First, the entity type is determined, and the HTML message panel is populated to show the
entity name:
message.innerHTML = types[index];
var entitytype = types[index];The icon for the entity type is generated. Entity types from the database are generally in title
case, so toLowerCase()is used on the type name to create a lowercase version of the image
URL that is used to build the icon:
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(32,32);
baseIcon.iconAnchor = new GPoint(0,32);
baseIcon.infoWindowAnchor = new GPoint(32,0);
baseIcon.image = “http://maps.mcslp.com/examples/” + ;
types[index].toLowerCase() + “.png”;
Now the XML is parsed to extract the relevant information. The basic XML format is the
same as before. In a nutshell, the markers are extracted by getting an array of all the XML tags
of type markerand then extracting the attributes. Info window contents are extracted as
XML using the same technique, and both pieces of data are used with the addmarker()
function:
infopanel.innerHTML = ‘’;
var points = [];
var request = GXmlHttp.create();
request.open(‘GET’,’/examples/ch11-03.cgi?m= ;
getmarkers&entity=’+types[index], true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlsource = request.responseXML;
var markerlist = ;
xmlsource.documentElement.getElementsByTagName(“marker”);
var infowindow = ;
xmlsource.documentElement.getElementsByTagName(“infowindow”);