Interactive Web Mapping with Google Maps and Google Apps

  • Published on
    14-Jan-2016

  • View
    40

  • Download
    0

Embed Size (px)

DESCRIPTION

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 - PowerPoint PPT Presentation

Transcript

  • Interactive Web Mappingwith Google Maps and Google AppsAn Introduction to KML, Google Fusion Tables, and the Google Maps API

    Hammond Sanitary District

  • Workshop Schedule9:00-10:30 Part I A. IntroductionsB. KMLC. Fusion TablesD. Question and Answer

    10:30-10:45 Break

    10:45-12:00 Part IIA. Google Maps APIB. ProgrammingC. HammondGIS DemonstrationD. Question and Answer

    Hammond Sanitary District

  • Who we are:Hammond Sanitary District

    Becky McKinley, GISPGIS Managerbmckinley@hammondsd.com

    Tom RamkerGIS Techniciantramker@hammondsd.com

    Hammond Sanitary District

  • City of Hammond, INLocated in extreme northwest corner of state, borders Lake Michigan and IllinoisPopulation: 80,830Employees: 634GIS Department : 2http://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 departmentsHave implemented and maintain an interactive map for the City of Hammonds website to be utilized by both city employees and the general public

    Hammond Sanitary District

  • Hammond Sanitary District

  • Our GoalUtilize freely available tools and applications offered by Google to share our extensive spatial data libraryCreate an application that allows this data to be easily accessed by city officials and the general publicMake it easy to maintain and update with minimal work for the Web Design/IT staff

    Hammond Sanitary District

  • Whats the big deal? Allows GIS data to be displayed in a familiar, easy-to-use interfaceRequires no additional software, licenses, viewers, log-ins, etc. Easily sharedNo servers, all cloud basedZero Cost

    Hammond Sanitary District

  • What you need:

    Google Accountallows access to all google applications, including Google Sites, Google Maps API, Google Drive (formerly Google Documents), Google Fusion Tables, Google Analytics Internet Connectionneeded to upload data to Google Cloud and to access Google APIsDatashapefiles, kml files, or tabular data (.csv, .tsv, .xls, etc.)

    Hammond Sanitary District

  • Useful Additions :Working knowledge of Google MapsGoogle EarthText EditorWordpad, Notepad, etc.Minimal programming skillsHTML, JavaScript, CSSNewer generation internet browser with web development toolsFirefox, Chrome, etc.Website for hosting

    Hammond Sanitary District

  • Data FormatsThere are two types of GIS data that can be displayed using the Google Maps API: KML, and Fusion TablesBoth formats can be generated in various waysShapefiles can easily be converted to either format

    Hammond Sanitary District

  • Introduction to KMLKeyhole Markup LanguageXML standard notation for expressing geographic annotation and visualizationDisplays geographic data in an internet based Earth browser such as Google Earth, or Google Maps, or in certain geospatial softwareFile extension .kml or .kmz

    Hammond Sanitary District

  • KML StructureTag-based structure with nested elements and attributesBasic elements: Placemarks, Paths, Polygons, OverlaysBasic Attributes: Description, Style

    Hammond Sanitary District

  • KML GeographyUses 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 datumMercator projection

    Hammond Sanitary District

  • KML Code Sample

    Hammond, IndianaCity of Hammond-87.48000,41.638026,0

    Hammond Sanitary District

  • Simple KML SS

    Hammond Sanitary District

  • Hammond Sanitary District

  • Editing and Creating KML filesManuallyUse of text editor, XML editor, etc.

    Google EarthCompletely automated

    Conversion Use ArcMap or other software

    Hammond Sanitary District

  • Editing KML ManuallyEditing or creating XML code line by line using text editor or XML editorVery intensive coding: case sensitive, very specific ordering of tagsMay be useful for small, simple data sets of PlacemarksPaths and Polygons may have hundreds or thousands of coordinates

    Hammond Sanitary District

  • KML in Google EarthCreate geography in an automated, familiar interfaceHeads-up digitizing, geocodingStyle and description easily selected and edited in attribute windowsElements can be easily added and removed with simple drag/drop proceduresImport several types of imagery

    Hammond Sanitary District

  • Demonstration: KMLGoogle Earth

    Hammond Sanitary District

  • Creating KML in ArcMapKML files can be created using ArcMap(9.3 or 10) with the Layer To KML or Map To KML conversion tools in the ArcToolboxLayer 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 KMLThe 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 (contd)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: KMLArcMapFile FolderGoogle EarthGoogle SitesGoogle Maps

    Hammond Sanitary District

  • Google Fusion TablesFusion TablesData visualization web applicationAllows user to gather, visualize, and share data tablesMap data in minutes Located in Google Drive (formerly Google Documents)

    Hammond Sanitary District

  • Creating Fusion TablesFusion Tables application must be installed on your Google DriveCan be created by:Manually entering data into a tableImporting an existing table or spreadsheetConverting a Shapefile Stored on your Google Drive, using Google cloud space, up to 250 MB for freeEasily shared Customizable privacy/access settings

    Hammond Sanitary District

  • Fusion Tables SS

    Hammond Sanitary District

  • Create Fusion Table ManuallyCreate and modify columns, rowsHas common table/spreadsheet software toolsSort, Merge, Constrain, etc.For data to be mapped, one column must contain location dataLocation data can be:Lattitude and longitude coordinatesAddressesKML

    Hammond Sanitary District

  • ImportSupports import of following file formats:Spreadsheets.xls, .xslx, .ods and Google Spreadsheets Delimited text files.csv, .tsv, .txtKMLLimits1,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 ImportOnly the first sheet is imported to Fusion Tables. Fusion Tables only recognize a single row of column namesDelete 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 (contd)Multi-part addresses must be concatenated and displayed in one columnLattitude and longitude must be in decimal degrees, can be in two columnsFusion Tables handle percentages as strings. To treat percentages as numbers, change data into actual numbers prior to import

    Hammond Sanitary District

  • Shape Escapeshpescape.comShapefile to Fusion Table conversion toolUpload shapefile directly from your computerLinks to your Google Drive, creates Fusion Table and populates with dataShapefiles must be zipped and must include a .prj, .shp, .shx, and .dbf file for each shapefile

    LimitsYou 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 TablesShape EscapeGoogle DriveFusion TablesFusion Table Marker Icons

    Hammond Sanitary District

  • Questions?

    Hammond Sanitary District

  • ProgrammingHTMLBuild websites and web elementsCSSFormat websites and web elementsJavaScriptProvide functionality to websites and create web applications

    Hammond Sanitary District

  • HTMLHyperText Markup LanguageLanguage used to create anything that can be displayed in a web browserConsists of nested elements that generally have 3 componentsOpening and closing tagsAttributesContent: text, graphics, other elements, etc.

    Hammond Sanitary District

  • HTML Code Basics

    Document Type Declaration, this tells your browser which version of HTML you're using.

    ...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.

    ...Header of your document; can contain scripts, styles, descriptions, information.

    ... Whatever is between these tags will appear in the title bar of your browser.

    Contains page and creator information; used by search engines. ...Everything visible on your page goes between these tags.

    Hammond Sanitary District

  • Sample HTML SS

    Hammond Sanitary District

  • CSSCascading Style SheetsControls look and formatting of any document written in a markup langaugeSeparates document content from document presentationSimple syntax that uses a number of English keywords to specify the names of various style propertiesJavaScripts in HTML must be inserted between and tags. CSS can also be placed in external files with .css extension

    Hammond Sanitary District

  • CSS Code BasicsA 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

  • JavaScriptObject-oriented programming language Scripting language that is dynamic, weakly typed, and has first-class functionsSyntax was strongly influenced by the language C Most common use is to write functions that are embedded in HTML to add functionality to websitesCan be executed by all modern web browsers

    Hammond Sanitary District

  • JavaScript Code BasicsJavaScripts in HTML must be inserted between and tags. JavaScripts can be put in the and in the section of an HTML page. Scripts can also be placed in external files with .js extensionTo use an external script, point to the .js file in the "src" attribute of the tag:

    Hammond Sanitary District

  • JavaScript Code Basics (contd)JavaScript statements are "commands" to the browser and are separated by semicolons (;)Statements can be grouped together in blocksBlocks 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 togetherSingle line comments start with two backslashes (//)

    Hammond Sanitary District

  • JavaScript Code Basics (contd)VariablesVariables 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 (contd)ObjectsAn 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 (contd)FunctionsA 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 calledThe 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 (contd)Functions 2A 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 (contd)Functions 3if 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

  • Sample Javascript SS

    Hammond Sanitary District

  • Google Maps APIAPI Application Programming InterfaceAllows different software components to communicate with each otherLibrary that includes tools, variables, data structures, object classes, etc.Google Maps APIWeb version utilizes JavaScriptVersions also available for Android and iOS

    Hammond Sanitary District

  • Google Maps API, cont.No cost usage limits and restrictionsService must be freely and publicly accessible to end users25,000 map loads per day 2,500 Geocoding requests per day2,500 Directions requests per dayGoogle Maps API for Business available for those that do not meet, or exceed these requirements

    Hammond Sanitary District

  • Google Maps API, cont.Obtain API KeyInstructions to create your API key:Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account. Click the Services link from the left-hand menu. Activate the Google Maps API v3 service. Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.

    Hammond Sanitary District

  • Declaring Your Application as HTML5

    First line of documentTells browser how to handle document

    Hammond Sanitary District

  • Loading Google Maps API

    The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API The key parameter contains your application's API key The sensor parameter indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location

    Hammond Sanitary District

  • Map DOM Element

    Creates a named div element and obtains a reference to this element in the browser's document object model (DOM) A div element defines a section of a webpage

    Hammond Sanitary District

  • C...

Recommended

View more >