gis 2096 introduction to web mapping & the www google maps & google mashups
TRANSCRIPT
![Page 1: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/1.jpg)
GIS 2096
Introduction to Web Mapping&
The WWWGoogle Maps
& Google Mashups
![Page 2: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/2.jpg)
The World Wide Web
• Clients• Servers• Communication Networks
Client
Server
![Page 3: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/3.jpg)
• Applications that run on computers• Rely on servers for
– Files– Devices– Processing power
• Examples:– E-mail– Web Browser– FTP– ArcMap, QGIS
Clients
Clients are Applications
![Page 4: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/4.jpg)
Servers
• Computers or processes that manage network resources– Disk drives (file servers)– Printers (print servers)– Web content (network servers)
• Example: Database Server– A computer system that processes database
queries
Servers Manage Resources
![Page 5: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/5.jpg)
Client–Server Relationship
Process takes place on the server and the client
• Servers– Store and protect data– Process requests from clients
• Clients– Make requests– Format data on the desktop
Client-Server Computing Optimizes Computing Resources
![Page 6: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/6.jpg)
What is a Google Map?Maps.google.com - interactive street, satellite, terrain maps and more.
![Page 7: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/7.jpg)
What is Google Maps?An enormous amount of searchable geographic information (gazetteer)
A way of organizing the worlds information geographically
![Page 8: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/8.jpg)
What is a Google Map?Google MyMaps – customize maps with user created enhancements.
![Page 9: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/9.jpg)
Is Google Maps FOSS?• No• It is free of charge
![Page 10: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/10.jpg)
What is Google Maps - summary• A web mapping service, free for non-commercial use
that contains:– Detailed global basemaps: streets, satellite imagery, and
terrain.– Useful services such as address and place locating by
searching against an information rich gazetteer.– Ability to overlay a wide variety of map layers, (weather,
traffic) from static or dynamic sources.– Map layer creation and light customization through
functionality through MyMaps.– An API that allows for embedding and extensive
customization.
![Page 11: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/11.jpg)
Application Programming Interface (API)
• API - An interface to a software program that allows users to interact and customize it.– Determines the vocabulary and calling conventions a
programmer uses to employ the software services.– Usually based on an existing programming languages
(C, .NET, VisualBasic, Java, javascript)– Many desktop and web software applications have API’s– Google Maps API uses javascript
![Page 12: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/12.jpg)
Google Maps API• Allows embedding of a Google map into one’s own web
page using javascript.
• Free to use, on any website that is provided free of charge to others.
• Relatively gentle learning curve.
• Highly customizable and easily transferrable.
• Evolving - new functionality consistently being added.
![Page 13: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/13.jpg)
What is a Mashup• A web page or application that combines data or
functionality from two or more external sources to create a new service.
Therefore:MyWebPage + Google Map = mashup
Even better:MyWebPage + Google Map + Other web service(s)
![Page 14: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/14.jpg)
Google Map mashups examples: embeddable and customizable
![Page 15: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/15.jpg)
Google Maps, Mashups, and Google EarthDifferences and similarities
• Google Maps & MyMaps– A free web application (no software installation necessary)– 2 dimensional map view, with street, satellite, terrain basemaps– Data creation possible (points, lines, polygons), reads limited kml.– A selected set of map overlays and functions available.– Specific maps can be saved and shared easily on the web.
• Google Maps Mashups– A free service allowing one to embed a Google Map into a web page.– 2 dimensional map view, with street, satellite, terrain basemaps.– Highly customizable to include everything in MyMaps and more.– Customization requires using javascript and HTML.– Requires access to a web-server to publish to the web.
• Google Earth– A free desktop application (downloading and installation necessary).– 3 dimensional map view with satellite basemap, many map overlay layers, and a rich set
of visualization tools.– Data creation possible (points, lines, polygons).– Complex kml creation is possible.
![Page 16: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/16.jpg)
Google Maps, Mashups, and Google EarthWhich one to use?
• Google Maps– Locating, measuring, or learning about the geography of a place.– If you want to share a map.– Communicate geographic information quickly.
• Google Maps Mashups– Used to embed a map into a new or existing website.– Create interactive web maps for your users.
• Google Earth– Visualizing terrain, 3d buildings, historical imagery, and access to many
thematic map layers.– Virtual tour creation (movies)– Small amounts of data collection, geocoding, and image geo-referencing.
![Page 17: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/17.jpg)
Axioms to follow for fledgling Google mappers
• If MyMaps or an existing mashup can be used to accomplish your web mapping goal, use it.
• In your internet browser, use “View > Page Source” to learn what code is used to produce a specific website.
• When coding, pay attention to every character.
• Comment your code thoroughly.
• Organize, document, and backup your maps and data.
• Other web map mashup API’s exist (Yahoo!, Microsoft, OpenLayers). If Google’s API doesn’t serve your needs, explore the others.
![Page 18: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/18.jpg)
19
Web Mashup Definitions
• Mashup: A web application that performs browser-side integration of content or services from multiple sources
• Provider: site the provides content to the mashup
![Page 19: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/19.jpg)
Markup languages Markup languages –
• Hyper Text Markup Language (HTML), Extensible Markup Language (XML), Keyhole Markup Language (KML), and many more…
• Text encoding schemes used to create and format a web document.• Use tags contained within brackets <> to define formatting that web
browsers read.
Markup language code sample:
<html><body><p><b>This a new paragraph of text that is bold</b></p><p><big>This text is new paragraph of text that is big</big></p><i>This text is italic</i></body></html>
![Page 20: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/20.jpg)
HTML
•HyperText Markup Language
•What you create a web page in
•Consists of specific sections
•Content described by tags
![Page 21: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/21.jpg)
HTML Tags
Syntax<TAG> content </TAG>
Standard Elements<html>...</html> Specifies the type of document<head>...</head> Title, Metadata, Scripts etc.<body>...</body> The main content of the page
Comments<!-- A Comment -->
![Page 22: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/22.jpg)
A Basic HTML Page
<html>
<head> <title> favorites / bookmark title goes here </title></head>
<body bgcolor="white" text="blue">
<h1> My first page </h1>
This is my first web page and I can say anything I want in here - I do that by putting text or images in the body section - where I'm typing right now :)
</body>
</html>
![Page 23: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/23.jpg)
HTML Tags
A Few Common HTML Tags<title>…</title> Web page title – Head section<p>…</p> Paragraph – basic text in Body section<a>…</a> Anchors – hyperlinks<script>...</script> To embed a script – e.g. javascript<table>…</table> Creates a table<tr>…</tr> Creates a table row<td>…</td> Creates and populates a table cell<div>…</div> Divide document into sections
![Page 24: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/24.jpg)
Basics of an HTML page
The Head section:•Where you define the title of your web page•Include metadata for your page so search engines like Google and Yahoo can find your page•Style sheets (CSS) and scripts (javascript)<head><title> Blah blah blah </>title<meta…><script type=“text/javascript”> …</script></head>
![Page 25: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/25.jpg)
Basics of an HTML pageThe Body section:Where you put most of your content
![Page 26: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/26.jpg)
Javascript Javascript: Typically a “client side” programming language used primarily in
web browsers Used to provide dynamic content to a web page
• Uses variables, loops, and functions to generate output on the web.• Allows for the development of enhanced user interfaces and dynamic
websites.
Javascript code sample (Adds a placemark on a Google map)
function createMarker(point,html) {var marker = new GMarker(point);GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });return marker; }var point = new GLatLng(35.65654,-106);var marker = createMarker(point,’Info in Window’);gmap.addOverlay(marker);
![Page 27: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/27.jpg)
Javascript<html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}//Comment</script></head>
<body onload="message()">
<p>We usually use the head section for functions (to be sure that the functions are loaded before they are called).</p>
</body></html>
http://www.w3schools.com/JS/JS_examples.asp
![Page 28: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/28.jpg)
Explanations of the Basic Google Maps Code
![Page 29: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/29.jpg)
Google Map Code
This first javascript is a critical script element. It’s src attribute points to the location of the API on Google’s server, and your key is passed as a parameter.
GoogleMaps use javascript to call the Google server and to provide specific parameters for your mashup
![Page 30: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/30.jpg)
Google Map Code
![Page 31: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/31.jpg)
Google Resources
Google Maps API Sign Uphttp://code.google.com/apis/maps/signup.html
Google Maps API Documentationhttp://code.google.com/apis/maps/documentation/introduction.html
Google App Enginehttp://code.google.com/appengine/
Google Map Bookshttp://www.googlemapsbook.com/
Map Builderhttp://www.mapbuilder.net/
![Page 32: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/32.jpg)
35
Mashup Examples
• housingmaps.com• Wii Finder• Clockr• popurls.com• Yahoo vs. Google• Google Gadgets
![Page 33: GIS 2096 Introduction to Web Mapping & The WWW Google Maps & Google Mashups](https://reader036.vdocument.in/reader036/viewer/2022062321/56649e035503460f94aeef18/html5/thumbnails/33.jpg)
Lab 6
Open FirefoxGo to http://maps.cga.harvard.edu
Click on Google Maps tutorials