Archive for November, 2008

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

Posted on November 24, 2008. Filed under: ESRI, GeoSpatial Training Services, Google Earth, Google Maps |

Introduction
In the last post we began a five part series detailing the construction of a wildfire mashup mapping application.   As you may recall, in the current session of our “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” course we are building a wildfire mashup application that combines various data sources and formats into a narrowly focused application built with the ArcGIS Server JavaScript Extension for the Google Maps API and the Google Maps API.  This simple application displays data for the San Diego Witch Fire which occurred in October, 2007.

In the second post in this series we will build 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 will be pulled from an ArcGIS Server instance hosted by ESRI.  We will access the USGS_FirePerimeterAlt_SoCal_2D map service provided by ESRI through a sample ArcGIS Server instance that displays the boundaries of recent major wildfires in Southern California.

If    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 2: Add the Witch Fire Perimeter
In this section you will access a dynamic map service provided by ESRI through an ArcGIS Server instance that displays the boundaries of recent major wildfires in Southern California.
<!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE <![endif]–><!–[if gte mso 9]> <![endif]–>

  • Examine the details of the USGS_FirePerimeterAlt_SoCal_2D map service.  Note: This service is no longer being supported by ESRI.  However, the concepts presented in this post are still quite valid.  Open a web browser and navigate to this address:  http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/USGS_FirePerimeterAlt_SoCal_2D/MapServerTake a few moments to familiarize yourself with this map service by viewing the data through Google Earth, ArcMap, or ArcGIS Explorer.  Simply click one of the links at the top of the page.  I recommend viewing the data in Google Earth.  You will need to adjust the transparency of the data layers in Google Earth to be able to see the underlying base map, but you should see the boundaries of major wildfire events.  One of these boundaries represents the San Diego Witch fire.
    Now return to the web page containing the details of the map service.  You will notice that this map service contains a single layer called ‘Recent Fire Perimeters’.  Click the link provided by this layer.  This is a polygon feature layer containing a number of attribute fields, and supports the ability to perform queries.  Take a few moments to examine the available fields.  In this step we will query the ‘Fire_Name” field to obtain only the Witch Fire boundary.
  • If necessary, open the GMaps_AGIS_Mashup.htm file that you used to build the initial map we created in the first post.
  • Add a reference to the JavaScript Extension for Google Maps as well as a reference to the ArcGIS Server JavaScript API. 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 two libraries.  It is necessary to include a reference to the ArcGIS Server JavaScript API because we are going to use some of the Dojo functionality included to build our grid that will display the properties.
  • Create variables to hold instances of QueryTask, Query, MapExtension, and GOverlay
    Just below the line where you created the gmap variable (var gmap = null) please add the following lines of code:
  • Create an instance of MapExtension
    The MapExtension class in the ArcGIS Server Google Maps Extension can be used to display the results of ArcGIS Server tasks such as queries that have been submitted to the server.  Inside the initialize function add the following lines of code just below the line ‘gmap.setCenter’.
  • Create a new instance of QueryTask that points to the ‘Recent Fire Perimeters’ layer in the USGS_FirePerimeterAlt_SoCal_2D map service that we examined.  Notice that you will need to refer to this layer through its index number which is 0.  As you probably already know, layers in an ArcGIS Server map service are zero based so the first, and in this case only, layer has an index number of 0.
  • Create a new instance of Query
    A Query object is used to set the parameters that will be used in your query.  These parameters are created as properties of a Query object and are passed into the QueryTask.execute method.  For now, we’ll simply create an instance of Query.  Its properties will be set later.
  • Double check you code to ensure that it appears as follows:
  • Create function to query the ‘Recent Fire Perimeters’ layer.
    For this application we only want to display boundaries of the Witch Fire so we are going to create a function that performs an attribute query on the layer.  Additionally, when we initially display the boundary we only want to do so if the perimeter of the fire area is contained within the extent of the view.  Therefore, we are going to be performing a combination attribute and spatial query.  This will give you some practice setting up and executing both attribute and spatial queries.Create a new function called ‘executeQueryFire()’ just below the initialize function as seen below.

    Capture the current map extent and save it to a variable called ‘bounds’.  This extent will be used as the input for your spatial query.

    Remove any overlay graphics that currently exist on the display.

    Set the input parameters of the query as follows:

    The ‘queryGeometry’ property is used to set the spatial feature used in the query which in this case is the current extent of the map as saved in the ‘bounds’ variable.  The ‘queryGeometry’ property is used in conjunction with the ‘spatialRelationship’ property to define the spatial query.  In this case we are using a ‘CONTAINS’ relationship which will essentially query the ‘Recent Fires Perimeter’ layer for all fire boundaries that are contained within the current map extent.  There are a number of other spatial relationships that you can use in addition to ‘CONTAINS’.  A full listing of the properties can be seen below.

    The ‘where’ property defines our attribute query to search for only features whose FIRE_NAME field contains a value of ‘Witch’.  So, the combination of our spatial query (find all polygon fire boundaries completed contained within the current map extent) and attribute query (find all fire boundaries with a fire name of Witch) are combined in this case.  We are also setting  the ‘returnGeometry’ property to true which indicates that the results of the query should return the geometric description of each feature so that they can be plotted as graphics on the map.  Finally, the ‘outFields’ property defines the fields from the layer that should be returned.  You can see the fields that have been returned in the figure below.

  • Execute the Query
    The last thing that we need to do in the ‘executeQueryFire’ function is execute the query.  As I mentioned earlier, the parameters defined using the properties on our Query object are used as input to the QueryTask.execute function.  Add the following line of code to the bottom of the ‘executeQueryFire’ function.

    Notice that we are passing in the ‘queryFire’ object which represents the input parameters of our query.  In addition, we are also setting the ‘asGeoXml’  option to true which will result in the results being returned as KML as opposed to a RecordSet.  Finally, we supply the name of the callback function which will run after the query has been executed.  This function also receives the results of the query.  In our case this function is simply called ‘callbackFire’.

  • Examine the ‘executeQueryFire’ function
    Please double check your function to see that it appears as follows:
  • Add the ‘callbackFire’ function
    Add the following code block just below the ‘executeQueryFire’ function.

    This function accepts the results of the query which is in a KML format in this case and plots the data to the map using MapExtension.addToMap.

  • Examine the button code that initiates the query
    Near the bottom of your file you will see the following code block which was pre-written for you.  The first button, called ‘Add Witch Fire’ initiates the query that we just defined.  The ‘onclick’ event of this button has a small snippet of code that called the ‘executeQueryFire’ function each time the button is clicked.
  • View the current state of the application
    Save your file, and point your web browser to the GMaps_AGIS_Mashup.htm file you’ve altered.
    You will need to Refresh the screen if your browser is already pointing to this address.  Click the ‘Add Witch Fire’ button and in a few seconds you should see the figure below.

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 12th.  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 1 of 5

Posted on November 17, 2008. Filed under: ESRI, GeoSpatial Training Services, Google Maps |

In the current session of our “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” course we are building a wildfire mashup application that combines various data sources and formats into a narrowly focused application built with ArcGIS Server and Google Maps.  This simple application displays data for the San Diego Witch Fire which occurred in October, 2007.  The Witch Fire was the largest California wildfire in 2007 and surpassed the 1970 Laguna Fire as the second-largest fire in California history.  It resulted in massive evacuations and the loss of several hundred homes.  Click here to read more about the Witch Fire.

In this application we will combine data from various sources to create a mashup that contains a number of functions that allow you to explore the data associated with this event.  Today we are starting a series of posts that detail the construction of this mashup application.  This is a fairly lengthy exercise so we have decided to break it up into multiple posts so that we can cover each section of the exercise in greater detail.
Here is a synopsis of the data sources that will be used in the application as well as the functionality that will be built.

Data Sources

  • Witch Fire perimeter from ESRI ArcGIS Server instance (Note 12/14/2009: ESRI no longer supports this service so some of the exercise steps you see in this series of article no longer works.  However, the concepts are still valid)
  • Destroyed residence data from an XML file containing addresses and geographic coordinates
  • Base map from Google Maps

Functionality

  • Google Maps navigation
  • Various map types (terrain, satellite, hybrid, regular map)
  • Turn Witch Fire perimeter on/off
  • Add destroyed residences as Google Maps markers
  • Add destroyed residences in Dojo grid
  • Display drive times from each residence using ArcGIS Server drive time geoprocessing task

Below you will see some screenshots of the final application.

Application Overview
For this application you will need to complete the five sections you see below.  In today’s post we will focus on the first section which is simply creating a Google Map with the terrain theme and zoomed to the general location of the fire.
1.    Create the Google Map with a terrain theme and zoom to general location of the Witch Fire
2.    Add the Witch Fire perimeter from ESRI’s ArcGIS Server instance
3.    Create Google Maps markers showing destroyed residential properties
4.    Create Dojo grid containing destroyed residences
5.    Create Drive Time functionality using ESRI Drive Time geoprocessing task for a residence that has been clicked

Getting Started – Download Data and Optionally Install Apache Web Server

If you’d like to build your own local version of the application you’ll need to download the data files used in this exercise.  In addition, you will need to have access to a web server such as Apache.  For the purposes of this application I’m going to assume that you’re using a locally installed version of Apache.  If you’re using another web server you’ll need to adjust your exercise accordingly.  After downloading the data please create a directory to hold the files.  If you’re using a locally installed copy of Apache it might be something like c:\Program Files\Apache Software Foundation\Apache2.2\htdocs\lab.  Adjust accordingly if you’re using a different web server.  Unzip the data files you downloaded to this directory.

Section 1: Create Google Maps with Terrain Theme
In this first step you will create a basic Google Map that is centered in the general area of the Witch Fire in Southern California.  The Google Map will be set to a terrain theme, but you will have the capability of switching to other themes such as satellite, hybrid, or a regular map.  If you’d like detailed information on the Google Maps API please consult our “Introduction to the Google Maps API” e-learning course.  Our “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” extensively covers programming the Google Maps API as well.

  • Navigate to the C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\lab folder that you created and open GMaps_AGIS_Mashup.htm in your favorite HTML or text editor.
  • Add a reference to Google Maps API
    Just below the <title>…</title> tag please add a reference to the Google Maps API as shown below.  Note: You will need to obtain your own Google Maps API key. You’ll need to insert your Google Maps API key after “key=”.  In my case the key is ‘CE6TE…….z1A’.
  • Create a new <script> tag as seen below
  • Create a variable to hold the Google Map just inside the new <script> tag as seen below
  • Inside the new <script> create a new JavaScript function called ‘initialize()’ as seen below.
  • Create the map and set parameters
    Inside the initialize function you’ll want to create your map, add map types, and set the current map type to terrain (physical) as seen in the code below.  The GMap2.setMapType(G_PHYSICAL_MAP) line is used to set the Google Map theme to a terrain style map that shows elevation contours.  Also, note that in the constructor for GMap2 that we are pointing to a <div> element called ‘gmap’ which has already been created for you.  The <div> tag serves as a container for our map.
    Now, we’ll add the map navigation controls and enable zooming through the scroll wheel on the mouse.

    Finally, set the current extent of the map to a geographic coordinate that displays the extent of the Witch Fire (33.106999, -116.928017) and zoom scale of 10.


    Your initialize function should now appears as follows:

  • Call the initialize function from body.onLoad event.  Look for the <body> tag in your file.  Alter the existing body so that it appears as follows:
    The body.onload event is triggered after the page body loads.  This event will call the ‘initialize’ function that you just created.  The body.onunload event calls ‘GUnload’ which removes Google Maps API objects from memory to prevent memory leaks.
  • View the current state of the application
    Save your file, and point your web browser to http://localhost/lab/GMaps_AGIS_Mashup.htmYou will need to Refresh the screen if your browser is already pointing to this address.  At this point your map should look like the figure below.

    In our next post we’ll access the USGS_FirePerimeterAlt_SoCal_2D map service provided by ESRI through a sample ArcGIS Server instance that displays the boundaries of recent major wildfires in Southern California.

    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 12th.  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 Web 2.0 Mapping Applications with ArcGIS Server and Google Maps

Posted on November 17, 2008. Filed under: ESRI, GeoSpatial Training Services, Google Maps |

Our new instructor guided course “Building Web 2.0 Mapping Applications with ArcGIS Server and Google Maps” has been a popular addition to our course offerings.

The second section of this course is slated for January 12th – February 12th, 2009.

We have 6 of the 15 seats remaining for this course, but it is filling up rapidly so reserve your space quickly.  Contact eric at geospatialtraining.com for more information.

Many of you have expressed an interest in the course, but don’t know exactly what to expect from an instructor guided Internet course.  So, we wanted to share a few samples of the materials provided in this course.  Click the links below to obtain a small sampling of the materials provided.

This is just a small sampling of what is provided in this course.  Additional details:

  • Approximately 400 pages of lecture material (bound hard-copies are also mailed to you so that you can take notes)
  • 15 exercises (like the one above) covering the Google Maps API, ArcGIS Server JavaScript API, and Integrating ArcGIS Server with Google Maps
  • Exercise solutions
  • Self-paced style.  Login and complete work at any time day or night and from any computer.
  • Audio and video lectures delivered in Flash format
  • Video software demonstrations where applicable
  • Weekly chat sessions with instructor
  • Same day reply to all emails sent to the instructor during the course
  • Discussion forum for interaction with other students

If you are employed with a government agency, non-profit, or educational institution you can save 15% off the regular price.

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