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


  • 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  See the full course syllabus.


Make a Comment

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

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

%d bloggers like this: