Building A Wildfire Mashup With ArcGIS Server and Google Maps - Post 1 of 5 GeoChalkboard

Building a Wildfire Mashup with ArcGIS Server and Google Maps Post...
http://geochalkboard.wordpress.com/2008/11/17/building-a-wildfire-ma...
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.
1 of 7
05-Dec-12 5:54 PM
2 of 7
05-Dec-12 5:54 PM
Application Overview For this application you will need to complete the five sections you see below. In todays 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 ESRIs 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 youd like to build your own local version of the application youll 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 Im going to assume that youre using a locally installed version of Apache. If youre using another web server youll need to adjust your exercise accordingly. After downloading the data please create a directory to hold the files. If youre 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 youre using a different web server. Unzip the data files you downloaded to this directory. Section 1: Create Google Maps with Terrain Theme
3 of 7
05-Dec-12 5:54 PM
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 youd 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. Youll 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 youll 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, well add the map navigation controls and enable zooming through the scroll wheel on the mouse.
4 of 7
05-Dec-12 5:54 PM
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
5 of 7
05-Dec-12 5:54 PM
figure below. In our next post well 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.
6 of 7
05-Dec-12 5:54 PM
About these ads
Live the Bond Lifestyle
Be the first to like this.
Make a Comment
7 of 7
05-Dec-12 5:54 PM

Building A Wildfire Mashup With ArcGIS Server and Google Maps - Post 1 of 5 GeoChalkboard

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Building A Wildfire Mashup With ArcGIS Server and Google Maps - Post 1 of 5 GeoChalkboard

Uploaded by

Copyright:

Available Formats

Building a Wildfire Mashup with ArcGIS Server and Google Maps Post...

Create a new <script> tag as seen below

Your initialize function should now appears as follows:

About these ads

Live the Bond Lifestyle

Be the first to like this.

You might also like