Presentation is loading. Please wait.

Presentation is loading. Please wait.

Maps on the web Computer Networks GIS on the Web Dr. Jim Graham

Published byJoy Elliott Modified over 6 years ago

Similar presentations

Presentation on theme: "Maps on the web Computer Networks GIS on the Web Dr. Jim Graham"— Presentation transcript:

1 Maps on the web Computer Networks GIS on the Web Dr. Jim Graham
15 years as computer engineer and manager with HP If you use an HP ScanJet scanner you are using software I worked on 4 years running a Web-GIS company 5 years at CSU Research Scientist:

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 = server address Important: You need a server to put anything on the web

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

6 Dissecting URLs /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: Can’t get the spatial data back out!

10 Zipped Files for Data Raster file formats: Vector 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: Search engine for 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 (going away?): 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

24 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

25 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

26 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

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

28 GIS Web Servers (old) ArcIMS MapServer 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

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

30 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!

31 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

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

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

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

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

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

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

38 Future Web HTML 5 WebGL: 3D renderings in the browser GIS Servers?
“Heavy” on JavaScript WebGL: 3D renderings in the browser GIS Servers? Spatial Databases?

39 “Heavy Clients” Client Server Browser Web Server HTML File HTML File
Internet Browser URL Web Server HTML File HTML File Image File Image File JavaScript Tiles JSON Files

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, , url, search No browser currently supports the entire standard, however, Canvas is well supported

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
GIS Cloud GIS Cloud has examples of using HTML 5 for GIS applications with lots of data

43 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, …

Download ppt "Maps on the web Computer Networks GIS on the Web Dr. Jim Graham"

Similar presentations

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?

DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh

A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
Objective 107.02 Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
By Jim Graham May, 2008. 1. How GoogleEarth Works 2. Display Excel Data in GoogleEarth 3. Creating KML Files for GoogleEarth.

By Jim Graham May, How GoogleEarth Works 2. Display Excel Data in GoogleEarth 3. Creating KML Files for GoogleEarth.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.

HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
NR 621: Maps on the web Jim Graham Spring 2009. Portable Document Format Acrobat Writer lets you write PDF files from virtually any application by “printing”

NR 621: Maps on the web Jim Graham Spring Portable Document Format Acrobat Writer lets you write PDF files from virtually any application by “printing”
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
CIS101 Introduction to Computing

CIS101 Introduction to Computing
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.

World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.

Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Maps on the web Computer Networks GIS on the Web.

Maps on the web Computer Networks GIS on the Web.
Mgt 240 Lecture Website Construction: Software and Language Alternatives March 29, 2005.

Mgt 240 Lecture Website Construction: Software and Language Alternatives March 29, 2005.

Similar presentations

Ads by Google