TECH 101 - Mashups For Planning

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) Harsh Prakash and Jennifer Evans-Cowley. February 2009 2

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

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

Data Mashup gapminder.org (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 5

Mapping Mashup chicagocrime.org (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 6

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) Harsh Prakash and Jennifer Evans-Cowley. February 2009 7

Remember? (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 8

Evolving… Cave Maps >> … >> Paper Maps >> Digital Maps >> GIS/GPS/3D (Spatial Database) >> webGIS >> Mashups (web-services) >> Temporal Maps and Mobile Maps >> … (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 9

Evolving… (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 10

Free data… (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 11

Really Evolving… (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 12

Context: Web 2.0 (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 13

Context: Web 2.0 …sharing (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 14

Context: Web 2.0 …domesticating (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 15

Context: Web 2.0 …monetizing (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 16

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

Mashup is where the action is (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 18

Planning Mashup rottenneighbor.com (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 19

Planning Mashup walkscore.com (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 20

Planning Mashup City of Burbank (Planning Projects Map) (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 23

Planning Mashup New Orleans Demolitions (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 24

Planning Mashup Smart Growth (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 25

Planning Mashup Smart Growth (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 26

Planning Mashup virtual.org (JC) Harsh Prakash and Jennifer Evans-Cowley. February 2009 27

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

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

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

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

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

Mashup How To: Demonstration (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 33

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

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

Mashup How To OR Use Google My MapMaker Similar to OpenStreetMaps (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 37

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mashup: IMS Web Mapping Service (WMS) … tileWMS.myBaseURL=“http://WMS_URL”; … (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 63

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

Mashup IMS: Demonstration (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 65

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) Harsh Prakash and Jennifer Evans-Cowley. February 2009 82

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

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

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

Mashup: Technical Section 508 Accessibility 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) Harsh Prakash and Jennifer Evans-Cowley. February 2009 86

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

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

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

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

Mashup: Trends (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 91

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

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

Mashup: Conclusion Take-Away Presentation Cloud (HP) Harsh Prakash and Jennifer Evans-Cowley. February 2009 94

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. Harsh Prakash and Jennifer Evans-Cowley. February 2009 95

http://www.gisblog.org	2772
http://gis-tech.co.uk	58
http://www.slideshare.net	27
http://abtasty.com	8
http://gisblog.org	7
url_unknown	5
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	3
http://www.facebook.com	2
http://www.linkedin.com	2
http://blogs.casa.ucl.ac.uk	2
http://www.techgig.com	1
http://www.google.co.uk	1

TECH 101 - Mashups For Planning

by Harsh Prakash

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 2,891

Statistics