Date: Fri, 29 Mar 2024 06:37:25 -0500 (CDT) Message-ID: <30592066.1544.1711712245419@wiki.ncsa.illinois.edu> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_1543_1722235143.1711712245418" ------=_Part_1543_1722235143.1711712245418 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 #9 &= nbsp; &nbs= p; &= nbsp; &nbs= p; FALL 2014
Creating Area Mashups<= /span>
Due: Monday, November = 24
We will be utilizing some of the code fr= om Chapter 14 of the Peterson text. You should have already downloaded that= code for the previous exercise.
A. A choropleth map ba= sed on flash flood events
Edit the code for Figure 14.23 (use file= 14_22_Nebraska_Choropleth_Map in th= e folder B-Areas) to solve the problem described below.
Assume that you wish to portray the numb= er of flash flood events for counties in Kansas. Ideally, we should standar= dize these data for choropleth mapping, but for simplicity we will map the = raw counts.
Rather than using the XML file for the N= ebraska data, these data are stored in the JSON file FlashEventsByCounty.js= on. You should download this file from Blackboard, open the file in Notepad= ++, and examine its contents. This is a special type of JSON file (PJSON, P= retty JSON) generated by ArcGIS from shapefiles. In this case, the counties= are known as =E2=80=9Cfeatures=E2=80=9D and the =E2=80=9Cfeatures=E2=80=9D= consist of =E2=80=9Cattributes=E2=80=9D and =E2=80=9Cgeometry=E2=80=9D. Wi= thin =E2=80=9Cattributes=E2=80=9D, we are interested in the =E2=80=9CCount_= =E2=80=9D, which specifies the number of flashflood events for a county. Wi= thin =E2=80=9Cgeometry=E2=80=9D, the =E2=80=9Crings=E2=80=9D consist of poi= nts defining the bounds of each polygon.
1) Replace the title in the =E2=80=9Chea= d=E2=80=9D section with a title more relevant to the flash flood event topi= c.
2) Replace the line that uses the downlo= adxml.js file with one that uses the jquery file that we used in the earlie= r exercise for JSON files. Don=E2=80=99t forget to include the jquery file at = the same level as your html file.
3) Set the zoom level to 7 and center th= e map on 38,-98.
4) Replace the population data for Nebra= ska with the code that will access the JSON file for the flash flood events= . Here you will use a structure very similar to exercise #7. Rather than Ad= dCityCircles2Map, use a name that reflects you are adding counties to the m= ap (e.g. addCounties).
5) The addCounties function will be stru= ctured as follows:
a) Determine the =E2=80=9Clength=E2=80=9D of =E2=80=9Cfeat= ures=E2=80=9D within the JSON file.
b) Put the flashflood event counts in an array.
F= or a) and b), you did something very similar in exercise #7.
c) Call a function called CalculateOpacity that will retur= n the opacities for each county. You will pass
this function one argum= ent, an array of flashflood event counts.
d) You will do the foll= owing for each county
i) Get the Latitude and = Longitude for each point from the JSON file
var pts=3Djson.features[= i].geometry.rings[0];
ii) Construct a polygon = path array
var l= atLngs =3D new Array();
for (var k=3D0; k<pts= .length; k++) {
latLngs[k] =3D new google= .maps.LatLng(pts[k][1],pts[k][0]);
}
iii) Draw the polygon an= d shade it
Here you will use the co= de beginning with =E2=80=9Cvar polygon =3D new google.maps.Polygon=E2=80=9D= and
ending with polygon.set= Map(gmap). For =E2=80=9Cpaths:pts=E2=80=9D, replace =E2=80=9Cpts=E2=80=9D w= ith =E2=80=9ClatLngs=E2=80=9D. Specify a =E2=80=9CstrokeColor=E2=80=9D that= you deem appropriate, a =E2=80=9CstrokeOpacity=E2=80=9D of 1, a strokeWeig= ht=E2=80=9D of 1, and a =E2=80=9CfillColor=E2=80=9D that you deem appropria= te. Depending on how you have set up your loop for the counties, you may ha= ve to change the subscript for the opacities array.
Note that you will dele= te any code dealing with handling the XML file.
6. The CalculateOpacity function will co= nsist of the following code. Since we are providing this code, you need to = delete similar code that already appears in the program.
function CaculateOpacit= y(attValues) {
//Determine length of th= e attribute value array
v= ar n=3DattValues.length;
/= /Initialize min and max values
v= ar min=3DattValues[0];
var max=3Dat= tValues[0];
/= /Compute min and max values
for (var i = =3D 0; i < n; i++) {
if (attValues[i] &l= t; min) { min=3DattValues[i] }
if (attValues[i] &g= t; max) { max=3DattValues[i] }
}
/= / Find the range of the data
v= ar range =3D max-min
/= / compute opacity values
v= ar opacities =3D new Array(n);
f= or (var i =3D 0; i < n; i++) {
opacities[i] =3D 1-= ((max - attValues[i]) / range);
}=
r= eturn opacities;
}
B. Creating a heat map= of flash flood events
Peterson=E2=80=99s book creates a heat m= ap based on tornadoes (see Figure 14.25 of the textbook). Instead we will c= reate a heat map of flash flood events. To accomplish this, we need to conv= ert an ESRI shapefile containing information about the flood events to a Go= ogle Fusion Table. To accomplish this, we will use the Shape Escape website= as follows:
1. Download the FlashFloodEventsInKansas= .zip file from Blackboard and store it with your other files for exercise #= 9.
2. If you don=E2=80=99t already have a G= oogle account, create one ( https://support.google.com/accounts/answer/27441?source=3Dgsearch= span> ).
3. Go to the Shape Escape website (shpes= cape.com).
4. Click =E2=80=9Cshp2fusiontables=E2=80= =9D.
5. Click =E2=80=9CContinue=E2=80=9D.
6. Log in to your Google account.=
7. Click on Browse and select the FlashF= loodEventsInKansas.zip file.
8. Click =E2=80=9CUpload=E2=80=9D.
9. When processing is complete, click on= the Fusion Table ID link.
10. Select =E2=80=9CFile=E2=80=9D and = =E2=80=9CShare=E2=80=9D. Change the access from Private to Public by clicki= ng =E2=80=9CChange=E2=80=9D.
11. Now copy the resulting Fusion Table = and paste it into the code for file = 14_24_Fusion_Table_Heatmap_Tornadoes (in the folder B-Areas).
The resulting code should look something= like the following:
// To view this table i= n a webpage, go to the following link: //https://www.google.com/fusiontable= s/DataSource?docid=3D1MYh7-//f3ipyGIkKEXfwfyvgg0woPyHNBvRrgJJA0T
//Create a heat map fr= om the Fusion Table
layer =3D new google.ma= ps.FusionTablesLayer('1MYh7-f3ipyGIkKEXfwfyvgg0woPyHNBvRrgJJA0T', { <= /span>
heatmap: true
});
layer.setMap(map);
You must replace the code '1MYh7-f3ipyGI= kKEXfwfyvgg0woPyHNBvRrgJJA0T' with the Fusion Table that you have created.<= /span>
Also modify the code so that the title r= eflects that you are working with flash flood events.
Create a folder for exercise 9 on the we= bhosting service. Load all files related to parts A and B into this folder.= Post the resulting URLs to the following Google Workshee= t . Hand in a har= d copy version of the two parts of the exercise.