1. NR 422: Maps on the web Jim Graham Spring 2010

2. Computer Networks 2 or more computers connected together Typically a: –Client: requests and receives data –Server: receives requests and serves data

3. Requesting a Page 1.Client sends an http request with a URL to a server 2.Server find the file based on the URL and returns it 3.Can also request: mpeg, jpeg, gif, etc. HTML Page Request with URL

4. Dissecting a URL http://www.google.com –http: hypertext transfer protocol –www.google.com = server addresswww.google.com Important: You need a server to put data on the web

5. How Web Servers Work Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL

6. Dissecting URLs http://www.niiss.org/cwis438/websites/niis s/home.php?WebSiteID=1http://www.niiss.org/cwis438/websites/niis s/home.php?WebSiteID=1 /cwis438/websites/niiss/home.php –File to load ?WebsiteID=1 –Parameter Parameters can be hidden

7. GIS on the Web PDF Files HTML files with image maps GIS Web Servers Next Generation: –MapQuest –GoogleMaps GoogleEarth (Internet, not web-based)

8. Portable Document Format Acrobat Writer lets you write PDF files from virtually any application by “printing” to a PDF Acrobat Pro will maintain links Maintains print quality

9. Image Maps Embedded in a web page (HTML) Fixed array of coordinates for known map

10. File Formats PNG & GIF –Spot Color / Categorical JPEG –Continuous tone Keep to about 500 x 500 pixels –Larger rasters take much longer to download

11. Web Formats & Languages Direct Browser Support: –HTML –JavaScript –Images: GIF, PNG, JPEG Plug-ins: –Flash –PDF AJAX (JavaScript to Server) –XML

12. XML-Type Languages Extensible Markup Language Single tag: Tag with attributes: Tag with content: Includes: HTML, KML, and many more

13. HTML Hyper Text Markup Language This is my page Some text that will appear on the page

14. Image Links

15. Hyperlinks Google My Page

16. Can also have… Paragraphs Horizontal rules Tables data Divs (boxes) Headings: Heading Text with: –Bold –Italic –And “Styles” with much more

17. MacroMedia DreamWeaver Now part of Adobe CS HTML Editor Excellent tutorials Makes HTML editing similar to MS-Word Allows “publishing” pages to the web Work flow: –Edit web pages locally –Review in browser –Upload/publish to a server

18. Image Maps Create background image in ArcGIS –Create a map that looks good on the screen –Export or Screen Capture Define polygonal areas as “image maps” in DreamWeaver –Circles for points –Simple polygons for polygons –Polygons for polylines? Good for 10 to 20 areas

20. “Export” from ArcMap

21. Screen capture from ArcMap pasted into PowerPoint

23. GIS Web Servers (old) ArcIMS –Expensive –Operating Systems MS-Windows –Static Maps Shapefiles TIFF –Languages ASP –Hard to support MapServer –Free (OpenSource) –Operating Systems UNIX MS-Windows –Documentation problems –Static Maps Shapefiles TIFF –Languages: PHP –Really hard to support

24. GIS Web Servers ArcGIS Server –Expensive –Slow –Buggy (reboot each night) GeoServer –Free –Client: OpenLayers –?

25. Next Generation MapQuest –Server and client-side interfaces GoogleMaps –Overlay data on GoogleMap backgrounds –Client-side programming in JavaScript Requires programming NR 621: Designing GIS Systems

26. Latest Developments Crime Spotters –http://sanfrancisco.crimespotting.org/http://sanfrancisco.crimespotting.org/ Cloud Made: –http://maps.cloudmade.com/http://maps.cloudmade.com/ Open Street Map –http://www.openstreetmap.org/http://www.openstreetmap.org/ EROS EarthExplorer –http://edcsns17.cr.usgs.gov/EarthExplorer/http://edcsns17.cr.usgs.gov/EarthExplorer/