Dynamic List

This example uses the jQuery based view control dynatree by Martin Wendt available at http://code.google.com/p/dynatree/ or wwWendt.de

The JSON file has title and child information. Each child is an array of titles:

[ {"title": "class year 1985", "isFolder":true, "children": [ {"title": "Alabama" , "children": [ {"title":"Tuscaloosa, AL" }, {"title":"Location 33.23,-87.62" }, {"title":"Region S" }, {"title":"Tier 3" }, {"title":"Count 5" }, {"title":"Size 2" }] }, ...

The JSON file is available here. The Universities and graduate counts XML file needed is available here.

The previous infowindow example can be enhanced with customized icons and the dynamic information display.

HTML and JavaScript for a server - try it here.

<html>

<head>

<title>Economist Map</title>

var xhr = false;

// issue AJAX request

function makeRequest(url) {

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }

else if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}

if (xhr) {

xhr.onreadystatechange = response;

xhr.open("GET", url, true);

xhr.send(null);

}

else document.write("ERROR - could not create XMLHttpRequest");

}

// process AJAX request when ready, expecting an XML document

function response() {

var xmldoc = '';

if (xhr.readyState == 4) {

if (xhr.status == 200 || xhr.status == 0) {xmldoc = xhr.responseXML; makeMarkers(xmldoc); }

else document.write("ERROR - " + xhr.status);

}

var map;

var infowindow;

function initialize() {

// Define the map

var myLatlng = new google.maps.LatLng(40, -90);

var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID };

map = new google.maps.Map(document.getElementById("center"), myOptions);

makeRequest("Schools1985.xml");

}

// Create the tree from the JSON file

$(function () {

$("#rightBar").dynatree({

title: "Test json",

rootvisible: true,

fx: { height: "toggle", duration: 200 },

initAjax: { url: "SchoolsTree1985.json"},

onActivate: function(dtnode) { $("#echoActive").text(dtnode.data.title); },

onLazyRead: function(dtnode){ dtnode.appendAjax({ url: "Schools1985.json" }); }

});

// Create markers from the data in the xml file

function makeMarkers(xmldoc) {

var markers=xmldoc.documentElement.getElementsByTagName("school");

for (var i = 0; i < markers.length; i++) {

var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),

parseFloat(markers[i].getAttribute("lng")));

var name = markers[i].getAttribute("name");

var address = markers[i].getAttribute("address");

var region = markers[i].getAttribute("region");

var tier = markers[i].getAttribute("tier");

var count = markers[i].getAttribute("count");

var size = markers[i].getAttribute("size");

if (count>0)

var marker = createMarker(latlng, name, address, tier, size, count);

}

function createMarker(latlng, name, address, tier, size, count) {

// Use custom icons

var pics = ["pics/icon10r.png","pics/icon10y.png","pics/icon10g.png","pics/icon10b.png"];

var picSize = size*5+15;

var pic = new google.maps.MarkerImage(pics[tier-1], new google.maps.Size(picSize, picSize),

new google.maps.Point(5,1), new google.maps.Point(picSize/2, picSize),

new google.maps.Size(picSize, picSize) );

var marker = new google.maps.Marker({position: latlng, map: map, title: '1985', icon: pic});

marker.setZIndex(5-size);

google.maps.event.addListener(marker,"click", function() {

if (infowindow) infowindow.close();

infowindow = new google.maps.InfoWindow({content:

'<div id="content">'+

'<div id="siteNotice">'+ '</div>'+

'<p id="firstHeading" class="firstHeading"><b>'+name+'</b></p>'+

'<div id="bodyContent">'+

'<p>'+address+'<br/> tier = '+tier+'<br/> 1985 graduates = ' + count+'<br/>'+'</p>'+

'</div>'+

'</div>'});

infowindow.open(map, marker);

});

return marker;

}

</script>

</head>

<div id="header"><h1>PhD Economist's Schools</h1></div>

<div>Selected <span id="echoActive"></span></div>

Stephanie Smullen, 2010

</div>

</body>

</html>

Page updated

Google Sites

Report abuse