What is a Mashup? Mashups in Planning? How to Create Your Own Mashup? Issues with Mashups?
(Tags: api, app, data, demo, division, education, esri, georeference, google, howto, hybrid, image, javascript, location, mashable, raster, technology, tile, vector, web2)
Boost Fertility New Invention Ups Success Rates.pdf
GIS TECH 101 - Mapping Mashups
1. Technology Division
of the American
Planning Association
(APA):
Webinar Series –
TECH 101 - Mashups
for Planning
(February 2009)
Harsh Prakash, Vice-Chair, and Jennifer Evans-
Cowley, Chair
Harsh Prakash and Jennifer Evans-Cowley. February 2009 1
2. Mashups for Planners
http://www.planning.org/divisions/tech/education/
• For technical support for this event
call 800.263.6317
• CM credits to be posted on APA
website in near future, go to
http://www.planning.org/cm
• You must be registered individually
for this event to claim CM credits. If
you are not individually registered
contact jocelyn@placematters.org
http://techdivisionwebinars.eventbrite.com/
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 2
3. Mashups for Planners
Agenda (90 minutes):
What is a Mashup?
Mashups in Planning
How to Create Your Own Mashup
Issues with Mashups
Harsh Prakash and Jennifer Evans-Cowley
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 3
4. What is a Mashup?
• Is a web application that combines data
from multiple sources into a single
integrated tool.
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 4
5. Data Mashup
gapminder.org
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 5
6. Mapping Mashup
chicagocrime.org
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 6
14. Context: Web 2.0 …sharing
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 14
15. Context: Web 2.0 …domesticating
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 15
16. Context: Web 2.0 …monetizing
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 16
17. Disruptive GIS: Outside of Traditional Industry
MapQuest
Microsoft
Garmin
Google
Autodesk
Intergraph Trimble
Yahoo
ERDAS ESRI
NAVTEQ
(HP)
MapInfo
Harsh Prakash and Jennifer Evans-Cowley. February 2009 17
18. Mashup is where the action is
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 18
19. Planning Mashup
rottenneighbor.com
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 19
20. Planning Mashup
walkscore.com
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 20
21. Planning Mashup
walkscore.com
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 21
22. Planning Mashup
walkscore.com
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 22
23. Planning Mashup
City of Burbank (Planning Projects Map)
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 23
24. Planning Mashup
New Orleans Demolitions
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 24
25. Planning Mashup
Smart Growth
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 25
26. Planning Mashup
Smart Growth
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 26
27. Planning Mashup
virtual.org
(JC)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 27
28. Planning Mashup
Other Interesting Mashups
Track Storms http://stormadvisory.org/map/atlantic
Map News http://81nassau.com/apnews/
http://www.lkozma.net/wpv/
Find Real Estate http://www.housingmaps.com/
http://www.wikimapia.org/
See New Pictures http://flickrvision.com/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 28
29. Planning Mashup
Other Interesting Mashups
Track Fires
http://www.firelocator.net/
Uses MapInfo + Microsoft Silverlight + Microsoft Virtual Earth
(Not all mashups are Google or ESRI-based)
* As of 2008, it allowed viewing of
KML/KMZ, GeoRSS, GPS/GPX files
Find Representatives
http://prototype.nytimes.com/represent/
Uses PostgreSQL + PostGIS (“opensource”)
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 29
30. Mashup Basics …combines data from several sources
• Software company makes web application
• Offers API to users to hook-into its application
• Users use that API and mix it with other companies APIs, thus
creating a mashup
Simple Steps
• User request
• Maps API and Key Slides will be uploaded later
• Webserver response
• Main JavaScript
• Legend and Copyright Images
• Map Tile
• Marker and Shadow Images
• Marker is plotted and geocoding done (if any)
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 30
31. Mashup How To
Step 1 of 3 Register for Google Maps API key for your website
www.website.com at http://code.google.com/apis/maps/signup.html
Step 2 of 3 Choose less restrictive domain name
http://website.com/ instead of http://www.website.com/mashup/ or
sub-domain
Step 3 of 3 Embed starter code from Google‟s website and edit
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/JavaScript"></script>
<script type="text/JavaScript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:500px;height:300px"></div>
</body>
</html>
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 31
32. Mashup How To
OR
Use Google My Maps
Simple Steps
• Sign-In
• Decide whether public or unlisted map
• Select placemark/marker
• Add placemark/marker + info balloon + photo URL + embed video
- View in Google Earth via KML
- Can add polyline/polygon
- Can also add Google Mapplet i.e. choose from a directory of
“pre-fabricated” map content >> “Save to My Maps”
- Can also save placemark/marker from another Google
Mapplet for later
Tip! Best to first setup profile page for your planning project!
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 32
33. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 33
34. Mashup How To
OR
Use Google Mapplet/Google Gadget
Mini applications to overlay custom data
- XML webpage: You create XML, Google will fetch it inside
<iframe></iframe>
- Can add XHTML, JavaScript and Flash
- Can map data from Google‟s Spreadsheet Gadget
-
http://code.google.com/apis/maps/documentation/mapplets/basics.h
tml
- Scratch Pad
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 34
35. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 35
36. Mashup How To: Demonstration
Submit Google Mapplet
Step 1 of 2 Convert Google Mashups HTML to XML (embed inside XML)
Step 2 of 2 Submit XML to Google
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 36
37. Mashup How To
OR
Use Google My MapMaker
Similar to OpenStreetMaps
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 37
38. Mashup How To
OR
Use Google Spreadsheet Mapper
Go from Excel to Google Maps, Google Spreadsheet to KML
- Publish starter spreadsheet >>
Copy and paste URL >>
Generate KML NetworkLink >>
Paste KML NetworkLink in Google Earth
- Can also use “pre-fabricated” spreadsheet templates
- Google Spreadsheet Mapper inside Google Docs. Also
ZOHO.
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 38
39. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 39
40. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 40
41. Mashup How To
OR
Use Google Mashup Editor
“Richer” v “More Programming”
- Log-in >>
Text panel >>
Enter and Fetch Feed URL >>
Save and Name Project >>
Publish at googlemashups.com >>
Submit as Gadget (iGoogle …much like Google Dashboard Widgets or
Yahoo Widgets or Apple‟s Dashboard Widgets “mini-applications”)
- Also accept and save user-input:
User can read and write to feed (display written addresses on
mashup map)
<gm:map id=“” data=“” geolocationhref=“” />
…to add Google Maps to your mashup
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 41
42. Mashup How To
OR
Use Google Charts
“Full Circle”
http://chart.apis.google.com/chart?ch
t=t&chs=440x220&chd=s:_&chtm=w
orld
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 42
43. Mashup How To: Demonstration
http://chart.apis.google.com/chart?chco=f5f5f5,edf0d4,6c9642,365e24,1339
0a&chd=s:fSGBDQBQBBAGABCBDAKLCDGFCLBBEBBEPASDKJBDD9BHHEAAC
AC&chf=bg,s,eaf7fe&chtm=usa&chld=NYPATNWVNVNJNHVAHIVTNMNCNDNE
LASDDCDEFLWAKSWIORKYMEOHIAIDCTWYUTINILAKTXCOMDMAALMOMNCA
OKMIGAAZMTMSSCRIAR&chs=440x220&cht=t
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 43
44. Mashup How To
OR
Use Yahoo Pipes
- Mashup (KML etc) Feeds >>
Output (KML etc) Feed
- Select and drag module >>
Type website to auto-fetch feed >>
Apply filter (if any) >>
Check-as-you-go output >>
End by connecting to Pipe Output (Name, Save and Clone)
- Pipes Editor GUI:
Much like UNIX pipe “|” to pass output from 1 command to another
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 44
45. Mashup How To
OR
Use Yahoo Map Mixer
- Georeference Map Images
http://maps.yahoo.com/mapmixer
- Upload map image >>
Align (georeference) map image (Adjust Opacity)
Use MapCruncher for Virtual Earth (Desktop App)
- Input: JPG, PNG, PDF for Google Maps
http://www.bdcc.co.uk/GoogleCrunch/Crunch.htm
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 45
46. Mashup How To
OR
Use other tools
- Microsoft Live: Virtual Earth For Government
http://virtualearth4gov.spaces.live.com/
http://dev.live.com/virtualearth/sdk/
http://msdn.microsoft.com/en-us/library/aa905677.aspx
- OpenLayers
http://openlayers.org/
http://www.openstreetmap.org/
http://www.openaerialmap.org/
- Others
http://www.weogeo.com/
http://ning.com/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 46
47. Mashup How To: Demonstration
OR
Use many other tools
- FortiusOne‟s
http://www.geocommons.com/
http://www.mapufacture.com/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 47
48. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 48
49. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 49
50. Mashup How To: Demonstration
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 50
51. Mashup How To
OR
Even use ESRI!
- ESRI ArcWeb Services
http://www.esri.com/software/arcwebservices/
http://haygis.esri.com/samhsa2/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 51
52. Mashup How To
OR
Even use ESRI!
- Use ArcGIS
ArcGIS JavaScript Extension for the Google Maps API (below)
ArcGIS JavaScript Extension for Microsoft Virtual Earth
ArcGIS API for Flex
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 52
53. Mashup: KML
Create Dynamic KML
- Flexible:
Can limit placemarks/markers returned by Bounding Box
<httpQuery>…=…</httpQuery> // query XML
- Can similarly geocode:
Give address to Google geocoding server and get coordinates
(lat/lng) back for mapping
- Can also use OGR2OGR:
“opensource”
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 53
54. Mashup: KML
Create Dynamic KML
- Use XML Document Object Model (DOM)
“Object model for representing HTML/XML”
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<NetworkLink>
<name>PLANNING PROJECT</name>
<visibility>1</visibility>
<open>1</open>
<description>PLANNING PROJECT: LANDUSE</description>
<refreshVisibility>1</refreshVisibility>
<flyToView>1</flyToView>
<Link>
<href>http://www.website.com/kml/dynamic.php/py/pl/jsp/asp</href>
</Link>
</NetworkLink>
</kml>
>>
header('Content-Type: application/vnd.google-earth.kml+xml');
header('Content-Disposition: attachment; filename=“PLANNING PROJECT.kml"');
…
$sql = “…”;
print '<Placemark id="'.$sn.'">
<Style
id=“ID"><IconStyle><Icon><href>http://www.website.com/images/kml.png</href></Icon></IconStyle></
Style>
<name>'.$row[1].'</name>
<description><![CDATA[
<Point>
<coordinates>'.$row[2].'</coordinates>
</Point>
</Placemark>';
…
print '</Document></kml>';
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 54
55. Mashup: KML
Back Then
- Dynamically write XML result from database query and
overlay
<markers>
<marker sn="1" lat="34.15" lng="-116.9" jobtitle="GIS Planner" />
</markers>
>>
<markers>
<marker sn="1" company="Industrial Market" photo="100.jpg" lng="-80.2053578857"
lat="30.7660937162" />
</markers>
>>
…
var request = GXmlHttp.create();
request.open("GET", "/xml/gmaps_0.33814800_1219532073.xml", true); // unique filename
…
for (var i = 0; i < markers.length; i++) {
var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
parseFloat(markers[i].getAttribute("lat")));
var marker = createMarker(point, "[" + markers[i].getAttribute("sn") + "] " +
markers[i].getAttribute("jobtitle"));
map.addOverlay(marker);
}
…
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 55
56. Mashup: KML
Back Then
- Could also use TIGER Map Service by embedding dynamic
image from TIGER (not reliable):
Similar to Google Charts
<img src="http://tiger.census.gov/cgi-bin/mapgen?lon=-
96&lat=38&wid=50&ht=20&iwd=760&iht=760&on=GRID,states,counties,places&murl=http://www.website.com/txt/tms_0.33
814800_1219532073.txt" />
WHERE
*.txt: -116.9,34.15:smalldot:[1] GIS Planner
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 56
57. Mashup: KML
These Days
- Mashup
geoXml = new GGeoXml("http://www.website.com/kml/file.kml");
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 57
58. Mashup: KML
Polygons
- Convert to KML
- US states.kml ~ 500 KB
…
var geoXml = new GGeoXml("http://www.website.com/kml/states.kml");
...
map.addOverlay(geoXml);
…
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Folder>
<Placemark>
<MultiGeometry>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-161.3337853466,58.73324838220001,
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 58
59. Mashup: KML
Polygons
- Rasterize to image tiles:
Multiple layers below - zipcodes, states, regions and sciography
- Change opacity
Check out the sciography
…
// calculate tile name (see naming convention)
return "http://www.website.com/tile/states-tiles/"+f+".png";
…
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 59
60. Mashup: KML
Programmatically
- OGR (vector)/GDAL (raster):
OGR2OGR utility can be used to dump query results of database
from/to KML/GML which can then be used in mashup
ogr2ogr -f "PostgreSQL" "PG:dbname=postgis user=postgres password=planning host=localhost" project.gml
ogr2ogr –f “KML” *.kml *.shp
ogr2ogr –f “GML” *.gml *.shp
ogr2ogr -f “KML” *.kml PG:'host=server dbname=name' -sql "SELECT … FROM … WHERE state=„Virginia„”
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 60
61. Mashup: Virtual Globe
3D
- http://code.google.com/apis/earth/
- IE6 and IE7, and FF2 on Windows
- Turn existing Google Maps API into Google Earth API
…
function initiaize() {
…
map.setCenter(new GLatLng(30, -100), 10);
map.addMapType(G_SATELLITE_3D_Map);
map.addControl(new GHierarchicalMapTypeControl());
…
}
…
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 61
62. Mashup: IMS
Internet Mapping Server (IMS)
- Using addOverlay and GTileLayerOverlay
- Using GMapType and addMapType
- Also for Virtual Earth
function mapserver() {
// 5.2.0:
if(GBrowserIsCompatible()) {
var urlTemplate = 'http://localhost/cgi-bin/mapserv.exe?';
urlTemplate += 'map=/directory/file.map&';
urlTemplate += 'layers=layer1 layer2 layer3&';
urlTemplate += 'mode=tile&';
urlTemplate += 'tilemode=gmap&';
urlTemplate += 'tile={X}+{Y}+{Z}';
var myLayer = new GTileLayer(null,0,18,{ tileUrlTemplate:urlTemplate,
isPng:true, opacity:1.0 });
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(30, -100), 10);
map.addOverlay(new GTileLayerOverlay(myLayer));
}
}
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 62
63. Mashup: IMS
Web Mapping Service (WMS)
…
tileWMS.myBaseURL=“http://WMS_URL”;
…
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 63
64. Mashup: IMS
Web Mapping Service (WMS)
- Can bring in map from say, http://wms.jpl.nasa.gov/ into
Google Earth also
- Create an Image Overlay >>
Refresh >>
WMS Parameters >>
Choose service or add WMS URL >>
Add layer (Sunlight Feature)
- Inside:
Add placemarks, polygons, photographs etc, Georeference
photographs, Create Network Links, Create tours, Create 3D
models
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 64
66. Mashup Support Tools: Data
How to acquire GIS data for your mashup
- nationalatlas.gov, geodata.gov, usgs, nasa, noaa, census, w*s,
GNIS, census.gov, TIGER, clearinghouse
- google search
inurl:googlemashups.com (Google Mashup Editor)
filetype:rss intext:georss
filetype:kml intext:xmlns
filetype:gml intext:xmlns
inurl:service=wms inurl:request=getmap
inurl:service=wfs inurl:request=getfeature
inurl:service=wcs inurl:request=getcapabilities
How to geocode
- Google Maps API geocoder, Yahoo, batchgeocode.com, geocoder.us
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 66
67. Mashup Support Tools: Website
Google Tools
“Overlapping Functionalities”
- Google App (http://appspot.com/):
“Software as a Service (SaaS)” Cloud Computing Model (Easy to
start/scale server-based applications using Google‟s infrastructure.
Free to academia/get started)
-- Includes Google Sites (http://sites.google.com/):
Makes creating team-based website easy
Think “Backpack”. Improved from Google Pages
--- Signup and Signin
--- http://yourname.googlepages.com/
--- GUI templates as layouts to get started
- Google Web Toolkit:
Java >>
JavaScript/AJAX (compatible with all major browsers)
- Google Gears (Offline Use), Google Website Optimizer, Google Site,
Picasaweb (Similar to Yahoo Flickr)
- Google SketchUp
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 67
68. Mashup Support Tools: Website
Other Tools
- Microsoft Azure Cloud
http://www.microsoft.com/azure/
- Amazon Elastic Compute Cloud (Amazon EC2)
http://aws.amazon.com/ec2/
- ZOHO CloudSQL
http://cloudsql.zoho.com/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 68
69. Mashup Support Tools: PDF
GeoPDF
“Geo-aware PDF”
View attributes, measure areas in PDF. Originally from TerraGo.
- GeoPDF <<>> ArcGIS:
ArcGIS 9.3 + Adobe Acrobat 9 (GeoPDF integration. Also KML
integration)
Export feature class with labels to KML/GeoPDF
Overlay local *.shp on GeoPDF
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 69
70. Mashup Support Tools: Other
Many Other Tools
- Desktop GIS:
ESRI ArcGIS
MapInfo
QGIS http://qgis.org/
uDig
Manifold
- Data Mashup:
IBM‟s http://services.alphaworks.ibm.com/manyeyes/home
- Virtual Globe:
NASA World Wind
EarthBrowser http://www.earthbrowser.com/
Poly9 http://www.poly9.com/
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 70
71. Mashup: Issues and Debates
Pre-computed KMLs load faster than dynamic KMLs for obvious reasons, but
even with clusters, loading a lot of data can sometimes stretch mashups
beyond their user's patience (Microsoft Live first loads a simplified multi-part
version of KML). See “Mash-ups as Planning Tools” at
http://www.gisblog.org/map/mashup/2007/12/04/mashup/mash_ups_as_pl
anning_tools.geo
Clustering v Marker Manager
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 71
72. Mashup: Issues and Debates
Number of Time to
Number of Time to
Simple Load All
Simple Load All
Marker Marker
Marker Marker
Points Points *
Points Points *
1 Quickest
1 0.30
5 Quickest
5 0.34
10 Quick
10 0.39
50 Quick
50 0.69
100 Quick
100 1.92
500 OK
500 7.67
1,000 Delay
1,000 16.53
5,000 Significant
5,000 222.85
Delay
10,000 N/A
10,000 N/A
50,000 N/A
50,000 N/A
Dynamic KML
Pre-Computed KML
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 72
73. Mashup: Issues and Debates
Google‟s Terms of Service (ToS)
“Your service must be freely accessible to end users”.
“If you expect more than 500,000 pageviews/day, please contact us
in advance”.
“There is a limit of 50,000 geocode requests/day/Maps API Key (or 1
geocode request/1.73 seconds)”.
As of 2008, “Google Maps API Geocoder does not geocode addresses
in all international countries. The accuracy of geocoded locations is
returned in the accuracy parameters. Note that Google Maps API
geocoder and Google Maps geocoder rely on two different data
sources”.
“Pricing for Google Maps for Enterprise is based on the number of
page views and geocode requests handled by the Google Maps for
Enterprise API and starts at $10,000 per year”.
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 73
74. Mashup: Issues and Debates
Google Maps for Enterprise
http://www.google.com/enterprise/maps/
Allows the option to disable location-based advertising for an annual fee
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 74
75. Mashup: Issues and Debates
License/Privacy considerations
NeoGeo
Projection
Crowd-Sourcing:
In Google Maps, you can edit and move any placemark/marker after login
upto 200 mt
API Differences
- Google v Yahoo:
Yahoo includes 3 different APIs – simple maps (put points on Yahoo
Maps via geocoding), AJAX API (create customizable map on your
web page), Flash/Flex API
- Mapstraction JavaScript Library:
Abstracts away differences between most online maps
- Customization:
Custom icon etc
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 75
76. Mashup: Technical
Programming Basics
- Introduction to GIS/GPS data
-- Vector:
Point, line, polygon, multipatch, 2D/3D models
-- Raster
-- Metadata:
Data about data
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 76
77. Mashup: Technical
Programming Basics
- JavaScript
-- Data can be iterated
-- Object and method/action:
object.property.method()
getElementById(„plan‟).innerHTML=“project”;
- JSON and GeoJSON:
JavaScript Object Notation
{“type”: “Point”, “coordinates”: [5.0, 23.0]}
- XML:
Extensible Markup Language
-- Data as attribute/property can be iterated
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 77
78. Mashup: Technical
Programming Basics
- AJAX:
Asynchronous JavaScript And XML
-- XHR:
XMLHttpRequest
-- RPC:
Remote Procedure Call
- XSL:
Extensible Stylesheet Language
- CSS:
Cascading Style Sheet
-- Can be applied to any element
-- All elements create box- floated or boxed
- XHTML/HTML
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 78
79. Mashup: Technical
Programming Basics
- KML:
Keyhole Markup Language
Can also be used for news with geo component (mashup support)
Publish as compressed KMZ (KMZ = KML(text) + IMG(image in “files”
folder)
-- Not easy for RSS readers
-- KML >> GeoRSS
http://maps.live.com/
- Structure
-- Object
-- Feature
-- Geometry
-- Style
-- Link
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 79
80. Mashup: Technical
ArcGIS Data Types KML Elements
Point Features Placemarks
Or you can use a KML ground overlay to display a collection of
points as an image
Line Features Paths **
Or you can use a KML ground overlay to display a collection of paths
as an image.
Polygon Features Polygons **
Or you can use a KML ground overlay to display a collection of
polygons as an image.
Imagery Ground overlays
Map Documents Each layer can be displayed separately. Feature classes are
displayed as KML features. Imagery and raster as ground overlays.
Or the entire map can be displayed as an image by choosing to use
a KML ground overlay.
Map and Screen Graphics Example: logos, map legends, pictures, and so forth
KML Screen Overlays
Elements such as symbol legends, logos, and pictures can be
displayed using KML Screen Overlays.
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 80
81. Mashup: Technical
Programming Basics
- GML:
Geography Markup Language
<gml:coordinates>40 –80</gml:coordinates>
- GeoRSS:
For syndication - news with geo component (mashup support)
http://maps.google.com/maps?q=http://www.website.com/file.rss
<georss:point>40 -80</georss:point>
-- Easy for RSS readers. Now on any Google My Map, you
can click the RSS link to see its RSS/GeoRSS
-- Microsoft Virtual Earth:
Allows KML as RSS/GeoRSS subscription
http://maps.live.com/?mapurl=http://www.website.com/file.kml
http://maps.live.com/GeoCommunity.asjx?action=export&format=rss&mkt=
en-us&mapurl=http://www.website.com/file.kml
- RSS:
http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M5.xml
<geo:lat>40</geo:lat>
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 81
83. Mashup: Technical
Programming Basics
- Database
-- Oracle (Locator/Spatial), PostgreSQL/PostGIS, MySQL,
SQL Server
-- Spatial databases allow spatial SQL:
SELECT
…
FROM
…
WHERE
contains(container_feature, contained_feature);
-- Also Database >> AsKML (PostgreSQL/PostGIS)
-- SQLite (used by Google Gears)/SpatiaLite
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 83
84. Mashup: Technical
Section 508 Accessibility
"Section 508 requires Federal departments and agencies that
develop, procure, maintain, or use electronic and information
technology to ensure that Federal employees and members of the
public with disabilities have access to and use of information and
data, comparable to that of the employees and members of the
public without disabilities–unless it is an undue burden to do so.”
http://www.usability.gov/
http://www.section508.gov/
http://www.access-board.gov/508.htm
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 84
85. Mashup: Technical
Section 508 Accessibility
15 Steps to Website Accessibility:
Slides will be uploaded later
http://www.da.usda.gov/oo/target/subjects/508/reqs.html
1. Make sure all images, graphs, and other non-text items have a text equivalent.
2. Provide synchronized captions for all video, as well as captions or a transcript of audio content.
3. Do not use color as the only way to convey information.
4. You can use style sheets for layout, but the page must still make sense without them.
5. When using images as links, for example a drop down menu, make sure each link (as well as the overall
image) has alt text describing the destination. Avoid using server-side image maps. If you do use server-side
image maps, be sure to provide separate identical text links to access the same content.
6. Label column and row headers in a data table. Try to avoid using tables for layout purposes, but if you do then
do not label headers.
7. Make sure all cells in the table are associated with the appropriate headers. When the table is set-up correctly,
screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers
spoken to them.
8. Be sure to give each frame a title that identifies its purpose.
9. Avoid any graphics, animations, movies, or other objects which have strobing, flickering, or flashing effects.
10. Use a text-only alternative only as a last resort, and be sure to keep it up to date with other content.
11. When using scripts, make sure all text within the script is provided as text or alt text and that any interaction
can be achieved with a keyboard.
12. Be sure to include a link to any applet or plug-in required to access content on the same page as the content.
For example: Adobe Reader. The plug-in itself must meet more specific requirements, which can be found in the
official requirement.
13. If a form can be filled out online by a user, all aspects of the form must be made accessible. This includes
labels for each field, as well as ensuring the form can be filled out using a keyboard.
14. Include a way for the user to immediately skip to the main content of the page.
15. When a timed response is required, alert the user and give sufficient time for them to indicate that more time
is needed.
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 85
87. Mashup: Technical
Section 508 Accessibility
Screen-Readers
- Opera Browser:
Voice-enabled since 2004-2005
<!DOCTYPE html PUBLIC "-//VoiceXML Forum//DTD XHTML+Voice 1.2//EN"
"http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-
events">
<head>
<title>Technology Division</title>
<form xmlns="http://www.w3.org/2001/vxml" id="gis">
<block>Technology Division</block>
</form>
</head>
<body ev:event="load" ev:handler="#gis">
Technology Division
<pre>
<code>
<![CDATA[
]]>
</code>
</pre>
</body>
</html>
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 87
88. Mashup: Technical
Resources
Google
- International maps coverage (ISO-3166)
http://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ
- Case-Studies:
http://maps.google.com/help/maps/casestudies/
- Groups:
API and Google Earth
- Blogs:
Official blog http://googlegeodevelopers.blogspot.com/
http://www.ogleearth.com/
http://www.gearthblog.com/
ESRI
- http://mappingcenter.esri.com/?fa=resources.gateway
Others
- Open Geospatial Consortium (OGC)
- World Wide Web Consortium (W3C)
- Internet Relay Chat (IRC)
Other Apps
- OLIVER:
The MassGIS Online Data Viewer (not a mashup)
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 88
89. Mashup: Technical
Resources
Firefox
- Yahoo YSlow
- Firebug:
See internal structure/objects in tree
- JavaScript Shell:
http://www.squarefree.com/shell/shell.html
- Web Developer
- Live HTTP Headers
- ColorZilla
- MeasureIt
- Extension List Dumper
- Add-Ons Website
IE
- IE Developer Toolbar
http://msdn.microsoft.com/en-us/library/cc848894(VS.85).aspx
http://social.msdn.microsoft.com/forums/en-
US/iewebdevelopment/threads/
http://www.ieaddons.com/
- Fiddler
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 89
90. Mashup: Technical
Resources
Security
- Browser Security Handbook:
http://code.google.com/p/browsersec/wiki/Main
- JavaScript Framework:
“Pre-written common functions and controls for quicker
development”
-- Yahoo User Interface Library (YUI):
http://developer.yahoo.com/yui/
Tip! Look at their cheat sheets
-- http://jquery.com/
-- http://dojotoolkit.org/
- Cross-side Scripting (XSS), SQL Injection
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 90
92. Mashup: Trends
Mobile
- Google Earth for iPhone:
First Earthscape Basic http://earthscape.com/
- Android Mashups?
- Google Latitude
- Google My Location for mobile http://m.google.com/maps:
Does not need GPS-enabled phone, triangulates based on cell
tower-footprints
- Yahoo FireEagle:
Send location from phone etc >> Display location on website etc
Mozilla‟s Geode
Photosynth
- Experience digital pics with multiple perspectives in 3D
Offline Imagery
- License Microsoft Virtual Earth Ortho-Imagery
Social Networking and Mashups
- XFN:
XHTML Friends Network
“relationships through hyperlinks”
<a href="john.planning.org" rel="friend met co-worker co-resident spouse sweetheart">John Planner</a>
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 92
93. Mashup: Trends
Temporal Mashups
“Time-based animations, typically Adobe Flash”
- Template to use timeline with Google Maps mashups:
http://code.google.com/p/timemap/wiki/BasicUsage
(HP)
Harsh Prakash and Jennifer Evans-Cowley. February 2009 93