NR 422: Maps on the web Jim Graham Spring 2010

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 data 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 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 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

Image Links

Hyperlinks Google My Page

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

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

“Export” from ArcMap

Screen capture from ArcMap pasted into PowerPoint

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 – Cloud Made: – Open Street Map – EROS EarthExplorer –