Building a Wildfire Mashup with ArcGIS Server and Google Maps – Post 3 of 5

IntroductionIn the second post in our series on building mashup applications with ArcGIS Server and Google Maps we built on what we accomplished in the first post by adding the polygon that defines the perimeter of the Witch fire to the Google Map that we developed in the first post. The perimeter of the Witch fire was pulled from the USGS_FirePerimeterAlt_SoCal_2D map service on an ArcGIS Server instance hosted by ESRI. In this, the third post in our series, we will add in the markers corresponding the residences that were burned in the Witch Fire.

If you’d like to construct your own instance of this application please feel free to do so. You’ll need to read the first post for details on where you can download the supporting files.

Completing Section 3: Create Google Maps Markers Showing Destroyed Residential PropertiesThe Witch Fire destroyed hundreds of residential structures in the area. In Section 3 we will display approximately 200 of these residential properties as markers on our map. The data for these properties has been stored in an XML file called WitchFireResidenceDestroyed.xml. This file is part of the download I mentioned in the first post. At the end of this post our application should appear as follows:

• Examine WitchFireResidenceDestroyed.xml
Open WitchFireResidenceDestroyed.xml in your favorite text editor. If you’re using a locally installed version of Apache and have installed the files as we suggested in post 1 this file can be found in the C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\lab folder. You should see the following:

This is just a basic XML file containing the address, city, state, zip, latitude, and longitude of each of the residential properties that were destroyed as a result of the fire. We are going to read this file using the GXmlHttp object found in the Google Maps API. Each address will be displayed on the map as a marker.

• Open the GMaps_AGIS_Mashup.htm file found in the C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\lab folder.

• In the button section of your file you will see a button called ‘Add Destroyed Homes’. The ‘onclick’ event for this button will called a JavaScript function called ‘addMarkersFromXML()’. We are going to create this function.

• Just below the ‘callbackFire’ function you created in the last section you will need to create a function called addMarkersFromXML().

• We are going to be adding a couple hundred markers to the map in this application. You can use the GMap2.addoverlay() method to add individual markers to the map. This method is fine when you are only adding a handful of markers to the map. However, in cases where you need to add a lot of markers at one time, this method will result in very poor performance of your application. In this step I’m going to introduce you to the Google Maps API MarkerManager class. The MarkerManager provides an efficient way to displays hundreds of markers on the same map, and also has the ability to specify the zoom levels at which markers should appear. MarkerManager is provided with the GMaps Utility Library which contains utilities that are not part of the core Google Maps API. So, since we’re adding a couple hundred markers to our map we’re going to take advantage of MarkerManager.

Add the following reference to the MarkerManager utility class near the top of your file where you defined references to the Google Maps API and the ArcGIS Server JavaScript Extension for Google Maps.

Inside the ‘addMarkersFromXML’ function that you created please create a variable called ‘batch’ which is an array and a variable called ‘mgr’ which will be an instance of MarkerManager. The ‘batch’ variable is an array that will hold all of the markers that we will add to the map.

• Read XML File with GXmlHttp
The GXmlHttp class which is part of the Google Maps API can be used to read XML files.

Create an instance of GXmlHttp and use it to open the WitchFireResidenceDestroyed.xml file

Once the ‘GXmlHttp.open ‘ function is called, a message is returned indicating the state of the open request. This information is found on the ‘onreadystatechange’ event which returns a ‘readyState’ code. A ‘readyState’ code of 4 indicates that the file has been successfully opened and is ready to be read. Please add the following code block to perform the ‘readyState’ check just below the lines you just added.

Now that our XML file has been successfully opened we need to loop through each fire found within the document. As you may have noticed when examining the WitchFireResidenceDestroyed.xml file each residential property is contained within a <fire> tag and has attributes indicating its address, city, state, zip, and latitude/longitude coordinates. Add the following lines of code to your ‘addMarkersFromXML ‘ function and then we’ll discuss what each lines does.

o The ‘request.responseXML’ line simply returns the XML contained within the file into a variable called ‘xmlDoc’. Essentially this variable contains the entire contents of our XML file in memory.

o Next, we get a list of all <fire> tags within our XML file through the use of the ‘getElementsByTagName(“fire”)’ function which stores each instance inside a variable called ‘markers’. The ‘markers’ variable simply contains a list of all residential properties.

o Now we need to loop through each <fire> tag and pull out the latitude and longitude coordinates which are then used to create a new marker. Our ‘for’ loop is used to loop through each property stored in the ‘markers’ variable.

o Inside the ‘for’ loop we create a new variable called ‘point’ which is an instance of GLatLng. As you may remember from our Google Maps API section a GMarker uses an instance of GLatLng to create the position where the marker is placed.

o We also created variables for latitude, longitude, addr, city, state, and zip and assign the appropriate values to each of these variables based on the data found in the XML file for each property. These values will be used in the next section when we display the data in a Dojo grid.

o Next we create a variable called ‘marker’ which is populated with an instance of GMarker produced by a function called ‘createMarker’. This ‘createMarker’ function will need to be created. Two parameters including an instance of GLatLng and the ‘addr’ variable containing the address of the property are passed into the ‘createMarker’ function. The
address will be used to populate the InfoWindow that is displayed when a marker is clicked.

o Finally, we add the instance of GMarker to our ‘batch’ array using the ‘push’ function.

• Add the markers to our MarkerManager instance
Outside the ‘for’ loop you will need to add the following two lines of code:

We use the ‘addMarkers’ function on MarkerManager to add the markers we placed into the ‘batch’ variable and finally issue the ‘refresh’ function on MarkerManager to display the markers.

• Recenter and the map and zoom in
Add the following line of code just below ‘mgr.refresh();’

• Double check the ‘addMarkersFromXML’ function to see that is constructed as follows:

• Create the ‘createMarker’ function
The ‘createMarker’ function is simply a helper function that we use to create instance of GMarker. This function takes an instance of GLatLng as well as the text/html that will be displayed in the InfoWindow of a GMarker when clicked. Add the following function below the ‘addMarkersFromXML’ function.

You will need to Refresh the screen if your browser is already pointing to this address. Click the ‘Add Witch Fire’ button and wait for the boundaries of the fire to be displayed. Then, click the ‘Add Destroyed Homes’ button. You should see the following figure:

In the upcoming fourth post in this series we will add in a Dojo grid to hold the tabular details of the residential data that has been plotted as markers on the map.