Date: Thu, 28 Mar 2024 12:33:10 -0500 (CDT) Message-ID: <339461711.1268.1711647190570@wiki.ncsa.illinois.edu> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_1267_709508115.1711647190569" ------=_Part_1267_709508115.1711647190569 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
GEOG 319/658 &nbs= p; &= nbsp; &nbs= p; Exercise #7 &= nbsp; &nbs= p; = FALL 2014
Handling Web-based Fil= e Formats and
Displaying Markers and= Graduated Symbols
Due: Monday, October 2= 7
Download the code for Chapter 12 of the = Peterson text from http://maps.unomaha.edu/cl= oud/code.html
In this exercise you will be learning ho= w to use two web-based file formats: XML and GeoJSON. In addition you will = learn how to display markers and circles representing metropolitan statisti= cal area (MSA) data in these formats.
A. Storing Data in Arr= ays and Displaying Markers Representing City Names and Population Values
Before working with the various file for= mats, we=E2=80=99ll simply store the data in arrays.
Edit the code for Figure 12.5 (use file<= /span> 12_05_Wayne_sites in the folder 12_0= 5_Points_in_Arrays) so that it accomplishes the following:
1. Center the map on the 48 contiguous U= nited States.
2. Set the zoom level to a value that wi= ll allow you to see just the 48 contiguous United States.
3. Using the table shown below, replace = the arrays for lats, longs, hovertitle, and htmlAll with arrays depicting t= he four columns shown in this table. The values for latitude and longitude = were determined using Google Geocoder.
City Name &= nbsp; &nbs= p; &= nbsp; &nbs= p; Population Latitude Longitude=
Chicago-Naperville-Elgin &nbs= p; &= nbsp; 9,461,105 41.87= 811 -87.62980
Dallas-Fort Worth-Arlington &= nbsp; &nbs= p; 6,426,214 32.78014 = -96.80045
Houston-The Woodlands-Surgar Land = 5,920,416 29.76019 -95.3693= 9
Los Angeles-Long Beach-Anaheim &nbs= p; 12,828,837 34.05223  = ; -118.24368
New York-Newark-Jersey City &= nbsp; 19,567,410  = ; 40.71278 -74.00594
Philadelphia-Camden-Wilmington &nbs= p; 5,965,343 39= .95233 -75.16379
Washington-Arlington-Alexandria &nb= sp; 5,636,232 3= 8.90719 -77.03687
4. Modify the marker section of the code= as follows:
a. Set up the loop so that it only handles the number of c= ities specified in the arrays.
b. Specify the title of the marker as a city name.<= /p>
c. Specify a contentString that concatenates the word Popu= lation
&nbs= p; with the actual populati= on.
d. Replace =E2=80=9Chtml: htmlAll[i]=E2=80=9D with =E2=80= =9CmyContent:contentString=E2=80=9D.
e. In the line =E2=80=9Cinfowindow.setContent(this.html)= =E2=80=9D, replace =E2=80=9Chtml=E2=80=9D with =E2=80=9CmyContent=E2=80=9D.=
5. Experiment with the program to make s= ure that it works.
a. When you hover over a marker, you should see the name o= f the associated MSA.
b. When you click on a marker, you should see the populati= on of the associated MSA.
6. Document and format all of your code.=
B. Storing the Data in= an XML File
Now we begin to experiment with storing = the data in an XML file. Download the SevenCities.xml file for this exercis= e from Blackboard. Open this file up in Notepad++ and examine its structure= .
Within the Scripts directory for Peterso= n=E2=80=99s code for chapter 12, you will see the file downloadxml.js. Copy= this file to the same directory where you will be editing code. This file = enables you to actually read the XML files. It will need to be copied to th= e web hosting service when you have finished your program.
Edit the code for Figure 12.6 (use 12_06= _Mapping_pts_from_XML_file) so that it accomplishes the following:= p>
1. Modify the function createMarker as f= ollows:
a. Change the third parameter so that it is a population v= alue (you might call it pop).
b. Change the contentString so that it concatenates the wo= rd Population
&nbs= p; with the actual populati= on.
2. Set the zoom level so that it is appr= opriate for the U.S.
3. Center the map on the U.S.
4. Change the line for var fileName so t= hat SevenCities is the xml file used.
5. Modify the following line of code so = that it deals with the city info in the XML file.
&nbs= p; var markers =3D xmlDoc.documentElement.getElementsByTagName(= "marker");
6. Modify the subsequent for loop so tha= t it handles the proper number of cities.
7. Within the body of this same for loop= , modify the code so that it fits the attributes shown in the SevenCities X= ML file.
8. Experiment with the program to make s= ure that it works. If you click on a marker, you should see the population = displayed. If you click on a city name in the upper right, you should see t= he population displayed for that city.
9. Document and format all of your code.=
C. Storing the Data in= a GeoJSON file
Download the SevenCities.json file for t= his exercise from Blackboard. Open this file up in Notepad++ and examine it= s structure.
Download the cityIcon.png file for this = exercise from Blackboard. We will use this icon to represent each metropoli= tan statistical area (MSA).
Be certain the file jquery-1.7.1.min.js = is at the same directory level as the code you will edit below. Note that t= his file also will need to be copied to your web hosting site when you have= wrapped up your program and are ready to distribute it.
Edit the code for Figure 12.7 (use 12_07_Mapping_pts_fr= om_JSON_file ) so that= it accomplishes the following:
1. Change the title to reflect the type = of data that we are dealing with.
2. Change the zoom level and center as w= e did above.
3. Change the file name for the json fil= e so that it matches our desired data file.
4. Within the function addLocation make = the following changes:
a. Modify the for loop so that it handles the proper numbe= r of cities.
b. Modify the body of the for loop so that it fits the att= ributes shown in the GeoJSON file. &= nbsp; &nb= sp; For example, the following line would handle the name attri= bute.
&nbs= p; &= nbsp; var name =3D json.Cities[i].name;
5. Replace the addLocation function with= the following code:
function addLocation(js= on) {
var n=3Djson.Cities.length;
for (var i =3D 0; i <n; i++) {
v= ar name =3D json.Cities[i].name;
v= ar pop =3D json.Cities[i].population;
v= ar location =3D new google.maps.LatLng(json.Cities[i].lat,json.Cities[i].lo= n);
a= ddMarker(gmap, name, pop, location)
&nbs= p; &= nbsp; &nbs= p; }
&nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; }
6. Replace the addMarker function with t= he following code. Note that we are using the cityIcon.png icon file to rep= resent cities. You may want to use a different icon.
function addMarker(gmap= , name, pop, location){
v= ar cityIcon =3D 'cityIcon.png';
v= ar marker =3D new google.maps.Marker({
position:location,=
map:= gmap,
icon= :cityIcon});
attachSecretMessage(marker, name, pop);
&nbs= p; }
7. Replace the attachSecretMessage= function with the following code:
function attachSecretMe= ssage(marker, name, pop){
v= ar infowindow =3D new google.maps.InfoWindow({
content: name + ': = '+ pop,
size: new google.ma= ps.Size(50,50)});
g= oogle.maps.event.addListener(marker,'click', function(){
i= nfowindow.open(gmap, marker);
}= );
&nbs= p; }
8. Experiment with the program to make s= ure that it works. When you click on a city icon, you should see the name o= f the associated MSA and population displayed.
9. Document and format all of your code.=
D. Displaying Graduate= d Circles Using GeoJSON
In this section we will start with the c= ode from exercise #5 and add code that will enable us to display circles re= presenting each MSA. Here we will assume that you wish to use a GeoJSON inp= ut file.
Load the code that you created for exerc= ise #5 into Notepad++. Save this code with a new name. Now edit the code as= follows:
1. Delete the code originally found in t= he body of your program.
2. Insert the following line of code in = the head section of your code; this indicates that you will use the JSON li= brary.
<script type=3D"text/javascript" src= =3D"jquery-1.7.1.min.js"></script>
3. Create a function that will draw a ci= rcle on the map. This function will have three arguments: the name of the o= bject representing the map, the name of the object representing the locatio= n, and the radius of the circle. You can use Peterson=E2=80=99s program 12_= 21_Circles_US_cities as a guide to what to include in the body of the funct= ion. Your function will return a drawn circle. Thus, your return statement = might look like the following:
return new google.maps.Circle(population= Options);
4. The rest of the body will be structur= ed as follows:
a. Create a map
Here you can use the ap= proach from Peterson=E2=80=99s 12_21 program where you specify the mapOptio= ns and create a map object. Remember that you also will need an associated = div element. You will not need to put this in the initialize function.
b. Get the city data from the JSON file
Here = you could use the code from the earlier GeoJSON example, but you will modif= y the name of the function call to indicate that you will AddCityCirclesToT= heMap.
&nbs= p;
&nbs= p; c. Create a function AddCityCirclesToTheMap whic= h does the following:
i= . Determine the number of cities.
i= i. Put the population values from the JSON file in an array.
iii.= Call the function you wrote for exercise #5 to determine the max populatio= n of values in the array from ii.
iv. = Specify a largest radius; we found that a value around 100,000 seemed about= right.
v. A= dd the circles to the map.
Here = you create a loop in which you go through each city to:
1) de= termine an object specifying the location for the city
2) compute the radius of the circle for that city (you call the function y= ou wrote in exercise 5 to compute a radius)
3) draw the circle (you call the function described in 3 above).
5. When done editing your program, test = it to make sure that it displays circles correctly.
6. Document and format all of your code.=
Create a folder for exercise 7 on the we= bhosting service. Load all files related to parts A, B, C, and D into this = folder. Post the resulting URLs to the following Google w= orksheet . Hand i= n a hard copy version for all four parts of the exercise. &nb= sp;