1. Exploring the Internet 91.113-031 Instructor: Patrick Krolak Topic:

2. Image maps, electronic maps (emaps), and e- government 1.Creating image maps and using them. 2.Shareware and freeware 3.Digital maps and e-government P.D. & M.S. Krolak ©2005

3. What is an Image map This lab is about another mechanism for navigating the web. Instead of clicking the mouse over a text link to go to a new page, the user points the mouse at an area of interest on a graphic or image, called a hot spot and clicks. The hot spot acts like the normal link and takes the user to the new web page. The hot spot can also be associated with more complex user interactions through something called eventhandlers. These interactive images are called image maps.

4. Image maps Client side maps Server side maps Java Applet Image maps

5. Client Side Maps Client Side (CS) Maps contain all functional data needed in the tags stored in the HTML document. The map is associated with some image where the author has defined hot spots, i.e. areas of the image where mouse will cause an event (message) to the browser that will cause an action. The most common event – a click will cause an action similar to a text link. The mouse will change shape over the hot spot and the user will go to the page linked to it.

6. Basic tags for CS map container hold the tags tags which define the hot spot and the mouse events and actions. –Area tags have 3 shape attributes – 1.Rect -- rectangular shaped hot spots 2.Circle -- circular shaped 3.Poly – polygonal shaped created the image map. In this course we will use a tool to handle the creation of CS Maps.

7. Image map code for 3 button bar

8. Server Side Maps The Server Side (SS) is similar to the client side image map in its appearance and function. One major difference – the data that defines the hot spot is located on the Web server and the browser must send all of the mouse events back to the server to be interpreted. This lesson will not discuss the SS maps further as it beyond the scope of the class to deal with the server issues.

9. Java Image maps Java is a programming language that can create applets – think of an applet as a sub program attached to the web page. Java has a library of classes and methods for creating very complex user interactions using methods similar to image maps. We will look at one example for illustration only.

10. Client Side Maps but Based On Java Sun has a example the illustrates the various features of an imagemap applet –http://java.sun.com/applets/jdk/1.1/demo/ImageMap/in dex.htmlhttp://java.sun.com/applets/jdk/1.1/demo/ImageMap/in dex.html –Click on the link and move the mouse over the man’s face. Try the eyes or the mouth.

11. Using Java to create a magnifying glass example:

12. National Park Viewer http://www.serve.com/wizjd/parks/parks.html http://www.serve.com/wizjd/parks/parks.html

13. Shareware and Freeware Shareware is not free. The author allows the user to download the software for a trial period and may not provide it full functionality. After a period the software may not work Freeware is free but the author may restrict its use to personal or not for profit applications. The author may also retain intellectual property rights.

14. MapEdit Shareware to create client side image maps A tutorial using MapEdit to create image maps.

15. E-government and digital maps

16. E-government E-government is the delivery of government products and services over the Internet. Designed to reduce the printed document and the need to travel to government offices to carry out business. The advent of census tiger files and geo-positioning satellites (GPS) has lead to the creation on the web vast amounts of spatial information. The data is presented electronic maps that the user can interact with to drill down for further details and clarification

17. Geo Reference Search Engine

18. Weather maps Weather (Wx) maps are probably the most commonly used maps on the web. Weather news commonly use a variety of satellite & radar imagery, and weather charts

19. Hurricane Forecasting Hurricanes are some of the most deadly and costly natural disasters, The US government weather bureau and National Oceanic and Atmospheric Agency have tracked and researched hurricanes for years. National Oceanic and Atmospheric Agency

20. Google’s new earth site Google’s new earth product allows users to add satellite and other imagery on a real time basis. Here we see NASA infrared satellite data superimposed on the earth.google.com globe tracking the same hurricane (Emily on July 19, 2005) Image is updated every 3 hours.

21. Sources of Geographic data Geology.com –Maps/aerial photos/GIS –Geology software –Satellite photos CensusScope –Create maps, charts, demographic trends http://www.townsusa.org/ –Demographic data, crime, schools, economic data

22. CensusScope Example

23. Geographic Information Systems (GIS) GIS software and databases have been rapidly growing in sophistication and complexity. The geospacial data allows for planning, training, and operations of all level of governments. The data is often freely available to the public.

24. GIS Viewers

25. Online Satellite and Aerial Imagery Satellites and aerial imagery is now in commonplace use by governmental and private users over the web. The applications can be as diverse as real estate sales to homeland security and transportation productivity and safety.

26. Google’s new earth product http://earth.google.com/ http://earth.google.com/ Google is now offering a new product that will allow the user to display satellite and government and private GIS data source. The basic system is free but to create a useful application requires a license fee of several hundred dollars per seat. Their Enterprise server for private application develop is in the hundred thousand dollar range not including data.

27. Google’s new earth product http://earth.google.com/ http://earth.google.com/ Here we see one of the more interesting 3-D applications showing a basic 3-D architecture of 33 US and major international cities (Sanborn Corp data). Earth has a global digital elevation model (DEM) that allows the viewer to explore the terrain in 3-D

28. NASA’s Project WorldWind WorldWind is an open government source program written in C# and Active X for the PC. Allows for the display of satellite data and GIS information.

29. A photo tour of Paris online http://photos.pagesjaunes.fr http://photos.pagesjaunes.fr Use the cursor on the map to locate the address and the photo window offers views from front, rear, etc. Many people are trying to find a cheap means of creating photo realist 3-d buildings.

30. Data Sources Links TerraFly for aerial and satellite photos. http://www.terrafly.com/ Microsoft TerraServer for aerial and satellite photos: http://terraserver.microsoft.com/ Google Maps and Satellite images: http://maps.google.com/ Mapquest for maps and directions. http://www.mapquest.com/

31. Tracking vehicles, ships, & planes Tracking is made possible thru radar, GPS, E911, and other technologies.

32. Tracking Land Based Vehicles For enhanced fleet productivity, response time, service, and safety.

33. Yahoo Traffic Report http://maps.yahoo.com/traffic http://maps.yahoo.com/traffic

34. Yahoo (detail Portland ME)

35. Yahoo Traffic (Chicago, Il)

36. Google’s Ridefinder http://labs.google.com/ridefinder http://labs.google.com/ridefinder

37. ER Mapper – Track GPS over satellite and map data http://www.earthetc.com/example_view.aspx?ETC_EXAMPLE_ID=9 http://www.earthetc.com/example_view.aspx?ETC_EXAMPLE_ID=9

38. Weather and Highways http://www.weather.com/outlook/driving/interstate/regional?reg=us http://www.weather.com/outlook/driving/interstate/regional?reg=us

39. Next Generation – Beat the Traffic Site Shows current traffic situations What is novel is it attempts to forecast next 7 day traffic load. Produces a 3-d overview for television similar to long range weather forecasts. Site is fee based.

40. Beat the Traffic http://www.beatthetraffic.com/traffic/map.aspx? regionid=3&viewname=Chicago-Evanston http://www.beatthetraffic.com/traffic/map.aspx? regionid=3&viewname=Chicago-Evanston

41. Air Traffic and Air Travel

42. Traffic Flow Management The airspace is approaching saturation and requires cooperation between those who fly in the airspace, air traffic control, and traffic flow management, to provide safety, productivity, and to minimize delays. Requires that all aircraft in the North American space and all of the aircraft from Europe, Pacific, and some of South America (~ 7500 airplanes at max and 150,000 aircraft a day)

43. Traffic Flow Management – Showing the flow of planes into OHare

44. FAA Online Airport Status http://www.fly.faa.gov/flyfaa/usmap.jsp http://www.fly.faa.gov/flyfaa/usmap.jsp

45. Live Air Traffic Control Voice Traffic http://jfktower.com/jfktwr/viewtopic.php?t=1246 http://jfktower.com/jfktwr/viewtopic.php?t=1246 Listen to various air traffic voice communications at a variety of airports. The voice traffic is from various stages of arrival and departures, i.e. tower-pilot, arrival sector traffic control-pilot, etc.

46. Commercial Application of Traffic Management Data Data of a non-sensitive nature is made available to industry. Value added resellers add from private sources and create new applications and uses.

47. Commercial Applications Airlines track the progress of their airplanes on their websites for customer conveyance (passenger pickup) Airline operations (management of gates) Limos and taxis use information to time arrivals Environment monitor noise around airports

48. Passur Airport Monitoring http://www.passur.com/sites.htm http://www.passur.com/sites.htm Passur provides a replay of air traffic over airports. Current data is delayed 15 min. for security purposes. Provides a replay at a variety of distances and rates of replay.

49. Logan Airport Monitor

50. Flight Tracking Sites

51. Flight Tracking Air France AF 337 Boston/Paris Shown approaching Paris

52. Vessel Tracking Since 9-11 vessel tracking has received more emphasis, for both security and marine safety. However, supply chain efficiency and port operation also greatly benefit from near real time tracking.

53. Vessel tracking Automatic Identification System (AIS) uses GPS to track vessels at sea. It is used for safety as it allows ships to see all of the vessels within a 30 mile radius. It is a security device and all ships within 2000 miles of the US are required to use it.

55. Cruise Ship Locations in the Gulf of Mexico Cruise Ship Locations in the Gulf of Mexico March 29, 2005 4PM Est

56. Current MA Bay Current MA Bay http://www.sealinks.net/MABay.htm Mar 29, 2005 5PM Boston Berge is an LNG tanker

57. AISLive.com Site is worldwide is available on real time basis for a fee. Non fee user’s are delayed one hour. Site is tied to ship imagery data and other data bases for detailed imformation about the vessels.

58. AISlive.com Ship Information (Hein)

59. AISlive.com Vessel image (Hein)

60. Image Map Exercise Create an image map of you home town and add hot spots to link to three pages about the areas indicated by the hot spots.

61. Diagram of how home town image map will navigate your pages.

62. Visit these sites using the address for you home town TerraFly for aerial and satellite photos. http://www.terrafly.com/ Microsoft TerraServer for aerial and satellite photos: http://terraserver.microsoft.com/ Google Maps and Satellite images: http://maps.google.com/ Mapquest for map and directions. http://www.mapquest.com/

63. U Mass Lowell, (Terrafly 2m)

64. Finding and saving a map of your hometown 1.Log into mapquest.com and use an address in your hometown to get a map. 2.Use the normal save image_as method to capture the image. 3.Save it to your computer and rename it to match city name, e.g. lowell.gif

65. Copy yellow area below and Paste it into Composer SaveAs -- imagemap.html

66. Steps in Composer 1.Remove red text and insert your image of your hometown in its place. 2.Create a link to your home page see green box (remove green box ) 3.Save as imagemap.html

67. Using MapEdit to create the hot spots in imagemap.html Close Composer after saving the page as imagemap.html Download and install MapEdit on your computer. Open MapEdit and select [Open A Web Page]

68. Creating the image map Open – imagemap.html Should see a map in the window. Use the Rectangle button to place a rectangular hot spot Use Circle to create a circular hot spot Use polygon to create polygonal one. –Left button to create points –Right to close (end)