1. GEOVISUALIZATION: VISUALIZE THAT ON A MAP Sarah G. Park April 14, 2016

2. INTRODUCTION

3. I am… Sarah G. Park Technology & Engineering Librarian at Southern Illinois State University Was Web Developer, Reference & Instruction Librarian for 12 years MLIS + M.S. in Applied Computer Science Interested in Library & Data Science A woodworker at heart

4. During the Session Basics of GeoVisualization Hands-on Experience GeoCoding - Extracting Geo-Information GeoJSON - Formatting Data Map Building with Google Maps JavaScript API Applications in Action

5. Remember K.I.S.S. Keep It Simple & Stupid Less Programming Programming vs. Free web services

6. Software Required Text Editor (Notepad, Notepad++, etc.) OpenRefine 2.6 http://openrefine.org/download.html Available in the USB drive Browser - Firefox

7. In the USB Drive Software (folder) OpenRefine (no installation needed) 0.GeoVisualization.PPTx Presentation File 1stMap 2ndMap.html 3rdMap.html 4thMap.html 5thMap.html Museums.geojson OpenRefineExample.XLSx OpenRefineSyntax.txt

8. BASICS OF GEOVISUALIZATION

9. What Is…? GeoVisualization = Map + Data Layer (CC: Marc Levin)

10. Map + Data Layer Map Canvas Data Locational Information Selected Data (vs. Raw Data) Presentation Visualization

11. Imagine…

12. Locational Information Coordinates: Latitude, Longitude, (Elevation)

13. GeoCoding A process of converting addresses to coordinates (Latitude and Longitude) Known GeoCoding Tools: Google Maps Geocoding API MapQuest GeoCoding Yahoo BOSS Geo Service Twofishes (Foursquare)

14. ACTION 1: GEOCODING Using OpenRefine

15. Start a OpenRefine Project Open OpenRefine In the USB Drive (Software folder) Create Project Choose Files: OpenRefineExample.xlsx Next Review 1 Head Row 10 Rows Create Project

16. Fetch I Address -> Edit column -> Add column by fetching URLs

17. Fetch II "http://maps.google.com/maps/api/geocode/json?sensor=f alse&address=" + escape(value, "url")

18. Fetch III Processing… Outcome…

19. Parse I Address -> Edit column -> Add column based on this column

20. Parse II with(value.parseJson().results[0].geometry.location, pair, pair.lat +", " + pair.lng)

21. Parse III Result

22. Split Data Split LatLong to Latitude and Longitude LatLong -> Edit column -> Split into several columns Separator,

23. Clean Up! Rename Column Names Edit column -> Rename this column LatLong1 -> Latitude LatLong2 -> Longitude Delete by-product columns Fetched Edit column -> Remove this column

24. Other Resources Google Refine 2.0 (Introduction) https://www.youtube.com/watch?v=yNccGtn3Wb0 Using OpenRefine to geocode your data with Google and OpenStreetMap API https://opensas.wordpress.com/2013/06/30/using-openrefine-to- geocode-your-data-using-google-and-openstreetmap-api/ https://opensas.wordpress.com/2013/06/30/using-openrefine-to- geocode-your-data-using-google-and-openstreetmap-api/ Google Maps Geocoding API https://developers.google.com/maps/documentation/geocoding/int ro#Geocoding https://developers.google.com/maps/documentation/geocoding/int ro#Geocoding

25. ACTION II: GEOJSON Formatting Data

26. What Is…? GeoJSON - “A format for encoding a variety of geographic data structures.”

27. GeoJSON – Geometry Objects Point { "type": "Point", "coordinates": [-77.00471710413694, 38.888627784897075] } A Location LineString { "type": "LineString", "coordinates": "coordinates": [ [ -77.00501340441406, 38.888540099550546], [ -77.00513678602874, 38.88806826701816 ]} Polygon { "type": "Polygon", "coordinates": [[ [-77, 38], [-77, 39], [-78, 39], [-78, 38] ] ] } Try Simple GeoJson Editor: http://bit.ly/SimpleGeoEditorhttp://bit.ly/SimpleGeoEditor

28. Export Data & Creating GeoJSON Comma-separated value (CSV) Then, convert CSV to GeoJSON Public Service Convert CSV to GeoJSON http://www.convertcsv.com/csv-to-geojson.htm Templating Directly export to GeoJSON after customization Previous GeoJSON experience Code is available in the OpenRefineSyntax.txt file.

29. A Test Flight 1. Open 1stMap in the folder (Double Click) 2. Drag and drop the GeoJSON file onto the map

30. Other Resources GeoJSON Specification http://geojson.org/geojson-spec.html Mapschool: Further reading (by Tom MacWright) http://mapschool.io/furtherreading.html Simple GeoJson Editor http://bit.ly/SimpleGeoEditor

31. ACTION III: MAPS Building customized maps

32. Notes on CORS CORS means “Cross-origin resource sharing” Loading a local file in a browser will throw the “Cross origin requests are only supported for HTTP.” error 1. running a local server python -m SimpleHTTPServer 2. Chrome flag (--allow-file-access-from-files) C:\... \Application\chrome.exe --allow-file-access-from-files google-chrome --allow-file-access-from-files open -a 'Google Chrome' --args -allow-file-access-from-files 3. Node.js and Express 4. Use FireFox (NOT Chrome) Alternatively, Visit http://bit.ly/GeoVis (CodePen Demo)http://bit.ly/GeoVis

33. Merging Data Layer & Map 1. Open FireFox 2. Open 2ndMap.html from the folder 3. Open 2ndMap.html file in a text editor  Alternatively, http://bit.ly/GeoVis and click 2nd Maphttp://bit.ly/GeoVis

34. My Second Map

35. Google Map Types MapTypeId.ROADMAP displays the default road map view. This is the default map type. MapTypeId.SATELLITE displays Google Earth satellite images MapTypeId.HYBRID displays a mixture of normal and satellite views MapTypeId.TERRAIN displays a physical map based on terrain information.

36. Change Placemarks – My minions (Creative Commons: clement127 @ Flickr)

37. Maps Placemarks 1. Drag and drop 3rdMap.html into FireFox 2. Open the same file in a text editor 3. Placemarks are in Markers folder – Art, Historic House, History, Library and Museum  Alternatively, click http://bit.ly/GeoVis and 3rd Maphttp://bit.ly/GeoVis

38. After Updating Placemarks

39. Info Window 1. Drag and drop 4thMap.html into FireFox 2. Open the same file in a text editor 3. Create a InfoWindow  Alternatively, click http://bit.ly/GeoVis and 4th Maphttp://bit.ly/GeoVis

40. After Adding InfoWindow

41. InfoWindow - Tuning HTML Style Bold Error Handling No Information Set Max Dimensions MaxWidth Browser Compatibility

42. Add More Information

43. Notes on Google Maps API warning “Google Maps API Warning: NoAPIKeys….” Google Maps JavaScript API, 25,000 requests/day Get a key at https://developers.google.com/maps/documentation/javascript/get-api-key 2ndMap.html with API Keys: https://jsfiddle.net/gopark/9vc1hy1x/48/https://jsfiddle.net/gopark/9vc1hy1x/48/

44. Other Resources Google Maps JavaScript API https://developers.google.com/maps/documentation/javascript/

45. EXPLORE Other Examples

46. Applications in Action Simple Maps Customized Placemarks Info Window Advanced Maps Legend Categorical Time Lapse Time * Category

47. THANK YOU! Sarah G. Park Technology & Engineering Librarian Southern Illinois Univ. Edwardsville gpark@siue.edu