830 likes | 843 Views
Interactive Web Mapping with Google Maps and Google Apps. An Introduction to KML, Google Fusion Tables, and the Google Maps API. 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
E N D
Interactive Web Mappingwith Google Maps and Google Apps An Introduction to KML, Google Fusion Tables, and the Google Maps API Hammond Sanitary District
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
Who we are: Hammond Sanitary District Becky McKinley, GISP GIS Manager bmckinley@hammondsd.com Tom Ramker GIS Technician tramker@hammondsd.com Hammond Sanitary District
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
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
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
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
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
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
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
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
KML Structure • Tag-based structure with nested elements and attributes • Basic elements: Placemarks, Paths, Polygons, Overlays • Basic Attributes: Description, Style Hammond Sanitary District
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
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
Simple KML SS Hammond Sanitary District
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
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
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
Demonstration: KML • Google Earth Hammond Sanitary District
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
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
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
Demonstration: KML • ArcMap • File Folder • Google Earth • Google Sites • Google Maps Hammond Sanitary District
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
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
Fusion Tables SS Hammond Sanitary District
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
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
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
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
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
Demonstration: Fusion Tables • Shape Escape • Google Drive • Fusion Tables • Fusion Table Marker Icons Hammond Sanitary District
Questions? Hammond Sanitary District
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
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
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
Sample HTML SS Hammond Sanitary District
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
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
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
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
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
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
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
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
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
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
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