Exploring the Internet

91.113-031Instructor: Patrick Krolak

Topic:

Image maps, electronic maps (emaps), and e-government

1. Creating image maps and using them. 2. Shareware and freeware3. Digital maps and e-government

P.D. & M.S. Krolak ©2005

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.

Image maps

• Client side maps

• Server side maps

• Java Applet Image maps

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.

Basic tags for CS map

• <Map></Map> container hold the <area> tags• <area>tags which define the hot spot and the mouse

events and actions.– Area tags have 3 shape attributes –

1. Rect -- rectangular shaped hot spots2. Circle -- circular shaped3. Poly – polygonal shaped

• <img usemap=“map_name”> created the image map.• In this course we will use a tool to handle the creation

of CS Maps.

Image map code for 3 button bar

<!-- the Map is named menu and contains three rectangular hot spots --> <MAP NAME="menu"> <AREA SHAPE="RECT" COORDS="0,0,99,49" HREF="left.html">

<AREA SHAPE="RECT" COORDS="100,0,200,49" HREF="middle.html">

<AREA SHAPE="RECT" COORDS="200,0,299,49" HREF="right.html">

</MAP>

<IMG USEMAP="#menu" SRC="menu.gif" HEIGHT=50 WIDTH=300>

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.

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.

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.html– Click on the link and move the mouse over the man’s

face. Try the eyes or the mouth.

Using Java to create a magnifying glass example:

In these examples we have two images. The first is the total image or map. Associated with this image is the locator, which is a box or circle that defines the area of interest. This locator can be moved by the viewer over an area that is then shown in the second image. The second image is normally an enlarged view of the portion of the image under the locator.

Find the Shipyards of the world. A slick example to motivate the reader. In the map of the world move you mouse in the middle of the locator box and hold the left mouse button down and drag the locator over the part of world of interest. What happens in the second larger image? Click in the enlarged image? What happens? How many ship yards in the US are there for marine services and repairs?

National Park Viewerhttp://www.serve.com/wizjd/parks/parks.html

Example that uses a US Map and Locates National PARKS in a BLOWN UP Image controlled by other map.

In this example moving the rectangular locator over the US map creates an enlargement that shows all the national parks in the region under the locator's region.

Find Yellowstone National Park on the Regional map and Click on it. What happens?

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.

MapEdit Shareware to create client side image maps

A tutorial using MapEdit to create image maps.

E-government and digital maps

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

Geo Reference Search Engine

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

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.

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.

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

CensusScope Example

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.

GIS Viewers

Freeware GIS Viewers -- Arc Explorer (Java):

Figure 1 Running Arc Explorer in a window with the TIGR street files for the Middlesex and

Norfolk Ma. Counties

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.

Google’s new earth producthttp://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.

Google’s new earth producthttp://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

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.

A photo tour of Paris onlinehttp://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.

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/

Tracking vehicles, ships, & planes

Tracking is made possible thru radar, GPS, E911, and other technologies.

Tracking Land Based Vehicles

For enhanced fleet productivity, response time, service, and safety.

Yahoo Traffic Reporthttp://maps.yahoo.com/traffic

Yahoo (detail Portland ME)

Yahoo Traffic (Chicago, Il)

Google’s Ridefinderhttp://labs.google.com/ridefinder

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

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

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.

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

Air Traffic and Air Travel

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)

Traffic Flow Management – Showing the flow of planes into OHare

FAA Online Airport Statushttp://www.fly.faa.gov/flyfaa/usmap.jsp

Live Air Traffic Control Voice Traffichttp://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.

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.

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

Passur Airport Monitoringhttp://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.

Logan Airport Monitor

Figure 1 Commercial site displaying filtered air traffic data from ETMS. Note that data is delayed for security. Here we show a replay of the air traffic near the airport air space (TRACON). Note the platoon of landing aircraft (blue) approaching over the harbor.

Flight Tracking Sites

Flight TrackingAir France AF 337 Boston/ParisShown approaching Paris

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.

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.

Cruise Ship Locations in the Gulf of MexicoMarch 29, 2005 4PM Est

Current MA Bay http://www.sealinks.net/MABay.htm

Mar 29, 2005 5PMBoston Berge is an LNG tanker

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.

AISlive.comShip Information (Hein)

AISlive.comVessel image (Hein)

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.

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

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/

U Mass Lowell, (Terrafly 2m)

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

Copy yellow area below and  Paste it into Composer

SaveAs -- imagemap.html 

Image Map Test Visit My Home Town

Insert Your Home Town Map or Aerial Photo HERE Place mouse here, i.e. use image button and chose file to locate and open it. Provide an alternate text, i.e. Hometown_Name Hit [Apply] [Close]

Locate points of interest in a map of my home town. In my image map are three areas:

1. a rectangle, 2. a circle, and 3. a polygon.

When you put your mouse over them the cursor will change shape and a message will appear in the status bar in the bottom of the window. Click and you will get more information.

Create a Link to Your Web Site

Link For Text Visit My Home Page

Cyber Ed: URL set to

http://ceweb.uml.edu/Your_USERId

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

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]

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)