GIS TECH 101 - Mapping Mashups

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

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)

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)

What is a Mashup?
• Is a web application that combines data
from multiple sources into a single
integrated tool.

(JC)

Data Mashup
gapminder.org

(JC)

Mapping Mashup
chicagocrime.org

(JC)

GIS is evolving…

Location Matters

Social Networking

“Data is the „intel‟ inside”

Map GUI as “shell” to data

Web 2.0

© Ordnance Survey, Great Britain

(HP)

Remember?

(HP)

Evolving…

Cave Maps >> … >> Paper Maps >> Digital Maps >>
GIS/GPS/3D (Spatial Database) >> webGIS >>
Mashups (web-services) >> Temporal Maps and Mobile Maps >> …

(HP)

Evolving…

(HP)

Free data…

(HP)

Really Evolving…

(HP)

Context: Web 2.0

(HP)

Context: Web 2.0 …sharing

(HP)

Context: Web 2.0 …domesticating

(HP)

Context: Web 2.0 …monetizing

(HP)

Disruptive GIS: Outside of Traditional Industry

MapQuest

Microsoft
Garmin
Google
Autodesk

Intergraph Trimble
Yahoo
ERDAS ESRI
NAVTEQ
(HP)
MapInfo

Mashup is where the action is

(HP)

Planning Mashup
rottenneighbor.com

(JC)

Planning Mashup
walkscore.com

(JC)

Planning Mashup
City of Burbank (Planning Projects Map)

(JC)

Planning Mashup
New Orleans Demolitions

(JC)

Planning Mashup
Smart Growth

(JC)

Planning Mashup
virtual.org

(JC)

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)

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)

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)

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)

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)

Mashup How To: Demonstration

(HP)

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)


(HP)

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)

Mashup How To
OR

Use Google My MapMaker

Similar to OpenStreetMaps

(HP)

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)


(HP)

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)

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)

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)

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)

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)

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)

OR

Use many other tools

- FortiusOne‟s
http://www.geocommons.com/
http://www.mapufacture.com/

(HP)


(HP)

Mashup How To
OR

Even use ESRI!

- ESRI ArcWeb Services
http://www.esri.com/software/arcwebservices/
http://haygis.esri.com/samhsa2/

(HP)

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)

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)

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)

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)

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)

Mashup: KML
These Days

- Mashup
geoXml = new GGeoXml("http://www.website.com/kml/file.kml");

(HP)

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)

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)

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)

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)

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)

Mashup: IMS
Web Mapping Service (WMS)
…
tileWMS.myBaseURL=“http://WMS_URL”;
…

(HP)

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)

Mashup IMS: Demonstration

(HP)

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)

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)

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)

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)

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)

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)


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)


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)

Google Maps for Enterprise

http://www.google.com/enterprise/maps/
Allows the option to disable location-based advertising for an annual fee

(HP)

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)

Mashup: Technical

Programming Basics

- Introduction to GIS/GPS data

-- Vector:
Point, line, polygon, multipatch, 2D/3D models

-- Raster

-- Metadata:
Data about data

(HP)

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)

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)

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)

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)

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)

Mashup: Technical
Programming Basics

- Data Formats

-- WMS (Web Mapping Service) (image/raster)

-- WFS (Web Feature Service) (feature/vector)

-- WCS (Web Coverage Service) (BBOX <<>> GML)

-- KML (Keyhole Markup Language) (Keyhole/Google Earth)

-- GML (Geography Markup Language) (OGC)

-- WKT (Well Known Text) (LINESTRING(1 1,2 3,4 4))

-- WKB (Well Known Binary) (binary WKT)

-- GPX (GPS data)

(HP)

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)

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)

Mashup: Technical
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)

Mashup: Technical

Validators

- http://www.validator.w3.org/ (X/HTML, links)
- http://www.jigsaw.w3.org/ (CSS)
- http://www.contentquality.com/ (Web Accessibility Initiative (WAI),
Web Content Accessibility Guidelines (WCAG), Section 508)
- http://www.feedvalidator.org/ (RSS, KML, ATOM)
- http://cite.opengeospatial.org/test_engine/georss_validator
(GeoRSS)

Screen-Readers

- http://www.nvda-project.org/
- http://www.screenreader.net/
- http://live.gnome.org/orca
- http://www.readplease.com/
- http://www.freedomscientific.com/jaws-hq.asp
- http://webanywhere.cs.washington.edu/ (No Download)
- FireVox (Firefox Plugin)

(HP)

Mashup: Technical


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)

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)

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)

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)

Mashup: Trends

(HP)

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)

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)

Mashup: Conclusion
Take-Away
Presentation Cloud

(HP)

Mashup: Questions
Feedback Poll
http://www.micropoll.com/?

Technology Division of the American Planning Association
(APA):
Webinar Series –
TECH 101 - Mashups for Planning
(February 2009)

* Did we cover relevant topics?

* Did we discuss the big picture?

* Did we demonstrate important tools?

* Did we engage your interest?
© Harsh Prakash (harsh@gisblog.org) and Jennifer Evans-Cowley (cowley.11@osu.edu). All trademarks, service marks,
trade names, product names and logos are the property of their respective owners including but not limited to Tim O‟Reilly
(O'Reilly Media), BBC, NACIS, Corbis, Peter Cho (The New York Times Company), Luc Viatour, ESRI Press, xkcd.com.


GIS TECH 101 - Mapping Mashups

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Destacado

Destacado (9)

Similar a GIS TECH 101 - Mapping Mashups

Similar a GIS TECH 101 - Mapping Mashups (20)

Último

Último (20)

GIS TECH 101 - Mapping Mashups