Now plot dots on a google map has become easy, so I did another one, a google map of all of chicago park districts, based on the data available at http://www.chicagoparkdistricts.com.
The map is available at: http://www.codexd.info/googlemaps/chicagoparkdistricts.htm, xml data is listed at: http://www.codexd.info/googlemaps/data/parks.xml .
Please note: there are 328 parks in total, therefore loading the map takes a bit long. One of the drawbacks of using google maps.
Continuing with my google map exploration, I plotted out all elementary magnet schools (based on CPS website) on a google map. One thing different is that, instead of downloading a text file, the data that the map rests on is an xml file. And the code for parsing XML file is listed below. I also added a prettier information window.
function initialize() {if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(
new GLargeMapControl());map.addControl(new GMapTypeControl());
map.addControl(
new GMapTypeControl());map.setCenter(new GLatLng(41.940455,-87.667045), 10);
geocoder = new GClientGeocoder();
bounds =
new GLatLngBounds();baseIcon = new GIcon();
baseIcon.shadow =
"http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize = new GSize(16, 16);
baseIcon.shadowSize =
new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor =
new GPoint(9, 2);baseIcon.infoShadowAnchor = new GPoint(18, 25);
//load chicago school dataGDownloadUrl("data/chicagomagnetschools.xml", process_it);
}
else {alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
// === Define the function thats going to process the text file ===process_it = function(data, responseCode) {
// To ensure against HTTP errors that result in null or bad data,
// always check status code is equal to 200 before processing the dataif(responseCode == 200) { var xml = GXml.parse(data);
// === split the document into lines ===var schools = xml.documentElement.getElementsByTagName("school");
for (var i = 0; i <schools.length; i++) { var schoolname, img, url, address, address2, lat, lng, image;
var nodes=schools[i].childNodes;
// alert(node.length);for (var j=0; j < nodes.length; j++)
{
switch(nodes[j].tagName)
{
case "fullname":
schoolname=nodes[j].text;
break;case "img":
img=nodes[j].text;
break;case "url":
url=nodes[j].text;
break;case "address":
address=nodes[j].text;
break;case "address2":
address2=nodes[j].text;
break;case "lat":
lat=nodes[j].text;
break;case "lng":
lng=nodes[j].text;
break;case "image":
image=nodes[j].text;
break;
}
//
// var point = new GLatLng(parseFloat(lat),parseFloat(lng));
// map.addOverlay(new GMarker(point));
}
// alert(lats[i]);var point = new GLatLng(parseFloat(lat),parseFloat(lng)); var info="<div align=center><img src=" + img + "><br><a href=" + url + ">" + schoolname + "</a><br><br>" + address + "<br>" + address2+ "</div>";
// map.addOverlay(new GMarker(point));var marker=createMarker(point,image,info);
map.addOverlay(marker);
}
}
else if(responseCode == -1) { alert("Data request timed out. Please try later.");
}
else
{
alert("Request resulted in error. Check XML file is retrievable.");
}
}
function createMarker(point, image, info) {var icon = new GIcon(baseIcon);
icon.image = image;
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(info);
});
return marker;
}
The online map is availabe at here: http://www.codexd.info/googlemaps/chicagomagnetprograms.htm
The XML data file is availabe at here: http://www.codexd.info/googlemaps/data/chicagomagnetschools.xml
This week, I had to put aside my chicago-resource-google-mapping project aside, because I spent nearly all my time attacking a VB .NET application, a survey generator. Because my one-woman web team has to deal with more and more web survey requests, I finally decided to write an application to kill all surveys with one or two buttons clicks. I am almost done. In doing the application, I discovered (or merely confirmed) two convenient "truths' (probably only truth to me).
1) ASP is the way to go to deal with surveys, where there consists of a school of client interactions. Although ASP .NET has taken many steps to remedy its weakness in handling client-side tasks, it still lacks the flexibility of classic asp. To me it is convoluted that you have to call some class named clientscript and then register it to perform some client tasks like hide and show a layer.
2) Strongly typed dataset is a joy to use, kind of, if you have the aid of intellisense. However, code wise, it is sort of verbose, even though when accessing data members, you can directly access a field by its name. So instead of:
string s= (string) myDataSet.Tables["Customers"].Rows[0]["CustomerID"];
you can just code:
string s = myDataSet.Customers[0].CustomerID
However, the flip side of rigor is inflexibility
So I used my spare time to continue my exploration of Google Map API and my quest to map as many family-oriented resources/facilities in chicago as possible. Today I mapped out the swimming facilities provided by Chicago Park Districts. The data is downloaded from the Chicago Park District website.
And once we have the data, to make a dummy map is quite easy. The following is the map result:
And the interactive map is located at http://www.codexd.info/googlemaps/pools.htm
This map is a little less dummy than my first school map. First, it has made its customized icon, a door icon for an outdoor pool, and a house icon for indoors. The code for making customized icon marker is as below:
function CreateTypeMarker(point, stype, label, html)
{
var myIcon = new GIcon();
if(stype=="indoor")myIcon.image = "images/House.png";
else if(stype=="outdoor")myIcon.image = "images/Door.png";
myIcon.iconAnchor = new GPoint(16, 16);
myIcon.infoWindowAnchor =
new GPoint(16, 0);myIcon.iconSize = new GSize(20, 20);
myIcon.shadowSize =
new GSize(25, 25);
// Set up our GMarkerOptions object
markerOptions = { icon:myIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker,
"click", function() {marker.openInfoWindowHtml("<a href='" +html + "'>" + label + "</a></b>"+"<br>"+"<a href='" +html + "'>"+html+"</a></b>" );
});
return marker;
}
I also added an GOverviewMapControl at the bottom-right corner and a trafficinfo overlay using the following two lines of code.
map.addControl(
new GOverviewMapControl);
map.addOverlay(new GTrafficOverlay());
Easy. It looks good too.
However, I would like to have some legend information telling me more about the red, green traffic lines on the map. How to do that? Searched again, I could not find any clue.
Maybe next time?