Скачать презентацию Going Beyond the Address Push-Pin Extending Advance Web Скачать презентацию Going Beyond the Address Push-Pin Extending Advance Web

7998048b21b88649dd57745e4d94235a.ppt

  • Количество слайдов: 36

Going Beyond the Address Push-Pin Extending Advance Web Lookups with Google Maps Presented by: Going Beyond the Address Push-Pin Extending Advance Web Lookups with Google Maps Presented by: Tom Jamate, University of Massachusetts, Amherst April 8, 2013 Session ID 2521 1

Introduction • In this presentation we will provide an overview and demonstrate the key Introduction • In this presentation we will provide an overview and demonstrate the key technical details of creating a Google map display from Advance Web Lookup results, hopefully enough to get your feet wet to try some of these techniques on your own. • This is one example of the increasing capability of the browser environment. Javascript, DOM, CSS and HTML 5 have become a powerful platform that can consume and present a variety of web services. • This enhancement is experimental and under revision. This is one approach, any number of variations are possible. Session ID 2521 2

Problem • • • Alumni and development operations need to quickly find key demographic Problem • • • Alumni and development operations need to quickly find key demographic clusters. Text-only reports do not easily lend themselves to this task. By integrating geographic visualizations to Advance Web lookups, users can easily create any number of specialized demographic views to help find Alumni ‘hotspots’, to assist with prospect trip planning or event planning. Session ID 2521 3

Enhancement benefit One example: Advance Web Lookup to find all School of Engineering alumni Enhancement benefit One example: Advance Web Lookup to find all School of Engineering alumni who graduated before 2002, gave at least $1000 and live in Florida. Session ID 2521 4

Agenda 1. Review of the Google map heatmap visualization library. The API is one Agenda 1. Review of the Google map heatmap visualization library. The API is one example of a rich web service that can be connected to any browser based application such as Advance Web. 2. Create an Advance Web form a container for the map to be rendered in, with a Javascript helper file. Review two methods of getting map data inside the form’s HTML-Javascript control. 3. A database stored procedure (Oracle, et, al) reads the lookup result table (temp_web_report_keys) and outputs the data as a string formatted as a JS data array. City or town longitude and latitude are pulled from the zip_city table. 4. Variations of a theme: the Circle ‘ratio’ map. 5. Review / Resources. Session ID 2521 5

Programming knowledge needed for this enhancement. 1. Client-side browser: Javascript, HTML 2. Oracle PL/SQL, Programming knowledge needed for this enhancement. 1. Client-side browser: Javascript, HTML 2. Oracle PL/SQL, the ability to create stored procedures. 3. ASP VB. Net (Visual Studio, or text editor). 4. Advance Config Utility web form designer. Session ID 2521 6

Overview • Google maps work within Advance Web through the Client-side Javascript layer. Here Overview • Google maps work within Advance Web through the Client-side Javascript layer. Here are the major players: Database (Oracle, et al) IIS Web Server Advance Web User’s web browser AW Web report form Store Procedure to query address, temp_web_report_key, zip_city (latitude, longitude). JS data Object Javascript API Call Rendered Map Session ID 2521 7 Google Maps API Server

Google map Heatmap visualization library. Session ID 2521 8 Google map Heatmap visualization library. Session ID 2521 8

What is a Heatmap? • A Heatmap is a data visualization technique that renders What is a Heatmap? • A Heatmap is a data visualization technique that renders the intensity and distribution of data points on a map. A color gradient is used to reflect the variation of point values, the higher the value, the ‘hotter’ the color used for the data point on the map. • Heatmaps serve as a good general reference to quickly reveal clusters or 'hotspots' for a given dataset: Clusters of top donors in Texas: Session ID 2521 9

What a Heatmap is not, or why cartographers hate Heatmaps. • Google Heatmaps are What a Heatmap is not, or why cartographers hate Heatmaps. • Google Heatmaps are not a substitute for sophisticated demographic analysis tools. Tools such as esri Arcmap can provide precise classifications and visual representations of demographic data. (See Choropleths, Isopleths and Jenks breaks) • The ability to use the Google map api to create Heatmaps and Circle-ratio maps is a step towards it becoming a serious GIS platform. A trend that will probably continue. Session ID 2521 10

The Google maps API • Google maps are created in the browser’s Javascript environment The Google maps API • Google maps are created in the browser’s Javascript environment and are rendered inside a

tag with a unique ID. • To display a map on an Advance Web form, the DIV tag needs to exist in an HTML control on the form. • The Google map API is called from within a
The map data object lives within a JS script tag. We’ll need to generate and place this data object on the page: var geo. Data [ {location: ]; Session ID 2521 = new google. maps. Lat. Lng(37. 782551, -122. 445368), weight: 6}, new google. maps. Lat. Lng(26. 8486, -80. 0588), weight: 6}, new google. maps. Lat. Lng(37. 783273, -122. 440324), weight: 3} 12

Creating the map, client-side javascript var map. Options = { zoom: 4, center: new Creating the map, client-side javascript var map. Options = { zoom: 4, center: new google. maps. Lat. Lng(39. 50, -98. 35), map. Type. Id: google. maps. Map. Type. Id. ROADMAP }; map = new google. maps. Map(document. get. Element. By. Id(‘map_canvas’), map. Options); // Create the map object. point. Array = new google. maps. MVCArray(geo. Data); heatmap = new google. maps. visualization. Heatmap. Layer({ data: point. Array }); // Create the heat map layer. heatmap. set. Map(map); Session ID 2521 13

Google map Heatmap example If you want to quickly get your feet wet, a Google map Heatmap example If you want to quickly get your feet wet, a great way to learn is to try out the demo code of a Google Heatmap example from on your workstation. A working Heatmap example can be found here: https: //google-developers. appspot. com/maps/ documentation/javascript/examples/layer-heatmap Session ID 2521 14

The Advance web-form map container. Session ID 2521 15 The Advance web-form map container. Session ID 2521 15

Two methods for pushing map-point data into web form. 1. Use the traditional Advance Two methods for pushing map-point data into web form. 1. Use the traditional Advance Web Data Command – Data Transaction referenced by a web form. Limited to varchar 2 output size. 2. Use a small custom Vb. Net aspx handler program to insert the data from a