flex 101 building an operational common operating...
TRANSCRIPT
Flex 101 Building an Operational
Common Operating Picture -
with Esri ArcGIS Viewer for Flex 2.5
© G&H International Services, Incorporated. All rights reserved under the copyright laws of the United States.
www.ghinternational.com
Introduction
O Time 1:30-4:30
O Introductions
O Logistics
O Breaks
O Cell Phones on Mute
Agenda O 1:30 – 1:45 Introductions
O 1:45 – 2:00 Step 1: Download and Prepare Resources
O 2:00 – 2:30 Step 2: Designing your website Tab and Metadata O Part 1: Create a favicon
O Part 2: Change the website tab text
O 2:30 – 3:30 Step 3: Working with the Configuration File
O 3:30 – 4:30 Virtual USA
Workshop Objectives
O Understanding emergency operations
O Introduce ArcGIS Viewer For Flex
O Create an out-of-the-box GIS web application in a non-development environment.
O Expand capabilities of existing widgets
O Explore Scientific Data from NWS and USGS.
O Consolidation of the operational view
Why ArcGIS Viewer for Flex?
O Esri ‘easy to configure’ Pre-built Viewer
O a.k.a Sample viewer
O Configurable inside or outside of a development environment
O Strong development community
O Accessibility, Widgets, Help documentation
O Sustainable
O Stable
O Minimal Maintenance
O Time Saver
Before you get started
O IIS Installed – Not in this tutorial
O Zip Extractor
O Esri Global Account
O https://webaccounts.esri.com/CAS/index.cfm?fa=gate
way&lg=en
Important Links
O ArcGIS Viewer for Flex Resource Center O http://help.arcgis.com/en/webapps/flexviewer/
O http://help.arcgis.com/en/webapi/flex/index.html
O DS2011: Introduction to ArcGIS API for Flex O http://resources.arcgis.com/gallery/video/arcgis-
api-for-flex/details?entryID=DB5DC853-1422-2418-7F18-05915CBE1B70.
O ArcGIS Viewer for Flex: A Quick Introduction O http://resources.arcgis.com/gallery/video/arcgis-
server/details?entryID=65D30C0E-1422-2418-7F6F-52EBCEC0E676
DS2011: Introduction to ArcGIS API for Flex
ArcGIS Viewer for Flex: A Quick Introduction
Step 1: Download and Prepare Your Resources
O Download and Install NotePad++
O Download compiled ArcGIS Viewer for Flex version 2.5.
O Viewer hands on
O Save file
O Unzip file
O Open the viewer in a browser
ArcGIS Viewer for Flex Resource Center
O Go to resource Center
O Download the 2.5
released version.
O Save to your workspace
Viewer Hands On
Step 2: Designing Your Website Tab and Metadata. O Configure the index.html ** website tab
O Create and implement the favicon
O Configure the title and metadata
Step 2, Part 1. Create a favicon. O Go to the following website, http://www.favicon.cc/
O Add the following text above the <title> tag in the index.html file.
O <link rel="shortcut icon" ref="assets/images/DHS.ico" />
1
4
3 2
6 5
Step 2, Part 2. Change the website tab text.
O Change the <title> text tag
O Change the <meta name …> text tags
O Do not forget to take credit for your work.
Step 3: Working with the Configuration file overview.
O Part 1: O Website Navigation O Spatial reference O Geometry Service O Bing Key O UI Element
O Part 2: O Title, subtitle and
logo
O Part 3: O Style
O Part 4: O Map Extent
O Part 5: O Layers
O Scenario Objectives O Basemaps O Operational Layers
O Part 7: O Popups
O Search Widget (bonus round)
Website Navigation
Spatial Reference
O Your first Basemap sets the spatial reference.
O Esri basemaps use the spatial reference identifier (SRID) number 3857 or 102100
O Adobe Flash builder does not allow for projection on the fly for cached layers.
O You can use cached imagery with a different projection, but it will not display with the Esri basemaps
Geometry Service
O Geometry service. If you are not publishing your own services, then keep this as the default. If you are publishing your own services, more information about creating a geometry service can be found at the following URL
O http://help.arcgis.com/en/arcgisserver/10.0/help/arcgis_server_dotnet_help/index.html#//009300000027000000
Bing Key O Bing Key. If you are not publishing your own
services, then keep this as the default. If you are publishing your own services. More information can be found about Bing Keys at the following URL
O http://help.arcgis.com/en/arcgisserver/10.0/help/arcgis_server_dotnet_help/index.html#//00930000008m000000
O The BING Key can be found in ArcGIS Server Manager > Services > Settings > View Bing Maps Key > Enter your username and password
User Interface (UI) Elements
O UI Elements. Keep these elements at default. You may wish to add things later once you feel more comfortable with Flex.
O Navigation
O Overview
O MapSwitcher
O HeaderController
Step 3, Part 2: Title, Subtitle and Logo
O Change the text of the Title, Subtitle and Logo. Make sure your logo is in the assets/images folder. You can use a .png or .jpg image.
Step 3, Part 3: Style O The style section displays the sites color
design. Below are a few examples.
Style Guidance
http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Setting_styles_for_the_Viewer/01m30000000s000000/
<!-- Purple --> <colors>0x000000,0x9966CC,0x333333,0x000000,0xD6AFFF</colors> <alpha>0.8</alpha> <!-- Black --> <colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors> <alpha>0.8</alpha> <!-- Green --> <colors>0x000000,0x2E8B57,0x333333,0x000000,0x9BCD9B</colors> <alpha>0.8</alpha> <!-- Blue --> <colors>0xCEE7F4,0x39628C,0x355D89,0x294867,0xCEE7F4</colors> <alpha>0.8</alpha> <!-- Lt Green --> <colors>0x000000,0x9CFCBC,0x333333,0x000000,0x000000</colors> <alpha>0.8</alpha>
Step 3, Part 4: Map Extent
O Sets your initial extent when you open the website.
Step 3, Part 5: Layers
O Basemap and Operational Layers are defined by tiled, dynamic, feature, bing, image, arcims, osm, wms, and kml data feeds. O http://help.arcgis.com/en/webapps/flexviewer/help/i
ndex.html#/Layer_tag/01m30000000p000000/
Scenario Objectives
O Be Ready for Operations!! O Need confirmation that an event has occurred O Provide predictive analysis that an event is
likely to occur O What are we postured to do right now? O Where are our assets? Personnel and Equipment
O Can we do this? YES O Proactive NOT Reactive Support O Plan for Operations O Automation and/or GeoEnable your data
Operations Disclaimer
O I am not a hydrologist.
O I am not a geologist
O I am not a meteorologist.
O I do not work for NWS, NOAA or USGS. I use their data. These data make my job easier.
O I am a Geographer; Geographic Information Science and Remote Sensing Technologies.
O I focus my work on how we can deliver scientific data into a common operating picture for Emergency Management Practitioners.
Basemaps O Defines the MapSwitcher
O Tiled services
Operational Layers O Operational layers can be tiled (cached), dynamic
or a feature through rest services.
O Popups can be created for any individual map services or layers.
Rest Services
Can be previewed in…
Cache: True or False
Spatial Reference Identifier (SRID)
Column name, Data type and Alias
Cache Levels
Rest Service Address
Spatial Reference Identifier (SRID)
Step 3, Part 7: Popups
O Pop-up windows are windows that provide information about features. Pop-up windows can include descriptive text, links, images, and charts.
O http://help.arcgis.com/en/webapi/flex/help/index.html#/Pop_up_windows/017p00000023000000/
National Weather Service O <layer label="National Weather Information" type="dynamic" visible="true" alpha="0.6"
url="http://maps.indiana.edu/ArcGIS/rest/services/Maps/Weather/MapServer"> <sublayer id="0" popupconfig="popups/PopUp_Weather_STORMREPORTS_IU.xml"/> <sublayer id="1" popupconfig="popups/PopUp_Weather_AHPS_IU.xml"/> <sublayer id="3" 0opupconfig="popups/PopUp_Weather_NWSWARNINGS_IU.xml"/> <sublayer id="4" popupconfig="popups/PopUp_Weather_THUNDERSTORMS_IU.xml"/> <sublayer id="5" popupconfig="popups/PopUp_Weather_FLASHFLOOD_IU.xml"/> </layer>
Advanced Hydrologic Prediction Service
Advanced Hydrologic Prediction Service (AHPS)
O <layer label="National Weather Information" type="dynamic" visible="true" alpha="0.6" url="http://maps.indiana.edu/ArcGIS/rest/services/Maps/Weather/MapServer"> <sublayer id="1" popupconfig="popups/PopUp_Weather_AHPS_IU.xml"/> </layer>
AHPS O http://water.weather.gov/ahps/
O <?xml version="1.0" ?> <configuration> <title>Stream Gauges</title> <fields> <field name="GaugeLID" alias="Guage" visible="true"/> <field name="Stage" alias="Stage" visible="true"/> <field name="Location" alias="Location" visible="true"/> <field name="Waterbody" alias="Waterbody" visible="true"/> <field name="Forecast" alias="Forecast 48hrs" visible="true"/> <field name="FcstTime" alias="Forecast Time" visible="true"/> <field name="URL" alias="Hydrograph" visible="true"/> </fields> <linkfield>URL</linkfield> </configuration>
USGS Real Time Incidents O <layer label="USGS Real-time Incidents" type="dynamic" visible="true" url="http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_haz/MapServer"> <sublayer id="0" popupconfig="popups/PopUp_USGSFloods.xml"/> <sublayer id="1" popupconfig="popups/PopUp_USGSVolcanoes.xml"/> <sublayer id="3" popupconfig="popups/PopUp_USGSEarthquakes.xml"/> <sublayer id="4" popupconfig="popups/PopUp_USGSHurricanes.xml"/> <sublayer id="5" popupconfig="popups/PopUp_USGSWildfires.xml"/> </layer>
USGS Earthquakes O <?xml version="1.0" ?>
<configuration> <title>Magnitude: {MAGNITUDE}</title> <description> <![CDATA[<b>Earthquake:</b> both sudden slip on a fault, and the resulting ground shaking and radiated seismic energy caused by the slip, or by volcanic or magmatic activity, or other sudden stress changes in the earth. <b>Location: </b>{TITLE} <b>Date/Time: </b>{TIME} <b>Magnitude: </b>{MAGNITUDE} <a href="{URL}" target="_blank">More Info...</a>]]> </description> <fields> <field name="TITLE"/> <field name="DATETIME"/> <field name="MAGNITUDE"/> <field name="URL"/> </fields> <linkfield>URL</linkfield> </configuration>
USGS ShakeMaps O <layer label="ShakeMap MMI" type="dynamic" visible="true" alpha="0.5“ url="http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_shakemaps/MapServer"> <sublayer id="0" popupconfig="popups/PopUp_ShakemapMMI.xml"/> </layer>
USGS ShakeMaps O <?xml version="1.0" ?>
<configuration> <title>Magnitude: {EVENTMAGNITUDE}</title> <description> <![CDATA[<b>ShakeMap</b> displays near-real-time maps of ground motion and shaking intensity and depth of a significant earthquakes. <b>Date/Time: </b>{EVENTDATE} <b>Gridcode: </b>{GRID_CODE} <b>PGA: </b>{PGAPOL_} <a href="{INFO_LINK}" target="_blank">More Info...</a>]]> </description> <fields> <field name="BASELAYER.BL_VECTOR.SHAKEMAPS_RAW.AREA"/> <field name="PGAPOL_"/> <field name="GRID_CODE"/> <field name="VALUE"/> <field name="EVENTMAGNITUDE"/> <field name="EVENTDATE"/> <field name="SEVERITY"/> <field name="LOCATION"/> </fields> <linkfield>INFO_LINK</linkfield> </configuration>
USGS Topo Maps O <layer label="USGS Topo Maps" type="dynamic" visible="false"
url="http://services.nationalmap.gov/ArcGIS/rest/services/US_Topo/MapServer/"> <sublayer id="0" popupconfig="popups/PopUp_USGSTOPO.xml"/>
</layer>
USGS Topo Maps O <?xml version="1.0" ?>
<configuration> <title>Index of Available Maps: {CELL_NAME}</title> <description> <![CDATA[<b>USGS US Topo</b> service from The National Map consists of footprints for the following <b>County:</b> {COUNTIES}<b>State:</b> {PRIMARY_STATE} <b>Date:</b> {FILE_NAME_DATE} <b>Image:</b><img src ="{BROWSE_GRAPHIC_URL}"/> ]]> </description> <fields> <field name="CELL_NAME"/> <field name="PRIMARY_STATE"/> <field name="COUNTIES"/> <field name="FILE_NAME_DATE"/> </fields> <linkfield>DOWNLOAD_SHORT_URL</linkfield> <image>BROWSE_GRAPHIC_URL</image> </configuration>
Widgets (Bonus Round) O Customize a Search Widget
O USGS 1:24,000 Topo Search Widget
USGS Topo Maps Download
O Search Widget
O USGS 1:24,000 Topo Maps
Bonus Round: USGS Topo Search Widget
O <?xml version="1.0" ?> <configuration> <layers> <layer> <name>USGS Topo Maps</name> <url>http://services.nationalmap.gov/ArcGIS/rest/services/US_Topo/MapServer/0</url> <expression>CELL_NAME = '[value]'</expression> <textsearchlabel>Use one of the graphical search tools to select and download Topo Map</textsearchlabel> <titlefield>CELL_NAME</titlefield> <linkfield>DOWNLOAD_URL_SHORT</linkfield> <fields all="false"> <field name="CELL_NAME"/> <field name="COUNTIES"/> <field name="DOWNLOAD_URL_SHORT"/> </fields> </layer> </layers> <zoomscale>5000</zoomscale> <info>widgets/InfoTemplates/InfoPopupWidget.swf</info> </configuration>
