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 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: hypertext transfer protocol – = server addresswww.google.com Important: You need a server to put anything on the web

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

Dissecting URLs s/home.php?WebSiteID=1http:// s/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 Zipped GIS Files KML/KMZ Files for GoogleEarth GIS Web Servers GoogleMaps ArcOnline

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

GeoPDF GeoPDF by TerraGo –Allows Georeferenced data –Very new format (Crashed IE!) –Examples: galleryhttp:// gallery –Can’t get the spatial data back out!

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)

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

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

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

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

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 with attributes: Tag with content: Includes: HTML, KML, and many more

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

Hyperlinks Google My Page

Images in HTML

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

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

Image Maps

Can also have… Paragraphs Horizontal rules Tables data Divs (boxes) Headings: Heading Text with: –Bold –Italic –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

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

Dynamic Web Sites Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Data Scripts

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 Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GIS Server Database Scripts GIS Data JavaScript AJAX

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

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

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

GIS Web Servers ArcServer Examples: –Greeley Colorado’s GIS Website GeoServer Examples: –National Map Viewer –NOAA’s ERMA

GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL JavaScript AJAX Tile Server

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

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

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

Latest Developments Arcata: Online GIS PortalOnline GIS Portal Crime Spotters – Cloud Made: – Open Street Map – EROS EarthExplorer –

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

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

HTML 5 New HTML Standard – : 2D drawing –Elements for media control:, –Support for local storage –Additional Elements:,,,, –New form controls: calendar, date, time, , url, search No browser currently supports the entire standard

Minimum HTML 5 Title of the document Content of the document......

HTML 5 Examples 21 Ridiculously Impressive HTML5 Canvas Experiments – roundups/21-ridiculously-impressive-html5- canvas-experiments/ roundups/21-ridiculously-impressive-html5- canvas-experiments/ GIS Cloud

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?

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?

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

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