Transcript Interactive Web Mapping with Google Maps and Google Apps

Interactive Web Mapping
with 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
[email protected]
Tom Ramker
GIS Technician
[email protected]
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
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


Minimal programming skills


HTML, JavaScript, CSS
Newer generation internet browser with web
development tools


Wordpad, Notepad, etc.
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
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 conversion tools 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
Sample Javascript SS
Hammond Sanitary District
Google Maps API
 API


– Application Programming Interface
Allows different software components to
communicate with each other
Library that includes tools, variables, data
structures, object classes, etc.
 Google


Maps API
Web version utilizes JavaScript
Versions also available for Android and iOS
Hammond Sanitary District
Google Maps API, cont.

No cost usage limits and restrictions





Service must be freely and publicly accessible to end
users
25,000 map loads per day
2,500 Geocoding requests per day
2,500 Directions requests per day
Google Maps API for Business available for
those that do not meet, or exceed these
requirements
Hammond Sanitary District
Google Maps API, cont.
 Obtain API

Key
Instructions 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
<!DOCTYPE html>
 First
line of document
 Tells browser how to handle document
Hammond Sanitary District
Loading Google Maps API
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

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
<div id="map_canvas"></div>
 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
CSS
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 95%; width: 75% }
</style>
 Indicates that the map container <div> (named
map-canvas) should take up 95% of the height
and 75% of the width of the HTML body
Hammond Sanitary District
Map Options
var myOptions = {
center: new google.maps.LatLng(41.638026,-87.48000),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
 Creates
a map options object to contain
map initialization variables
Hammond Sanitary District
Map Options: Latitudes and
Longitudes
center: new google.maps.LatLng(41.638026,-87.48000)
 Centers
the map on a specific point
 Creates a LatLng object to hold this
location by passing the location's
coordinates in the order { latitude,
longitude }
 Must be in decimal degrees
Hammond Sanitary District
Map Options: Zoom Levels
zoom: 12
 Initial
resolution at which to display the
map
 0 corresponds to a map of the Earth fully
zoomed out
 Higher zoom levels zoom in at a higher
resolution
Hammond Sanitary District
Map Options: Map Type
mapTypeId: google.maps.MapTypeId.ROADMAP

ROADMAP displays the normal, default 2D tiles of
Google Maps.
 SATELLITE displays photographic tiles.
 HYBRID displays a mix of photographic tiles and a tile
layer for prominent features (roads, city names).
 TERRAIN displays physical relief tiles for displaying
elevation and water features (mountains, rivers, etc.).
Hammond Sanitary District
Map Object
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Map class is the JavaScript class that
represents a map
 Creates a new instance of this class using the
JavaScript new operator
 Obtains a reference to this element via the
document.getElementById() method.
 This code defines a variable, map, and assigns
that variable to a new Map object, also passing
in options defined within the mapOptions object
Hammond Sanitary District
Loading the Map
<body onload="initialize()">

Places map on the page after the page has fully
loaded
 Executes the function, initialize(), which
constructs the Map object once the <body>
element of the HTML page receives an onload
event
 The body tag's onload attribute is an example
of an event handler
Hammond Sanitary District
Putting It All Together
 HTML Shell
code located in HTML <style>…
</style> element
 JavaScript code located in HTML
<script>…</script> elements
 Map created with HTML <div>…</div>
element
 CSS
Hammond Sanitary District
Simple Code SS
Hammond Sanitary District
Simple HTML SS
Hammond Sanitary District
Maps API – Layers

Your Data:





KML layer
Fusion Tables layer
Heatmap layer
GeoRSS layer
Google Data:





Traffic layer
Transit layer
Bicycling Layer
Weather and Cloud layer
Panoramio layer
Hammond Sanitary District
Maps API – Layers (cont’d)

To add a layer to a map, you only need to call
setMap(), passing it the map object :
trafficLayer.setMap(map);

To remove a layer, call setMap(), passing null :
trafficLayer.setMap(null);
Hammond Sanitary District
Layer Code - KML
var url1 =
"https://sites.google.com/site/hsdgis/CityBoundary.kml";
var BoundaryLayer=new google.maps.KmlLayer(url1);
BoundaryLayer.setMap(map);

KML can be stored locally or anywhere on the web
 Multiple (>10) KML layers can be displayed on a single map
Hammond Sanitary District
Layer Code – Fusion Tables
var ZoningLayer=new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1BVsTFSd16ggYS7BMM2NJ1r5Ua5j2w6NIzX6a_zk'
}
});
ZoningLayer.setMap(map);



Selecting the name of the column in the Fusion Table that contains
geographic information
Long cryptic string is the ID of the Fusion Table
5 Fusion Tables can be displayed on a single map
Hammond Sanitary District
Hammond Sanitary District
Layers HTML SS
Hammond Sanitary District
Hammond Sanitary District
API Map Methods
 getCenter()
 getBounds()
 setCenter(latlng:LatLng)

setMapTypeId(mapTypeId:MapTypeId|string)
 setZoom(zoom:number)
 fitBounds(bounds:LatLngBounds)
Example:
Hammond Sanitary District
map.setZoom(12);
API Map Overlays
 Markers
 Polylines
 Polygons
 Ground
Overlays
 Info Windows
Hammond Sanitary District
API Map Markers
 Markers
identify locations on the map
 By default, they are represented with a
standard icon, a red pin
 Example:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363, 131.044),
map: map
});
Hammond Sanitary District
Demonstration: API Complex
 HammondGIS
Hammond Sanitary District
JavaScript Tips
 Case
Sensitive
 Every opening bracket, brace, or
parenthesis must have a corresponding,
closing counterpart
 Any variables declared within a function
are “local” and can only be used within
that function
 “Global” variables can be used in any
function
Hammond Sanitary District
Apps for Extra Functionality
 Google

Used for file storage
 Google

Spreadsheets
Used as a catalog for layers
 Google

Sites
Charts
Used to create custom symbology and
labeling
 Google Analytics

Used to track the use of your website
Hammond Sanitary District
Websites for Reference
W3Schools


http://www.w3schools.com/
Google KML Tutorial


https://developers.google.com/kml/documentation/kml_tut
Google Fusion Tables


http://support.google.com/fusiontables/
Google Maps API Tutorial


https://developers.google.com/maps/documentation/javascript/tutorial
Google Developer


https://developers.google.com/
Google Maps Marker Symbols


https://www.google.com/fusiontables/DataSource?snapid=99003
Shape Escape


http://www.shpescape.com/
HammondGIS


http://www.gohammond.com/web/maps/main/HammondGIS.html
Hammond Sanitary District
Questions?
Hammond Sanitary District
Contact Info
Becky McKinley, GISP
GIS Manager
[email protected]
(219) 853-6413 Ext. 516
Fax: (219) 853-6321
Tom Ramker
GIS Technician
[email protected]
(219) 853-6413 Ext. 535
Fax: (219) 853-6321
Hammond Sanitary District
5143 Columbia Avenue
Hammond, Indiana 46327
Hammond Sanitary District