1. Map Mashups for Better Visualization of Location-Based Trends (A Summary lecture) Kamyar Dezhgosha, Ph.D., IEEE member Associate Professor Department of Computer Science University of Illinois at Springfield

2. Map Mashup Map of world poverty by country, showing percent of population living on less than $1.25 per day in 2007-2008: http://en.wikipedia.org/wiki/List_of_countries_by_percentage_of_population_ living_in_poverty http://en.wikipedia.org/wiki/List_of_countries_by_percentage_of_population_ living_in_poverty

3. Map MashUp http://www.healthmap.org/enhttp://www.healthmap.org/en

4. Map Mashup Problem Maps have become a popular means of interpreting and demonstrating geophysical and location-based information Mashups, in the context of maps, refer to quick ways of combining and displaying relevant sources of data on a map in order to solve a problem or improve understanding through visualization World Wide Web (WWW) through web browsers easily provides access to all types of information and data including text, multimedia, and map mashups. Problem definition: 1.How to embed an interactive map in your web page? 2.How to combine and display statistical and spatial data on a map (map mashup) in your web page?

5. More on Map Mashup Problem Each pair of students in this project was assigned to create a web page with an embedded map mashup. This map mashup displays a map of U.S.A or world where regions identified by color-coding or markers representing relevant data for child poverty rates [1-3]. The poverty rate for each region is displayed when the user hovers over the region. Each team had the option to use a different application data such as forest loss and recovery, job loss rate, and spread of epidemic diseases.

6. Google Maps API Google MAPS API has solved the problem of how to add a map to your web site with similar map behavior that is found in maps.google.com –The principle behind it is that your web page downloads a JavaScript library for the Maps API that allows you use that API through scripts to create map objects on your web pages. –Each map object comes with a behavior that allows you to overlay geographical data and information clues on your map. –Also, it lets you interact with the map and with other third party web or data services to create new map mash-up applications. –One can think of it as a way of organizing location-based information on a map where it belongs.

7. Map Mashup Page & Google Servers

8. Methods for Solving the Problem Google Technology Options: –Instant maps (no programming) Google Wizard My Maps of maps.google.com –Google Maps API (JavaScript & XHTML programming) –Google Visualization API & Map-specific gadgets GeoMap Map HeatMap Google Spreadsheets Integration

9. Google Map Wizard Trade-offs You create a searchable map for your web site by following the three easy steps on the wizard page (see previous slide). Generates a piece of code that you can add to your own web page (without any programming). The generated map shows only a single marker, and you do not have control over the contents of the information window. The map has a Google AJAX Search API box and direction finding (in a new maps.google.com window)

10. Instant Map via My Maps

11. Instant My Maps via maps.google.com Trade-offs Easy to embed a maps.google.com in your web page. No JavaScript or programming knowledge is required. Dynamic content: the map shows the current results of loading my map file, or any searches, as opposed to the contents at time the map was embedded. Can add rich text and html (links to relevant web sites) to the information window for each marker. You may invite others for collaborative work on a shared map. The map can include map searches, get directions, My Maps, KML files, but not Mapplets. Inefficient for large number of markers as you have to manually rather programmatically add markers and their contents.

12. Embedded Map Mashup via Google Maps API

13. Embedding Maps via Google Maps API Trade-offs Require JavaScript knowledge & programming skills. Through the API, you could create an interactive map object, add controls, and overlay objects (markers & info window contents). You had to have a Google Maps API Key. Maps API includes a geocoding service. You could separate code and data through using XML or KML files for your data layers (overlays). Could use arrays to hold markers and their info window contents. Complete design flexibility You may embed mini-applications using 3 rd -party web services to bring about desired services and data.

14. Embedded Map Mashup using Visualization API: GeoMap

15. Trade-offs Using Google Visualization API: Geomap Gadget Need to download 3 libraries: Google AJAX API, Visualization API Core, and the Geomap Package. Geomap allows you display two data items: a number and a string (text) for each region on your map. –The number is used for color-coding the region proportionally. –Also, it is displayed along with the text when the user hovers over the region. Exposes a simple method to add your data values (region, number, text) to a datatable. Provides a simple method to draw your map. Easy to use Limited to the above functionality provided by Geomap

16. Google Maps API VS Google Visualization API: Geomap Design Trade-offs: –Design Flexibility VS Simplicity With Google Maps API, you have freedom of creating any map mashup. With Geomap, you can simply create your specific map mashup within functionality provided by Geomap. –More Programming Efforts and Skills VS Ease-of-development

17. Computer Science Concepts and Principles Learned Abstraction and High-level APIs for maps (GMap2(), etc.) and visualizations (Geomap) –Makes your programming easier, more productive, and relieves of irrelevant details. Classes and Objects –Attributes –Methods (Operations) Web APIs or web services such as Geocoding Events, Event handling, and listeners –Making a marker clickable for displaying information Principle of Separation of Code and Data –Overlays (such as markers and info window layers) –Datatable in Geomap –XML file for adding addresses to a map

18. Real-world Application of Map Mashup This project mapped children poverty rates for each state in the U.S.A onto a color-coded map. Smaller numbers (rates) are represented with a lighter color on the corresponding state while higher poverty rates are represented with darker green shades of color. –When a user’s mouse hovers over a state, an information window is displayed with the poverty rate information. Each team had the option to use a different application data such as forest loss/recovery, job loss rates, and spread of epidemic diseases. A couple of other real-world applications are as follows: 1.http://www.HealthMap.org/ (Map mashup for disease breakouts)http://www.HealthMap.org/ 2.http://na.unep.net/digital_atlas2/google.php (United nations’ Atlas of our changing environment)http://na.unep.net/digital_atlas2/google.php

19. Benefits of Map Mashups Web sites enhanced with suitable maps, or map mashups, have penetrated and benefited many aspects of our life and society: –From wireless map mashups for finding your location to job loss rates, child poverty rate, environment protection, spread of epidemic diseases, and forest loss/recovery. A map mashup on child poverty rate will bring awareness and understanding of the issue in a visual and effective way. –When shown on a heat or color-coded map, communities and geographical areas with high rate of child poverty will be outstanding. –Close-by hot spots may share support resources and collaborate on addressing root causes of the problem –Those hot spots of poverty could have hyperlinks to NGO’s or institutions that fight poverty

20. More on Map Mashups Benefits Location-based information are best shown on a map (what kind of map: Street map, Satellite, Terrain, Hybrid). Data visualization could add value, allow better understanding of information, and encourage discovery By composing or mashing up relevant location-based information, one could enhance the value of information, allow visual exploration/search, and bring new or better understanding of a problem. Also, It helps: –Reveal location-based trends (Spread of epidemics or Poverty) –Perform visual comparison (Population Density or Job Loss) –Visually track real-time changes (if there is real-time data feed) –Zoom in/zoom out for the right resolution or details (Forest loss)

21. Benefits to Society Depending on theme of the web presence and its map mashup, the society will benefit in general through: –Ease-of-use and ubiquitous access through browsers and smart phones (finding directions or new locations on the fly) –Raising awareness (Child Poverty rate, Forest loss/recovery) –Mobilizing the public to take action (Child Poverty rate, Environment protection) –Helping campaign in support of a cause such as Poverty (map nearby NGO’s, supporting organizations, schools, hospitals)

22. Conclusion Maps and Map mashups (displaying a mix of spatial and statistical data from local and external sources on a map) are being utilized as problem solvers (a custom view of information, pattern revealers for poverty, forest loss, etc.), raise public awareness through high-impact visual map mashup (disease breakouts, forest loss, etc.). As freshmen in computer science, you are now aware of Google Maps API’s power and potential for future innovative web applications. You as future computer science graduates will make a difference in many aspects of people’s life since computers and software programs are at work in everything around us.

23. References 1.Human Development Index (World Data): http://www.hdr.undp.org/en/media/HDI_2008_EN_Tables.pdf http://www.hdr.undp.org/en/media/HDI_2008_EN_Tables.pdf 2.Child Poverty Rates for States in U.S., http://www.childrensdefense.org/child-research-data- publications/data/state-data-repository/census/census-2007-child- poverty-data.pdf http://www.childrensdefense.org/child-research-data- publications/data/state-data-repository/census/census-2007-child- poverty-data.pdf 3.Child Poverty Rates for Cities in U.S., http://www.childrensdefense.org/child-research-data- publications/data/state-data-repository/census/census-2000-child- poverty-data-cities.txt http://www.childrensdefense.org/child-research-data- publications/data/state-data-repository/census/census-2000-child- poverty-data-cities.txt