nr 422: maps on the web jim graham spring 2010. computer networks 2 or more computers connected...
TRANSCRIPT
Computer Networks
• 2 or more computers connected together
• Typically a:– Client: requests and receives data– Server: receives requests and serves data
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
Dissecting a URL
• http://www.google.com– http: hypertext transfer protocol– www.google.com = server address
• Important: You need a server to put data on the web
How Web Servers Work
Browser
Client Server
Web Server
HTML File
Image File
HTML File
Image File
Internet
URL
Dissecting URLs
• http://www.niiss.org/cwis438/websites/niiss/home.php?WebSiteID=1
• /cwis438/websites/niiss/home.php– File to load
• ?WebsiteID=1– Parameter
• Parameters can be hidden
GIS on the Web
• PDF Files
• HTML files with image maps
• GIS Web Servers
• Next Generation:– MapQuest– GoogleMaps
• GoogleEarth (Internet, not web-based)
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
Image Maps
• Embedded in a web page (HTML)
• Fixed array of coordinates for known map
File Formats
• PNG & GIF– Spot Color / Categorical
• JPEG– Continuous tone
• Keep to about 500 x 500 pixels– Larger rasters take much longer to download
Web Formats & Languages
• Direct Browser Support:– HTML– JavaScript– Images: GIF, PNG, JPEG
• Plug-ins:– Flash– PDF
• AJAX (JavaScript to Server)– XML
XML-Type Languages
• Extensible Markup Language
• Single tag: <tag />
• Tag with attributes: <name attribute=‘value’ />
• Tag with content:<name>
<contentname/>
</name>
• Includes: HTML, KML, and many more
HTML
• Hyper Text Markup Language<html>
<head>
<title>This is my page</title>
</head>
<body>
Some text that will appear on the page
</body>
</html>
Image Links
<img src=‘MyImage.png’>
<img border=‘0’ src=‘MyImage.png>
Hyperlinks
<a href=‘www.google.com’>Google</a>
<a href=‘WebPage.html’>My Page</a>
<a href=‘LargeImage.png’><img src=‘SmallImage.png’>
</a>
Can also have…
• Paragraphs <p>
• Horizontal rules <hr>
• Tables <table><tr><td>data</td></tr></table>
• Divs (boxes) <div>
• Headings: <h1>Heading</h1>
• Text with:– Bold <b>– Italic <i>– And “Styles” with much more
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
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
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
GIS Web Servers• ArcGIS Server
– Expensive– Slow– Buggy (reboot each
night)
• GeoServer– Free– Client: OpenLayers– ?
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
Latest Developments
• Crime Spotters– http://sanfrancisco.crimespotting.org/
• Cloud Made:– http://maps.cloudmade.com/
• Open Street Map– http://www.openstreetmap.org/
• EROS EarthExplorer– http://edcsns17.cr.usgs.gov/EarthExplorer/