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

Posted on December 21, 2008. Filed under: ESRI, Google Maps |

Introduction
In the fourth post in our series on building a wildfire mashup with ArcGIS Server and Google Maps we will add in a tabular Dojo grid control to hold the residential structures destroyed in the Witch fire.  Each of these residential properties was also added as a Google Maps marker in our mashup application as detailed in our last post.   If you’re new to this series you may wish to consult our previous three posts in this series.

Section 4: Create Dojo Grid to Hold Properties
In addition to plotting each destroyed residential structure on the map as a marker as we did in our last post we also want to insert the results into a tabular grid that will be displayed below the map.  We will use a Dojo grid to accomplish this.  As you may recall from previous lessons, the ArcGIS Server JavaScript API is built on top of Dojo.  Dojo also contains a number of user interface items that you can add to your application including a grid.

•    Open the GMaps_AGIS_Mashup.htm file found in the C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\lab folder.  You’ll need to refer back to the first post in this series for details on obtaining the files for this exercise along with directions on setting up the exercise.

•    Add a reference to the style sheets for Dojo.
Just below the line of code that serves as a pointer to the Google Maps API you will want to add the following lines which serve as references to the user interface components for Dojo.

•    Add references to the Dojo resources.  Just above the ‘initialize’ function add the following lines of code.

•    Towards the bottom of your file in the <html> section you will see a line of code that has been pre-written for you.  The line that you see below creates the structure for your Dojo grid.  Notice that we assign an id of ‘gridWidget’ to the grid.  We will use this identifier in the coming steps.

•    Now we’re going to create the Dojo grid object that will serve as the container for our residential properties.  Create a new function called ‘createGrid(dataForGrid)’.  This function will create a new Dojo grid using the data passed into the function in the form of the ‘dataForGrid’ parameter.  Add the following code block and then we’ll discuss what this function does.

The data that will be displayed in the grid is passed into the ‘createGrid’ function in the form of the ‘dataForGrid’ variable which is an array of data.  Inside the function a new grid is created with the dojo.grid.data.Table constructor which is passed the ‘dataForGrid’ variable.  This new grid is assigned to the variable ‘model’.  We then create a variable called ‘view1’ which contains the cell structure for the grid with individual cells being created for Address, City, State, Zip, Latitude, and Longitude.  These serve as the column names and the individual data for each property will be placed accordingly inside the grid.  Finally, we assign the view and model to ‘gridWidget’.

•    Next we need to populate the array of residential property data that will be passed into the ‘createGrid’ function that we just created.  Return to the ‘addMarkersFromXML’ function that you created in the last section.  Add the following line of code  somewhere before the line that creates a new instance of GXmlHttp.

This creates a new variable called ‘dataForGrid’ which will be an array of data.  Now, inside the ‘for’ loop add the following two lines of code just below the line ‘batch.push(marker)’.

The first line creates a new variable called ‘attValues’ which is an array containing the address, city, state, zip, latitude, and longitude for each record.  This data is then pushed into the ‘dataForGrid’ array that we created earlier.

•    Finally, we need to pass the ‘dataForGrid’ variable containing an array of all the residential properties into the ‘createGrid’ function that we created earlier.  Add the following line of code just below the line ‘mgr.refresh();’

•    View the current state of the application
Save your file, and point your web browser to http://localhost/lab/GMaps_AGIS_Mashup.htm

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 final post in this series we will add in the drive time polygons which will be created by clicking one of the addresses found in the Dojo grid.  These drive time polygons will be created by accessing a geoprocessing task provided through an ESRI sample server.

More Information
The next session of our “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” is scheduled for January 12th – February 13th.  You can register on our website or by contacting  eric at geospatialtraining.com.  See the full course syllabus.

Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: