Interactive Web Mapping with Google Maps and Google Apps

1. Interactive Web Mappingwith Google Maps and Google Apps An Introduction to KML, Google Fusion Tables, and the Google Maps API Hammond Sanitary District

2. Workshop Schedule 9:00-10:30 – Part I A. Introductions B. KML C. Fusion Tables D. Question and Answer 10:30-10:45 – Break 10:45-12:00 – Part II A. Google Maps API B. Programming C. HammondGIS Demonstration D. Question and Answer Hammond Sanitary District

3. Who we are: Hammond Sanitary District Becky McKinley, GISP GIS Manager bmckinley@hammondsd.com Tom Ramker GIS Technician tramker@hammondsd.com Hammond Sanitary District

4. City of Hammond, IN • Located in extreme northwest corner of state, borders Lake Michigan and Illinois • Population: 80,830 • Employees: 634 • GIS Department : 2 • http://www.gohammond.com/ Hammond Sanitary District

5. What we do: • Maintain base map data, utility network data, and several other data layers for the Hammond Sanitary District and the City of Hammond • Provide mapping services to all city departments • Have implemented and maintain an interactive map for the City of Hammond’s website to be utilized by both city employees and the general public Hammond Sanitary District

6. Hammond Sanitary District

7. Our Goal • Utilize freely available tools and applications offered by Google to share our extensive spatial data library • Create an application that allows this data to be easily accessed by city officials and the general public • Make it easy to maintain and update with minimal work for the Web Design/IT staff Hammond Sanitary District

8. What’s the big deal? • Allows GIS data to be displayed in a familiar, easy-to-use interface • Requires no additional software, licenses, viewers, log-ins, etc. • Easily shared • No servers, all cloud based • Zero Cost Hammond Sanitary District

9. What you need: • Google Account • allows access to all google applications, including Google Sites, Google Maps API, Google Drive (formerly Google Documents), Google Fusion Tables, Google Analytics • Internet Connection • needed to upload data to Google Cloud and to access Google APIs • Data • shapefiles, kml files, or tabular data (.csv, .tsv, .xls, etc.) Hammond Sanitary District

10. Useful Additions : • Working knowledge of Google Maps • Google Earth • Text Editor • Wordpad, Notepad, etc. • Minimal programming skills • HTML, JavaScript, CSS • Newer generation internet browser with web development tools • Firefox, Chrome, etc. • Website for hosting Hammond Sanitary District

11. Data Formats • There are two types of GIS data that can be displayed using the Google Maps API: KML, and Fusion Tables • Both formats can be generated in various ways • Shapefiles can easily be converted to either format Hammond Sanitary District

12. Introduction to KML • Keyhole Markup Language • XML standard notation for expressing geographic annotation and visualization • Displays geographic data in an internet based Earth browser such as Google Earth, or Google Maps, or in certain geospatial software • File extension .kml or .kmz Hammond Sanitary District

13. KML Structure • Tag-based structure with nested elements and attributes • Basic elements: Placemarks, Paths, Polygons, Overlays • Basic Attributes: Description, Style Hammond Sanitary District

14. KML Geography • Uses 3D geographic coordinates: longitude, latitude and altitude • Longitude and latitude components are as defined by the World Geodetic System of 1984 (WGS84) • Altitude is measured from the WGS84 EGM96 Geoid vertical datum • Mercator projection Hammond Sanitary District

15. KML Code Sample <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <Placemark> <name>Hammond, Indiana</name> <description>City of Hammond</description> <Point> <coordinates>-87.48000,41.638026,0</coordinates> </Point> </Placemark> </Document> </kml> Hammond Sanitary District

16. Simple KML SS Hammond Sanitary District

17. Hammond Sanitary District

18. Editing and Creating KML files • Manually • Use of text editor, XML editor, etc. • Google Earth • Completely automated • Conversion • Use ArcMap or other software Hammond Sanitary District

19. Editing KML Manually • Editing or creating XML code line by line using text editor or XML editor • Very intensive coding: case sensitive, very specific ordering of tags • May be useful for small, simple data sets of Placemarks • Paths and Polygons may have hundreds or thousands of coordinates Hammond Sanitary District

20. KML in Google Earth • Create geography in an automated, familiar interface • Heads-up digitizing, geocoding • Style and description easily selected and edited in attribute windows • Elements can be easily added and removed with simple drag/drop procedures • Import several types of imagery Hammond Sanitary District

21. Demonstration: KML • Google Earth Hammond Sanitary District

22. Creating KML in ArcMap • KML files can be created using ArcMap(9.3 or 10) with the Layer To KML or Map To KML conversiontools in the ArcToolbox • Layer to KML tool converts single ArcMap layer to .kmz format • Map To KML tool converts entire ArcMap map document to .kmz format Hammond Sanitary District

23. Optimizing Layers for KML • The key KML settings of a feature layer are: • The Layer Name property, which is used as the folder name • The Layer Description property, which is used as the pop-up content for the containing folder • The Symbology, which is used to create a KML symbol • The Label expression, which is used to name each feature • The Definition Query, which can be used to limit which features are included in the KML representation • The HTML Popup properties, which are used to define the pop-up content for individual features Hammond Sanitary District

24. Optimizing Layers for KML (cont’d) • The key KML settings of an image layer are: • The Layer Name property, which is used as the ground overlay name • The Layer Description property, which is used as the pop-up content for the ground overlay Hammond Sanitary District

25. Demonstration: KML • ArcMap • File Folder • Google Earth • Google Sites • Google Maps Hammond Sanitary District

26. Google Fusion Tables • Fusion Tables • Data visualization web application • Allows user to gather, visualize, and share data tables • Map data in minutes • Located in Google Drive (formerly Google Documents) Hammond Sanitary District

27. Creating Fusion Tables • Fusion Tables application must be installed on your Google Drive • Can be created by: • Manually entering data into a table • Importing an existing table or spreadsheet • Converting a Shapefile • Stored on your Google Drive, using Google cloud space, up to 250 MB for free • Easily shared • Customizable privacy/access settings Hammond Sanitary District

28. Fusion Tables SS Hammond Sanitary District

29. Create Fusion Table Manually • Create and modify columns, rows • Has common table/spreadsheet software tools • Sort, Merge, Constrain, etc. • For data to be mapped, one column must contain location data • Location data can be: • Lattitude and longitude coordinates • Addresses • KML Hammond Sanitary District

30. Import • Supports import of following file formats: • Spreadsheets • .xls, .xslx, .ods and Google Spreadsheets • Delimited text files • .csv, .tsv, .txt • KML • Limits • 1,000 columns per table and 1 MB of content per row. • Recommended tables have < 100 columns and have total size < 100 MB Hammond Sanitary District

31. Preparing Data for Import • Only the first sheet is imported to Fusion Tables. • Fusion Tables only recognize a single row of column names • Delete any comments and explanations that are not part of the tabular data from the file you upload • Fill in implied values • Does not support formulas Hammond Sanitary District

32. Preparing Data for Import (cont’d) • Multi-part addresses must be concatenated and displayed in one column • Lattitude and longitude must be in decimal degrees, can be in two columns • Fusion Tables handle percentages as strings. To treat percentages as numbers, change data into actual numbers prior to import Hammond Sanitary District

33. Shape Escape • shpescape.com • Shapefile to Fusion Table conversion tool • Upload shapefile directly from your computer • Links to your Google Drive, creates Fusion Table and populates with data • Shapefiles must be zipped and must include a .prj, .shp, .shx, and .dbf file for each shapefile • Limits • You are limited to 250 MB in total storage on Google Fusion Tables • This application will upload a maximum of 100k rows Hammond Sanitary District

34. Demonstration: Fusion Tables • Shape Escape • Google Drive • Fusion Tables • Fusion Table Marker Icons Hammond Sanitary District

35. Questions? Hammond Sanitary District

36. Programming • HTML • Build websites and web elements • CSS • Format websites and web elements • JavaScript • Provide functionality to websites and create web applications Hammond Sanitary District

37. HTML • HyperText Markup Language • Language used to create anything that can be displayed in a web browser • Consists of nested elements that generally have 3 components • Opening and closing tags • Attributes • Content: text, graphics, other elements, etc. Hammond Sanitary District

38. HTML Code Basics <!DOCTYPE> Document Type Declaration, this tells your browser which version of HTML you're using. <html>...</html> Standard opening and closing tags for any HTML page; everything else is enclosed in these. <!-- ... --> Comments; whatever is in here will be skipped over by the browser. <head>...</head> Header of your document; can contain scripts, styles, descriptions, information. <title>...</title> Whatever is between these tags will appear in the title bar of your browser. <meta> Contains page and creator information; used by search engines. <body>...</body> Everything visible on your page goes between these tags. Hammond Sanitary District

39. Sample HTML SS Hammond Sanitary District

40. CSS • Cascading Style Sheets • Controls look and formatting of any document written in a markup langauge • Separates document content from document presentation • Simple syntax that uses a number of English keywords to specify the names of various style properties • JavaScripts in HTML must be inserted between <script> and </script> tags. • CSS can also be placed in external files with .css extension Hammond Sanitary District

41. CSS Code Basics • A style sheet consists of a list of rules. • Each rule or set of rules consists of one or more selectors, and a declaration block. • Selectors are used to declare which part of the markup a style applies to. • A declaration-block consists of a list of declarations in braces • Each declaration itself consists of a property, a colon (:), and a value • Multiple declarations in a block are seperated by a semi-colon (;) Hammond Sanitary District

42. Sample CSS Example: body {background-color:#d0e4fe;} h1 {color:orange;text-align:center;} p {font-family:"Times New Roman"; font-size:20px;} Hammond Sanitary District

43. JavaScript • Object-oriented programming language • Scripting language that is dynamic, weakly typed, and has first-class functions • Syntax was strongly influenced by the language C • Most common use is to write functions that are embedded in HTML to add functionality to websites • Can be executed by all modern web browsers Hammond Sanitary District

44. JavaScript Code Basics • JavaScripts in HTML must be inserted between <script> and </script> tags. • JavaScripts can be put in the <body> and in the <head> section of an HTML page. • Scripts can also be placed in external files with .js extension • To use an external script, point to the .js file in the "src" attribute of the <script> tag: <script src="myScript.js"></script> Hammond Sanitary District

45. JavaScript Code Basics (cont’d) • JavaScript statements are "commands" to the browser and are separated by semicolons (;) • Statements can be grouped together in blocks • Blocks start with a left curly bracket ({), and end with a right curly bracket (}) • The purpose of a block is to make the sequence of statements execute together • Single line comments start with two backslashes (//) Hammond Sanitary District

46. JavaScript Code Basics (cont’d)Variables • Variables are declared with the var keyword: var pi=3.14; • Variables can be created with or without a value (undefined): var myname; • To assign a value to the variable, use the equal sign: myname=“Tom”; • Variables can be strings, numbers, arrays, boolean, objects, functions Hammond Sanitary District

47. JavaScript Code Basics (cont’d)Objects • An object is delimited by curly braces ({}) • The object's properties are defined as name and value pairs (name : value) and are separated by commas: var person={firstname:“Tom", lastname:“Ramker", id:4061}; • You can address the object properties as follows: name=person.lastname; Hammond Sanitary District

48. JavaScript Code Basics (cont’d)Functions • A function is written as a code block inside curly braces({}), preceded by the function keyword: function functionname(){some code to be executed} • The code inside the function will be executed when it is “called” • The function can be called directly when an event occurs and it can be called from "anywhere" by JavaScript code • When a function is called, it can be “passed” some values: myFunction(argument1,argument2) ; function myFunction(var1,var2){some code} Hammond Sanitary District

49. JavaScript Code Basics (cont’d)Functions 2 • A function can also return a value back to where the call was made: function myFunction(){var x=5;return x;} • Arithmetic Operators: +,-,/,*,=,+=,-=,*=,/= • Comparison Operators: <,>,<=,>=,== • Logical Operators: &&, ||, ! Hammond Sanitary District

50. JavaScript Code Basics (cont’d)Functions 3 • if statement - use this statement to execute some code only if a specified condition is true • if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false • if...else if....else statement - use this statement to select one of many blocks of code to be executed • switch statement - use this statement to select one of many blocks of code to be executed Hammond Sanitary District