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

INTRODUCTION

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

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

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

Software Required Text Editor (Notepad, Notepad++, etc.) OpenRefine Available in the USB drive Browser - Firefox

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

BASICS OF GEOVISUALIZATION

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

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

Imagine…

Locational Information Coordinates: Latitude, Longitude, (Elevation)

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)

ACTION 1: GEOCODING Using OpenRefine

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

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

Fetch II " alse&address=" + escape(value, "url")

Fetch III Processing… Outcome…

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

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

Parse III Result

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

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

Other Resources Google Refine 2.0 (Introduction) Using OpenRefine to geocode your data with Google and OpenStreetMap API geocode-your-data-using-google-and-openstreetmap-api/ geocode-your-data-using-google-and-openstreetmap-api/ Google Maps Geocoding API ro#Geocoding ro#Geocoding

ACTION II: GEOJSON Formatting Data

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

GeoJSON – Geometry Objects Point { "type": "Point", "coordinates": [ , ] } A Location LineString { "type": "LineString", "coordinates": "coordinates": [ [ , ], [ , ]} Polygon { "type": "Polygon", "coordinates": [[ [-77, 38], [-77, 39], [-78, 39], [-78, 38] ] ] } Try Simple GeoJson Editor:

Export Data & Creating GeoJSON Comma-separated value (CSV) Then, convert CSV to GeoJSON Public Service Convert CSV to GeoJSON Templating Directly export to GeoJSON after customization Previous GeoJSON experience Code is available in the OpenRefineSyntax.txt file.

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

Other Resources GeoJSON Specification Mapschool: Further reading (by Tom MacWright) Simple GeoJson Editor

ACTION III: MAPS Building customized maps

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 (CodePen Demo)

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

My Second Map

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.

Change Placemarks – My minions (Creative Commons: Flickr)

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 and 3rd Maphttp://bit.ly/GeoVis

After Updating Placemarks

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 and 4th Maphttp://bit.ly/GeoVis

After Adding InfoWindow

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

Add More Information

Notes on Google Maps API warning “Google Maps API Warning: NoAPIKeys….” Google Maps JavaScript API, 25,000 requests/day Get a key at 2ndMap.html with API Keys:

Other Resources Google Maps JavaScript API

EXPLORE Other Examples

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

THANK YOU! Sarah G. Park Technology & Engineering Librarian Southern Illinois Univ. Edwardsville