Archive for December, 2008

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

Posted on December 28, 2008. Filed under: Uncategorized |

Introduction
In the fifth and final installment of our series on building a wildfire mashup with ArcGIS Server and Google Maps we will access the Drive Time geoprocessing task provided on the ESRI Sample Server to create drive time polygons for an address that has been selected on the grid.  Please visit the other posts in this series to familiarize yourself with this series.

Post 1
Post 2
Post 3
Post 4

Section 5: Create Drive Time Polygons for Address
What we’re going to do in this final post is add drive time polygons to the map display when an address is clicked in the Dojo 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.

•    Examine the details of the CreateDriveTimePolygons geoprocessing service
Open a web browser and navigate to:  http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons

This geoprocessing task accepts an input location in the form of a recordset as well as a string that specifies drive times in minutes.  For example, the default drive times are “5 10 15”.  This is a string variable with each drive time separated by a space.  The maximum drive time is 15 minutes.

•    Create a new variable that points to the ESRI Drive Time Geoprocessing task
Add the following line of code to the bottom of the ‘initialize’ function

•    In this case we are going to want our drive time polygons to be calculated based on one of the addresses that has been clicked inside the grid.  Therefore, we need to set up a listener function on the Grid.onRowMouseDown event.  This event will pull the latitude and longitude coordinates from the row that was clicked, and create a new GMarker object using this data.  Finally, this marker will be passed into a new function that we’ll create called ‘getDriveTimePolys’ which will actually execute the geoprocessing task on ArcGIS Server.  Add the following code block inside the ‘createGrid’ function just below the ‘gridWidget.setStructure(layout);’ line.

From a previous lesson you should recognize that we use dojo.connect to register an event with a listener.  In this case we are registering the Grid.onRowMouseDown event to the function you see here.  Therefore, each time a user clicks a row in the grid, this function will be executed.  Inside this function the latitude and longitude coordinates are pulled from the current row and passed into the GLatLng constructor.  The new instance of GLatLng (‘point’) is then used in the constructor for GMarker.  Finally, the new instance of GMarker (‘marker’) is passed into the ‘getDriveTimePolys’ function.

•    Create the getDriveTimePolys function
Add the following function:

As I already mentioned, a new instance of GMarker is stored in the parameter ‘point’ which is passed into the ‘getDriveTimePolys’ function.  Inside this function we first use the MapExtension.removeFromMap method to remove any existing drive time polygons, and then we create two new variables to hold a both a featureset and a feature.  The feature object has a geometry which we set using the point which has been passed into the function.  This feature is then added to FeatureSet.features which contains an array of feature objects.  In this case we only have a single feature.  Next, we create a variable called ‘params’ which stores the input parameters that need to be passed into the drive times geoprocessing task.  You’ll notice that we are passing in the featureset that contains only our point as well as drive times of 1, 2, and 3 minutes.  The final step is to call the ‘execute’ method on our task, passing in the parameters, a flag indicating whether the results should be returned as KML (not in this case since we pass a value of false), and the name of the callback function (addResults) that will be executed when processing has completed.

•    Create the addResults function
Add the following function just below the ‘getDriveTimePolys’ function.  This function simply takes the result set that is returned by the geoprocessing task and adds it to the map using MapExtension.addToMap.

•    Create zoomAddress function
You may have noticed that in the ‘getDriveTimePolys’ function a function called ‘zoomAddress’ is called and the point that was created from the row in the table is passed into this function.  The ‘zoomAddress’ function simply recenter the map to this point and zooms in.  Add the following code just below the ‘addResults’ function.

•    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.  Finally, select a record from the grid that was created.  You should see a figure similar to the following:

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

.

Read Full Post | Make a Comment ( None so far )

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.

Read Full Post | Make a Comment ( None so far )

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

Posted on December 9, 2008. Filed under: Google Maps, ESRI, GeoSpatial Training Services |

Introduction
In 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 Properties
The 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.

 

• 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 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.

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.

Read Full Post | Make a Comment ( None so far )

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

Follow

Get every new post delivered to your Inbox.

Join 47 other followers