Download ppt - Interactive Web Mapping with Google Maps and Google Apps

Hammond Sanitary DistrictHammond Sanitary District

Interactive Web MappingInteractive Web Mappingwith Google Maps and Google with Google Maps and Google

AppsApps

An Introduction to KML, Google An Introduction to KML, Google Fusion Tables, and the Google Fusion Tables, and the Google

Maps APIMaps API


Workshop ScheduleWorkshop Schedule

9:00-10:30 – Part I 9:00-10:30 – Part I A. IntroductionsA. IntroductionsB. KMLB. KMLC. Fusion TablesC. Fusion TablesD. Question and AnswerD. Question and Answer

10:30-10:45 – Break10:30-10:45 – Break

10:45-12:00 – Part II10:45-12:00 – Part IIA. Google Maps APIA. Google Maps APIB. ProgrammingB. ProgrammingC. HammondGIS DemonstrationC. HammondGIS DemonstrationD. Question and AnswerD. Question and Answer


Who we are:Who we are:

Hammond Sanitary District

Becky McKinley, GISPGIS Manager

[email protected]

Tom RamkerGIS Technician

[email protected]


City of Hammond, INCity of Hammond, IN

Located in extreme northwest corner of Located in extreme northwest corner of state, borders Lake Michigan and Illinoisstate, borders Lake Michigan and Illinois

Population: 80,830Population: 80,830 Employees: 634Employees: 634 GIS Department : 2GIS Department : 2 http://www.gohammond.com/http://www.gohammond.com/


What we do:What we do:

Maintain base map data, utility network data, Maintain base map data, utility network data, and several other data layers for the Hammond and several other data layers for the Hammond Sanitary District and the City of Hammond Sanitary District and the City of Hammond

Provide mapping services to all city departmentsProvide mapping services to all city departments Have implemented and maintain an interactive Have implemented and maintain an interactive

map for the City of Hammond’s website to be map for the City of Hammond’s website to be utilized by both city employees and the general utilized by both city employees and the general publicpublic



Our GoalOur Goal

Utilize freely available tools and Utilize freely available tools and applications offered by Google to share applications offered by Google to share our extensive spatial data libraryour extensive spatial data library

Create an application that allows this data Create an application that allows this data to be easily accessed by city officials and to be easily accessed by city officials and the general publicthe general public

Make it easy to maintain and update with Make it easy to maintain and update with minimal work for the Web Design/IT staffminimal work for the Web Design/IT staff


What’s the big deal? What’s the big deal?

Allows GIS data to be displayed in a Allows GIS data to be displayed in a familiar, easy-to-use interfacefamiliar, easy-to-use interface

Requires no additional software, licenses, Requires no additional software, licenses, viewers, log-ins, etc. viewers, log-ins, etc.

Easily sharedEasily shared No servers, all cloud basedNo servers, all cloud based Zero CostZero Cost


What you need:What you need:

Google AccountGoogle Account allows access to all google applications, including allows access to all google applications, including

Google Sites, Google Maps API, Google Drive Google Sites, Google Maps API, Google Drive (formerly Google Documents), Google Fusion (formerly Google Documents), Google Fusion Tables, Google Analytics Tables, Google Analytics

Internet ConnectionInternet Connection needed to upload data to Google Cloud and to needed to upload data to Google Cloud and to

access Google APIsaccess Google APIs DataData

shapefiles, kml files, or tabular data (.csv, .tsv, .xls, shapefiles, kml files, or tabular data (.csv, .tsv, .xls, etc.) etc.)


Useful Additions :Useful Additions :

Working knowledge of Google MapsWorking knowledge of Google Maps Google EarthGoogle Earth Text EditorText Editor

Wordpad, Notepad, etc.Wordpad, Notepad, etc. Minimal programming skillsMinimal programming skills

HTML, JavaScript, CSSHTML, JavaScript, CSS Newer generation internet browser with web Newer generation internet browser with web

development toolsdevelopment tools Firefox, Chrome, etc.Firefox, Chrome, etc.

Website for hostingWebsite for hosting


Data FormatsData Formats

There are two types of GIS data that can There are two types of GIS data that can be displayed using the Google Maps API: be displayed using the Google Maps API: KML, and Fusion TablesKML, and Fusion Tables

Both formats can be generated in various Both formats can be generated in various waysways

Shapefiles can easily be converted to Shapefiles can easily be converted to either formateither format


Introduction to KMLIntroduction to KML

Keyhole Markup LanguageKeyhole Markup Language XML standard notation for expressing XML standard notation for expressing

geographic annotation and visualizationgeographic annotation and visualization Displays geographic data in an internet Displays geographic data in an internet

based Earth browser such as Google based Earth browser such as Google Earth, or Google Maps, or in certain Earth, or Google Maps, or in certain geospatial softwaregeospatial software

File extension .kml or .kmzFile extension .kml or .kmz


KML StructureKML Structure

Tag-based structure with nested elements Tag-based structure with nested elements and attributesand attributes

Basic elements: Placemarks, Paths, Basic elements: Placemarks, Paths, Polygons, OverlaysPolygons, Overlays

Basic Attributes: Description, Style Basic Attributes: Description, Style


KML GeographyKML Geography

Uses 3D geographic coordinates: Uses 3D geographic coordinates: longitude, latitude and altitudelongitude, latitude and altitude

Longitude and latitude components are as Longitude and latitude components are as defined by the World Geodetic System of defined by the World Geodetic System of 1984 (WGS84)1984 (WGS84)

Altitude is measured from the WGS84 Altitude is measured from the WGS84 EGM96 Geoid vertical datumEGM96 Geoid vertical datum

Mercator projectionMercator projection


KML Code SampleKML Code Sample

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><kml xmlns="http://www.opengis.net/kml/2.2">

<Document><Document><Placemark><Placemark><name>Hammond, Indiana</name><name>Hammond, Indiana</name><description>City of Hammond</description><description>City of Hammond</description><Point><Point><coordinates>-87.48000,41.638026,0</coordinates><coordinates>-87.48000,41.638026,0</coordinates></Point></Point></Placemark></Placemark>

</Document></Document></kml></kml>


Simple KML SSSimple KML SS



Editing and Creating KML filesEditing and Creating KML files

ManuallyManually Use of text editor, XML editor, etc.Use of text editor, XML editor, etc.

Google EarthGoogle Earth Completely automatedCompletely automated

Conversion Conversion Use ArcMap or other softwareUse ArcMap or other software


Editing KML ManuallyEditing KML Manually

Editing or creating XML code line by line Editing or creating XML code line by line using text editor or XML editorusing text editor or XML editor

Very intensive coding: case sensitive, very Very intensive coding: case sensitive, very specific ordering of tagsspecific ordering of tags

May be useful for small, simple data sets May be useful for small, simple data sets of Placemarksof Placemarks

Paths and Polygons may have hundreds Paths and Polygons may have hundreds or thousands of coordinatesor thousands of coordinates


KML in Google EarthKML in Google Earth

Create geography in an automated, Create geography in an automated, familiar interfacefamiliar interface

Heads-up digitizing, geocodingHeads-up digitizing, geocoding Style and description easily selected and Style and description easily selected and

edited in attribute windowsedited in attribute windows Elements can be easily added and Elements can be easily added and

removed with simple drag/drop proceduresremoved with simple drag/drop procedures Import several types of imageryImport several types of imagery


Demonstration: KMLDemonstration: KML

Google EarthGoogle Earth


Creating KML in ArcMapCreating KML in ArcMap

KML files can be created using KML files can be created using ArcMap(9.3 or 10) with the ArcMap(9.3 or 10) with the Layer To KML Layer To KML or or Map To KML Map To KML conversionconversion tools in the tools in the ArcToolboxArcToolbox

Layer to KMLLayer to KML tool converts single ArcMap tool converts single ArcMap layer to .kmz format layer to .kmz format

Map To KML tool converts entire ArcMap Map To KML tool converts entire ArcMap map document to .kmz formatmap document to .kmz format


Optimizing Layers for KMLOptimizing Layers for KML The key KML settings of a feature layer are:The key KML settings of a feature layer are:

The Layer Name property, which is used as the folder The Layer Name property, which is used as the folder name name

The Layer Description property, which is used as the The Layer Description property, which is used as the pop-up content for the containing folder pop-up content for the containing folder

The Symbology, which is used to create a KML The Symbology, which is used to create a KML symbol symbol

The Label expression, which is used to name each The Label expression, which is used to name each feature feature

The Definition Query, which can be used to limit The Definition Query, which can be used to limit which features are included in the KML representation which features are included in the KML representation

The HTML Popup properties, which are used to The HTML Popup properties, which are used to define the pop-up content for individual features define the pop-up content for individual features


Optimizing Layers for KML (cont’d)Optimizing Layers for KML (cont’d)

The key KML settings of an image layer The key KML settings of an image layer are:are: The Layer Name property, which is used as The Layer Name property, which is used as

the ground overlay name the ground overlay name The Layer Description property, which is used The Layer Description property, which is used

as the pop-up content for the ground overlay as the pop-up content for the ground overlay


Demonstration: KMLDemonstration: KML

ArcMapArcMap File FolderFile Folder Google EarthGoogle Earth Google SitesGoogle Sites Google MapsGoogle Maps


Google Fusion TablesGoogle Fusion Tables

Fusion TablesFusion Tables Data visualization web applicationData visualization web application Allows user to gather, visualize, and share Allows user to gather, visualize, and share

data tablesdata tables Map data in minutes Map data in minutes Located in Google Drive (formerly Google Located in Google Drive (formerly Google

Documents)Documents)


Creating Fusion TablesCreating Fusion Tables

Fusion Tables application must be installed on Fusion Tables application must be installed on your Google Driveyour Google Drive

Can be created by:Can be created by: Manually entering data into a tableManually entering data into a table Importing an existing table or spreadsheetImporting an existing table or spreadsheet Converting a Shapefile Converting a Shapefile

Stored on your Google Drive, using Google Stored on your Google Drive, using Google cloud space, up to 250 MB for freecloud space, up to 250 MB for free

Easily shared Easily shared Customizable privacy/access settingsCustomizable privacy/access settings


Fusion Tables SSFusion Tables SS


Create Fusion Table ManuallyCreate Fusion Table Manually

Create and modify columns, rowsCreate and modify columns, rows Has common table/spreadsheet software toolsHas common table/spreadsheet software tools

Sort, Merge, Constrain, etc.Sort, Merge, Constrain, etc.

For data to be mapped, one column must For data to be mapped, one column must contain location datacontain location data

Location data can be:Location data can be: Lattitude and longitude coordinatesLattitude and longitude coordinates AddressesAddresses KMLKML


ImportImport

Supports import of following file formats:Supports import of following file formats: SpreadsheetsSpreadsheets

• .xls, .xslx, .ods and Google Spreadsheets .xls, .xslx, .ods and Google Spreadsheets Delimited text filesDelimited text files

• .csv, .tsv, .txt.csv, .tsv, .txt KMLKML

LimitsLimits 1,000 columns per table and 1 MB of content per row. 1,000 columns per table and 1 MB of content per row. Recommended tables have < 100 columns and have Recommended tables have < 100 columns and have

total size < 100 MB total size < 100 MB


Preparing Data for ImportPreparing Data for Import

Only the first sheet is imported to Fusion Only the first sheet is imported to Fusion Tables. Tables.

Fusion Tables only recognize a single row Fusion Tables only recognize a single row of column namesof column names

Delete any comments and explanations Delete any comments and explanations that are not part of the tabular data from that are not part of the tabular data from the file you upload the file you upload

Fill in implied values Fill in implied values Does not support formulasDoes not support formulas


Preparing Data for Import (cont’d)Preparing Data for Import (cont’d)

Multi-part addresses must be Multi-part addresses must be concatenated and displayed in one columnconcatenated and displayed in one column

Lattitude and longitude must be in decimal Lattitude and longitude must be in decimal degrees, can be in two columnsdegrees, can be in two columns

Fusion Tables handle percentages as Fusion Tables handle percentages as strings. To treat percentages as numbers, strings. To treat percentages as numbers, change data into actual numbers prior to change data into actual numbers prior to importimport


Shape EscapeShape Escape shpescape.comshpescape.com

Shapefile to Fusion Table conversion toolShapefile to Fusion Table conversion tool Upload shapefile directly from your computerUpload shapefile directly from your computer Links to your Google Drive, creates Fusion Table and Links to your Google Drive, creates Fusion Table and

populates with datapopulates with data Shapefiles must be zipped and must include Shapefiles must be zipped and must include

a .a .prj, .shp, .shx,prj, .shp, .shx, and . and .dbfdbf file for each shapefile file for each shapefile

LimitsLimits You are limited to 250 MB in total storage on Google You are limited to 250 MB in total storage on Google

Fusion Tables Fusion Tables This application will upload a maximum of 100k rows This application will upload a maximum of 100k rows


Demonstration: Fusion TablesDemonstration: Fusion Tables

Shape EscapeShape Escape Google DriveGoogle Drive Fusion TablesFusion Tables Fusion Table Marker IconsFusion Table Marker Icons


Questions?Questions?


ProgrammingProgramming

HTMLHTML Build websites and web elementsBuild websites and web elements

CSSCSS Format websites and web elementsFormat websites and web elements

JavaScriptJavaScript Provide functionality to websites and create Provide functionality to websites and create

web applicationsweb applications


HTMLHTML

HyperText Markup LanguageHyperText Markup Language Language used to create anything that can Language used to create anything that can

be displayed in a web browserbe displayed in a web browser Consists of nested elements that generally Consists of nested elements that generally

have 3 componentshave 3 components Opening and closing tagsOpening and closing tags AttributesAttributes Content: text, graphics, other elements, etc. Content: text, graphics, other elements, etc.


HTML Code BasicsHTML Code Basics<!DOCTYPE><!DOCTYPE>

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

<html>...</html><html>...</html>Standard opening and closing tags for any HTML page; everything else is enclosed in these. 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.Comments; whatever is in here will be skipped over by the browser.

<head>...</head><head>...</head>Header of your document; can contain scripts, styles, descriptions, information. Header of your document; can contain scripts, styles, descriptions, information.

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

<meta><meta> Contains page and creator information; used by search engines.Contains page and creator information; used by search engines.

<body>...</body><body>...</body>Everything visible on your page goes between these tags. Everything visible on your page goes between these tags.


Sample HTML SSSample HTML SS


CSSCSS

Cascading Style SheetsCascading Style Sheets Controls look and formatting of any document written in Controls look and formatting of any document written in

a markup langaugea markup langauge Separates document content from document Separates document content from document

presentationpresentation Simple syntax that uses a number of English keywords Simple syntax that uses a number of English keywords

to specify the names of various style propertiesto specify the names of various style properties JavaScripts in HTML must be inserted between JavaScripts in HTML must be inserted between <script><script>

and and </script></script> tags. tags. CSS can also be placed in external files with .css CSS can also be placed in external files with .css

extensionextension


CSS Code BasicsCSS Code Basics A style sheet consists of a list of A style sheet consists of a list of rules.rules. Each Each rulerule or set of or set of rulesrules consists of one or more consists of one or more

selectorsselectors, and a , and a declaration blockdeclaration block.. SelectorsSelectors are used to declare which part of the are used to declare which part of the

markup a style applies to. markup a style applies to. A A declaration-blockdeclaration-block consists of a list of consists of a list of

declarationsdeclarations in braces in braces Each Each declarationdeclaration itself consists of a itself consists of a propertyproperty, a , a

colon (:), and a colon (:), and a valuevalue Multiple Multiple declarationsdeclarations in a block are seperated in a block are seperated

by a semi-colon (;) by a semi-colon (;)


Sample CSS Sample CSS

Example:Example:

body {background-color:#d0e4fe;}body {background-color:#d0e4fe;}

h1 {color:orange;text-align:center;}h1 {color:orange;text-align:center;}

p {font-family:"Times New Roman";p {font-family:"Times New Roman";

font-size:20px;}font-size:20px;}


JavaScriptJavaScript

Object-oriented programming language Object-oriented programming language Scripting language that is dynamic, weakly Scripting language that is dynamic, weakly

typed, and has first-class functionstyped, and has first-class functions Syntax was strongly influenced by the language Syntax was strongly influenced by the language

CC Most common use is to write functions that are Most common use is to write functions that are

embedded in embedded in HTMLHTML to add functionality to to add functionality to websiteswebsites

Can be executed by all modern web browsers Can be executed by all modern web browsers


JavaScript Code BasicsJavaScript Code Basics

JavaScripts in HTML must be inserted between JavaScripts in HTML must be inserted between <script><script> and and </script></script> tags. tags.

JavaScripts can be put in the JavaScripts can be put in the <body><body> and in the and in the <head><head> section of an HTML page. section of an HTML page.

Scripts can also be placed in external files Scripts can also be placed in external files with .js extensionwith .js extension

To use an external script, point to the .js file in To use an external script, point to the .js file in the "src" attribute of the the "src" attribute of the <script><script> tag: tag:

<script src="myScript.js"></script><script src="myScript.js"></script>


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)

JavaScript statements are "commands" to the JavaScript statements are "commands" to the browser and are separated by semicolons (;)browser and are separated by semicolons (;)

Statements can be grouped together in blocksStatements can be grouped together in blocks Blocks start with a left curly bracket ({), and end Blocks start with a left curly bracket ({), and end

with a right curly bracket (})with a right curly bracket (}) The purpose of a block is to make the sequence The purpose of a block is to make the sequence

of statements execute togetherof statements execute together Single line comments start with two backslashes Single line comments start with two backslashes

((//)//)


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)VariablesVariables

Variables are declared with the Variables are declared with the varvar keyword: keyword:var pi=3.14; var pi=3.14;

Variables can be created with or without a value Variables can be created with or without a value (undefined):(undefined):

var myname;var myname;

To assign a value to the variable, use the equal To assign a value to the variable, use the equal sign: sign:

myname=“Tom”;myname=“Tom”;

Variables can be strings, numbers, arrays, Variables can be strings, numbers, arrays, boolean, objects, functionsboolean, objects, functions


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)ObjectsObjects

An object is delimited by curly braces ({}) An object is delimited by curly braces ({}) The object's properties are defined as The object's properties are defined as

name and value pairs (name : value) and name and value pairs (name : value) and are separated by commas: are separated by commas:

var person={firstname:“Tom", lastname:“Ramker", id:4061};var person={firstname:“Tom", lastname:“Ramker", id:4061};

You can address the object properties as You can address the object properties as follows:follows:

name=person.lastname; name=person.lastname;


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)FunctionsFunctions

A function is written as a code block inside curly A function is written as a code block inside curly braces({}), preceded by the braces({}), preceded by the functionfunction keyword: keyword:

function functionname()function functionname(){{some code to be executedsome code to be executed} }

The code inside the function will be executed when it is The code inside the function will be executed when it is “called”“called”

The function can be called directly when an event occurs The function can be called directly when an event occurs and it can be called from "anywhere" by JavaScript code and it can be called from "anywhere" by JavaScript code

When a function is called, it can be “passed” some When a function is called, it can be “passed” some values:values:

myFunction(argument1,argument2) ;myFunction(argument1,argument2) ;function myFunction(var1,var2)function myFunction(var1,var2)

{{some codesome code} }


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)Functions 2Functions 2

A function can also return a value back to A function can also return a value back to where the call was made:where the call was made:

function myFunction()function myFunction(){{var x=5;var x=5;return x;return x;} }

Arithmetic Operators: +,-,/,*,=,+=,-=,*=,/=Arithmetic Operators: +,-,/,*,=,+=,-=,*=,/= Comparison Operators: <,>,<=,>=,==Comparison Operators: <,>,<=,>=,== Logical Operators: &&, ||, !Logical Operators: &&, ||, !


JavaScript Code Basics (cont’d)JavaScript Code Basics (cont’d)Functions 3Functions 3

ifif statement statement - use this statement to execute - use this statement to execute some code only if a specified condition is true some code only if a specified condition is true

if...elseif...else statement statement - use this statement to - use this statement to execute some code if the condition is true and execute some code if the condition is true and another code if the condition is false another code if the condition is false

if...else if....elseif...else if....else statement statement - use this statement - use this statement to select one of many blocks of code to be to select one of many blocks of code to be executed executed

switchswitch statement statement - use this statement to select - use this statement to select one of many blocks of code to be executed one of many blocks of code to be executed


Sample Javascript SSSample Javascript SS


Google Maps APIGoogle Maps API

API – Application Programming InterfaceAPI – Application Programming Interface Allows different software components to Allows different software components to

communicate with each othercommunicate with each other Library that includes tools, variables, data Library that includes tools, variables, data

structures, object classes, etc.structures, object classes, etc. Google Maps APIGoogle Maps API

Web version utilizes JavaScriptWeb version utilizes JavaScript Versions also available for Android and iOS Versions also available for Android and iOS


Google Maps API, cont.Google Maps API, cont.

No cost usage limits and restrictionsNo cost usage limits and restrictions Service must be freely and publicly accessible to end Service must be freely and publicly accessible to end

usersusers 25,000 map loads per day 25,000 map loads per day 2,500 Geocoding requests per day2,500 Geocoding requests per day 2,500 Directions requests per day2,500 Directions requests per day

Google Maps API for Business available for Google Maps API for Business available for those that do not meet, or exceed these those that do not meet, or exceed these requirementsrequirements


Google Maps API, cont.Google Maps API, cont.

Obtain API KeyObtain API Key Instructions to create your API key:Instructions to create your API key:

• Visit the APIs Console at Visit the APIs Console at https://https://code.google.com/apis/consolecode.google.com/apis/console and log in with your and log in with your Google Account. Google Account.

• Click the Click the ServicesServices link from the left-hand menu. link from the left-hand menu. • Activate the Activate the Google Maps API v3Google Maps API v3 service. service. • Click the Click the API AccessAPI Access link from the left-hand menu. link from the left-hand menu.

Your API key is available from the Your API key is available from the API AccessAPI Access page, in the page, in the Simple API AccessSimple API Access section. Maps section. Maps API applications use the API applications use the Key for browser appsKey for browser apps. .


Declaring Your Application as Declaring Your Application as HTML5HTML5

<!DOCTYPE html><!DOCTYPE html>

First line of documentFirst line of document Tells browser how to handle document Tells browser how to handle document


Loading Google Maps APILoading Google Maps API

<script type="text/javascript" <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script></script>

The URL contained in the script tag is the location of a The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API definitions you need for using the Google Maps API

The key parameter contains your application's API key The key parameter contains your application's API key The sensor parameter indicates whether this application The sensor parameter indicates whether this application

uses a sensor (such as a GPS locator) to determine the uses a sensor (such as a GPS locator) to determine the user's location user's location


Map DOM ElementMap DOM Element

<div id="map_canvas"></div><div id="map_canvas"></div>

Creates a named Creates a named divdiv element and obtains element and obtains a reference to this element in the a reference to this element in the browser's document object model (DOM) browser's document object model (DOM)

A A divdiv element defines a section of a element defines a section of a webpagewebpage


CSSCSS

<style type="text/css"> <style type="text/css">

html { height: 100% } html { height: 100% }

body { height: 100%; margin: 0; padding: 0 } body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 95%; width: 75% } #map_canvas { height: 95%; width: 75% }

</style></style> Indicates that the map container Indicates that the map container <div><div> (named (named

map-canvas) should take up 95% of the height map-canvas) should take up 95% of the height and 75% of the width of the HTML body and 75% of the width of the HTML body


Map OptionsMap Options

var myOptions = { var myOptions = {

center: new google.maps.LatLng(41.638026,-87.48000), center: new google.maps.LatLng(41.638026,-87.48000),

zoom: 12, zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.ROADMAP

};};

Creates a map options object to contain Creates a map options object to contain map initialization variables map initialization variables


Map Options: Latitudes and Map Options: Latitudes and LongitudesLongitudes

center: new google.maps.LatLng(41.638026,-87.48000)center: new google.maps.LatLng(41.638026,-87.48000)

Centers the map on a specific pointCenters the map on a specific point Creates a Creates a LatLngLatLng object to hold this object to hold this

location by passing the location's location by passing the location's coordinates in the order { latitude, coordinates in the order { latitude, longitude } longitude }

Must be in decimal degreesMust be in decimal degrees


Map Options: Zoom LevelsMap Options: Zoom Levels

zoom: 12zoom: 12

Initial resolution at which to display the Initial resolution at which to display the mapmap

0 corresponds to a map of the Earth fully 0 corresponds to a map of the Earth fully zoomed outzoomed out

Higher zoom levels zoom in at a higher Higher zoom levels zoom in at a higher resolution resolution


Map Options: Map TypeMap Options: Map Type

mapTypeId: google.maps.MapTypeId.ROADMAPmapTypeId: google.maps.MapTypeId.ROADMAP

ROADMAP displays the normal, default 2D tiles of ROADMAP displays the normal, default 2D tiles of Google Maps. Google Maps.

SATELLITE displays photographic tiles. SATELLITE displays photographic tiles. HYBRID displays a mix of photographic tiles and a tile HYBRID displays a mix of photographic tiles and a tile

layer for prominent features (roads, city names). layer for prominent features (roads, city names). TERRAIN displays physical relief tiles for displaying TERRAIN displays physical relief tiles for displaying

elevation and water features (mountains, rivers, etc.). elevation and water features (mountains, rivers, etc.).


Map ObjectMap Objectvar map = new var map = new

google.maps.Map(document.getElementById("map_canvas"),google.maps.Map(document.getElementById("map_canvas"),myOptions);myOptions);

MapMap class is the JavaScript class that class is the JavaScript class that represents a map represents a map

Creates a new instance of this class using the Creates a new instance of this class using the JavaScript JavaScript newnew operator operator

Obtains a reference to this element via the Obtains a reference to this element via the document.getElementById()document.getElementById() method. method.

This code defines a variable, This code defines a variable, mapmap, and assigns , and assigns that variable to a new Map object, also passing that variable to a new Map object, also passing in options defined within the in options defined within the mapOptionsmapOptions object object


Loading the MapLoading the Map

<body onload="initialize()"><body onload="initialize()">

Places map on the page after the page has fully Places map on the page after the page has fully loadedloaded

Executes the function, Executes the function, initialize()initialize(),, which which constructs the Map object once the constructs the Map object once the <body><body> element of the HTML page receives an onload element of the HTML page receives an onload eventevent

The The bodybody tag's tag's onloadonload attribute is an example attribute is an example of an event handler of an event handler


Putting It All TogetherPutting It All Together

HTML ShellHTML Shell CSS code located in HTML CSS code located in HTML <style>… <style>…

</style></style> element element JavaScript code located in HTML JavaScript code located in HTML

<script>…</script><script>…</script> elements elements Map created with HTML Map created with HTML <div>…</div><div>…</div>

elementelement


Simple Code SSSimple Code SS


Simple HTML SSSimple HTML SS


Maps API – LayersMaps API – Layers Your Data:Your Data:

KML layerKML layer Fusion Tables layerFusion Tables layer Heatmap layerHeatmap layer GeoRSS layerGeoRSS layer

Google Data:Google Data: Traffic layerTraffic layer Transit layerTransit layer Bicycling LayerBicycling Layer Weather and Cloud layerWeather and Cloud layer Panoramio layerPanoramio layer


Maps API – Layers (cont’d)Maps API – Layers (cont’d)

To add a layer to a map, you only need to call To add a layer to a map, you only need to call setMap()setMap(),, passing it the map object : passing it the map object :

trafficLayer.setMap(map);trafficLayer.setMap(map);

To remove a layer, call To remove a layer, call setMap()setMap(),, passing passing nullnull : :

trafficLayer.setMap(null);trafficLayer.setMap(null);


Layer Code - KMLLayer Code - KML

var url1 = var url1 = "https://sites.google.com/site/hsdgis/CityBoundary.kml";"https://sites.google.com/site/hsdgis/CityBoundary.kml";

var BoundaryLayer=new google.maps.KmlLayer(url1);var BoundaryLayer=new google.maps.KmlLayer(url1);

BoundaryLayer.setMap(map);BoundaryLayer.setMap(map);

KML can be stored locally or anywhere on the webKML can be stored locally or anywhere on the web Multiple (>10) KML layers can be displayed on a single mapMultiple (>10) KML layers can be displayed on a single map


Layer Code – Fusion TablesLayer Code – Fusion Tables

var ZoningLayer=new google.maps.FusionTablesLayer({var ZoningLayer=new google.maps.FusionTablesLayer({query: {query: {

select: 'geometry',select: 'geometry',from: from: '1BVsTFSd16ggYS7BMM2NJ1r5Ua5j2w6NIzX6a_zk''1BVsTFSd16ggYS7BMM2NJ1r5Ua5j2w6NIzX6a_zk'

}}});});

ZoningLayer.setMap(map);ZoningLayer.setMap(map);

Selecting the name of the column in the Fusion Table that contains Selecting the name of the column in the Fusion Table that contains geographic informationgeographic information

Long cryptic string is the ID of the Fusion TableLong cryptic string is the ID of the Fusion Table 5 Fusion Tables can be displayed on a single map 5 Fusion Tables can be displayed on a single map



Layers HTML SSLayers HTML SS



API Map MethodsAPI Map Methods

getCenter() getCenter() getBounds() getBounds() setCenter(setCenter(latlng:LatLnglatlng:LatLng) ) setMapTypeId(mapTypeId:setMapTypeId(mapTypeId:MapTypeId|stringMapTypeId|string)) setZoom(zoom:setZoom(zoom:numbernumber)) fitBounds(bounds:fitBounds(bounds:LatLngBoundsLatLngBounds))

Example:Example: map.setZoom(12);map.setZoom(12);


API Map OverlaysAPI Map Overlays

MarkersMarkers PolylinesPolylines PolygonsPolygons Ground OverlaysGround Overlays Info WindowsInfo Windows


API Map MarkersAPI Map Markers

Markers identify locations on the map Markers identify locations on the map By default, they are represented with a By default, they are represented with a

standard icon, a red pinstandard icon, a red pin Example:Example:

var marker = new google.maps.Marker({var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363, 131.044), position: new google.maps.LatLng(-25.363, 131.044), map: map map: map

});});


Demonstration: API ComplexDemonstration: API Complex

HammondGISHammondGIS


JavaScript TipsJavaScript Tips

Case SensitiveCase Sensitive Every opening bracket, brace, or Every opening bracket, brace, or

parenthesis must have a corresponding, parenthesis must have a corresponding, closing counterpartclosing counterpart

Any variables declared within a function Any variables declared within a function are “local” and can only be used within are “local” and can only be used within that functionthat function

““Global” variables can be used in any Global” variables can be used in any function function


Apps for Extra FunctionalityApps for Extra Functionality

Google SitesGoogle Sites Used for file storageUsed for file storage

Google SpreadsheetsGoogle Spreadsheets Used as a catalog for layersUsed as a catalog for layers

Google ChartsGoogle Charts Used to create custom symbology and Used to create custom symbology and

labelinglabeling Google AnalyticsGoogle Analytics

Used to track the use of your websiteUsed to track the use of your website


Websites for ReferenceWebsites for Reference W3SchoolsW3Schools

http://www.w3schools.com/http://www.w3schools.com/ Google KML TutorialGoogle KML Tutorial

https://https://developers.google.com/kml/documentation/kml_tutdevelopers.google.com/kml/documentation/kml_tut Google Fusion TablesGoogle Fusion Tables

http://http://support.google.com/fusiontablessupport.google.com/fusiontables// Google Maps API TutorialGoogle Maps API Tutorial

https://developers.google.com/maps/documentation/javascript/tutorialhttps://developers.google.com/maps/documentation/javascript/tutorial Google DeveloperGoogle Developer

https://developers.google.com/https://developers.google.com/ Google Maps Marker SymbolsGoogle Maps Marker Symbols

https://https://www.google.com/fusiontables/DataSource?snapidwww.google.com/fusiontables/DataSource?snapid=99003=99003 Shape EscapeShape Escape

http://http://www.shpescape.comwww.shpescape.com// HammondGISHammondGIS

http://www.gohammond.com/web/maps/main/HammondGIS.htmlhttp://www.gohammond.com/web/maps/main/HammondGIS.html


Questions?Questions?


Contact InfoContact InfoBecky McKinley, GISP

GIS [email protected]

(219) 853-6413 Ext. 516Fax: (219) 853-6321

Tom RamkerGIS Technician

[email protected](219) 853-6413 Ext. 535

Fax: (219) 853-6321

Hammond Sanitary District5143 Columbia Avenue

Hammond, Indiana 46327