1 / 47

Maps on the web

Maps on the web. Computer Networks GIS on the Web. Computer Networks. 2 or more computers connected together Typically a: Client: requests and receives data Server: receives requests and serves data. Requesting a Page. Client sends an http request with a URL to a server

heman
Download Presentation

Maps on the web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Maps on the web • Computer Networks • GIS on the Web

  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 • Client sends an http request with a URL to a server • Server find the file based on the URL and returns it • Can also request: mpeg, jpeg, gif, etc. Request with URL HTML Page

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

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

  6. 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

  7. GIS on the Web • PDF Files • HTML files with image maps • Zipped GIS Files • KML/KMZ Files for GoogleEarth • GIS Web Servers • GoogleMaps • ArcOnline

  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. GeoPDF • GeoPDF by TerraGo • Allows Georeferenced data • Very new format (Crashed IE!) • Examples: • http://www.terragotech.com/resources/geopdf-gallery • Can’t get the spatial data back out!

  10. Zipped Files for Data • Raster file formats: • TIFF or IMAGINE • JPEG compression for continuous tone only • Vector file formats: • Shapefiles • CSV and TXT • Maybe: zipped Geodatabases • Not: • mxds, layers, etc. • Not KML/KMZ (no georeferencing)

  11. KML/KMZ • File format for GoogleEarth • KMZ is a “zipped” KML • Not a GIS data format (no georeferencing) • Being reviewed for potential standardization • Adding georeferencing • Easy to provide for users: • Export to KML in ArcGIS (includes layer) • Add to a web site with a link to download

  12. Approaches • Page of links: • Example: Humboldt County • Search engine for links: • Examples: National Park Service, HDH • Map selection for searching • Example: EarthExplorer • Custom downloads: • Select: Area, File format Spatial Reference • Example: National Map

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

  14. File formats for Display • Raster • PNG, GIF: Spot color and continuous • JPEG: Continuous tone • Keep to 500x500 pixels or less • Vector • SVG: Performance problems • HTML 5 is coming! • KML/KMZ • PNG works for everything

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

  16. 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

  17. 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>

  18. Hyperlinks <a href=‘www.google.com’>Google</a> <a href=‘WebPage.html’>My Page</a> <a href=‘LargeImage.png’> <img src=‘SmallImage.png’> </a>

  19. Images in HTML <img src=‘MyImage.png’> <img border=‘0’ src=‘MyImage.png>

  20. Accessibility Attributes • DreamWeaver will ask you for attributes for those with disabilities • Provides text that will be spoken for those with impaired vision. • Don’t worry about this for this assignment

  21. 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

  22. Image Maps • <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> • <map name="planetmap"> • <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> • <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> • <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> • </map>

  23. 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

  24. 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

  25. Tips for Maps in HTML Pages • Use a white or light background with dark or black text (easy to read). The alternative is to use a black or dark background but then the text must be light. • Make the maps for the web: • They have to be simpler than paper maps • Text must be large enough to read • You can break up site maps, titles, and even legends into separate images

  26. Dynamic Web Sites Client Server Internet Browser URL Web Server GIS Data HTML File HTML File Scripts Image File Image File

  27. 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 (old)

  28. GIS Web Servers Client Server Internet Browser URL Web Server Database HTML File HTML File Scripts Image File Image File GIS Server JavaScript AJAX GIS Data

  29. Problem with Performance • User zooms or pans the map • Client requests a new area from the server • Server renders the area to a raster file (takes a relatively long time) • Server returns the raster to the client • Back to 1 • With lots of users, server cannot keep up!

  30. Tile-Based Servers • Topozone tiled the USGS 24k topo maps into 256x256 cells at multiple zoom levels • GoogleMaps copied this approach with the entire world in “Google Mercator” • Now “World Mercator” • Very fast • No rendering • Images can be cached locally (they don’t change) • Cannot symbolize the layers

  31. GIS Web Servers • ArcGIS Server • Expensive • Slow • Buggy (reboot each night) • MapServer • Free • Moderately fast • Hard to configure • GeoServer • Free • Client: OpenLayers • Looking pretty good • Custom solutions • Have to assemble • Can be very fast

  32. GIS Web Servers • ArcServer Examples: • Greeley Colorado’s GIS Website • http://gis.greeleygov.com/origin/propinfo.html • GeoServer Examples: • National Map Viewer • http://viewer.nationalmap.gov/viewer/ • NOAA’s ERMA • http://tinyurl.com/cafwp54

  33. GIS Web Servers Client Server Internet Browser URL Web Server HTML File HTML File Image File Image File JavaScript AJAX Tile Server

  34. GoogleMaps API • Performance limited to about 400 points features • Example: EDDMaps.org • Can also provide rendered “tiles” with GoogleMaps (harder) • Example: NIISS.org

  35. GIS Web Servers Client Server Internet Browser URL Web Server Database HTML File HTML File Scripts Image File Image File GIS Server JavaScript AJAX GIS Data Tile Server

  36. Hybrid Systems • National Institute of Invasive Species Science (www.niiss.org). • Other sites based on International Biological Information System (ibis.colostate.edu)

  37. Latest Developments • Arcata: Online GIS Portal • 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/

  38. Future Web • Heavy Clients? • C++ based plug ins • Arcata: Online GIS Portal • Java Applets? • HTML 5? • “Heavy” on JavaScript

  39. “Heavy Clients” Client Server Internet Browser URL Web Server Database HTML File HTML File Scripts Image File Image File GIS Server Plug-in GIS Data Tile Server

  40. HTML 5 • New HTML Standard • <canvas>: 2D drawing • Elements for media control: <video>, <audio> • Support for local storage • Additional Elements: <article>, <footer>, <header>, <nav>, <section> • New form controls: • calendar, date, time, email, url, search • No browser currently supports the entire standard

  41. Minimum HTML 5 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>

  42. HTML 5 Examples • 21 Ridiculously Impressive HTML5 Canvas Experiments • http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/ • GIS Cloud • http://raphaeljs.com/australia.html • http://www.scale18.com/canvas4.html

  43. Web Services • The Internet without people being involved • Standard GIS Protocols: • Web Feature Service (WFS) • Web Map Service (WMS) • Web Coverage Service (WCS) • Problem is still rendering • Web Tile Service (WTS) • KML?

  44. Web Services • Gage (USGS) and bouy (NOAA) stations • National Weather data • Ultra Violet data • Traffic • Stocks • Hotel prices! • Others? • What would you like to see?

  45. Biological Data Exchange • Taxonmic Database Working Group (TDWG) • DarwinCore • TAPIR • Global Invasive Species Information System (GISIN)

  46. Creating a GIS Web Site • Understand and define the user needs • Talk to the users • Select the technology that meets the needs with minimum complexity • Deliver in stages when possible • Use experienced people when possible • Must be intuitive or they will go elsewhere • Help is built in • Test, rework, test, rework, …

More Related