Automatic indication of a place on a map on a web page

Automatic indication of a place on a map.

Can anyone suggest a Javascript or HTML solution to this problem please?  

I have a web page consisting of a map with hundreds of towns names on it.  The map fills almost the whole screen.  Scrolling down the page reveals a list, in alphabetical order, of all the town names which are shown on the map.

I would like the site visitor to be able to look up any town name in the alphabetical list, hover over or click on it, and then for him to see the position of the town name on the map indicated automatically in some way.  Ideally the page should scroll up automatically to the map, so that he can see where the town is on the map.

(At the moment I have only a non-automatic conventional partial solution.  The map is divided into grid squares, and each town in the alphabetical list has the map grid square displayed next to it, as on a conventional map, e.g. D6.  The viewer has to note the grid square reference, scroll up, look in the grid square on the map and visually search for the town inside the square.  I am seeking a neater solution which pinpoints the position exactly and quickly).

Any bright ideas?
JeevaAsked:
Who is Participating?
 
rcmbConnect With a Mentor Commented:
Okay this is going to be tough one.

I recommend doing this in frames as it makes it much easier to navigate as it gets very difficult to position your links section with the map picture in the background. You will need three pages to accomplish this. I have named my examples frames_page.htm, top_page.htm and bottom_page.htm. Place all pages within the same directory of your site but the images can be wherever as long as you specify the correct path. Change the image names in my code to your image names.

Here is the code for frames_page.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>My Frames Page</title>
</head>

<frameset framespacing="0" border="0" frameborder="0" rows="*,157">
  <frame name="main" src="top_page.htm" scrolling="auto">
  <frame name="footer" scrolling="no" noresize target="main" src="bottom_page.htm">
  <noframes>
  <body>

  <p>This page uses frames, but your browser doesn't support them.</p>

  </body>
  </noframes>
</frameset>

</html>

First your map needs to be created to be in the background of the images. Then you need to insert a pinpoint image for each location on the map. These pinpoints need to be in the foreground. What we will end up doing is creating a bookmark to each pinpoint on the map so that when you click on the link in the bottom page it will move the picutre in the top page to that pinpoint image.

Here is the code to top_page.htm
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Frames Top Page</title>
</head>
<body>
<p>
<// ---Note: this is my first pinpoint //>
<span style="position: absolute; left: 1000; top: 700; z-index: 1">
<// ---Note: this is my bookmark to the first pinpoint //>
<a name="test1">
<img border="0" src="images/BD14578_.gif" width="15" height="15"></a></span>

<// ---Note: this is my second pinpoint //>
<span style="position: absolute; left: 682; top: 284; z-index: 1">
<// ---Note: this is my bookmark to the second pinpoint //>
<a name="test2">
<img border="0" src="images/BD14578_.gif" width="15" height="15"></a></span>

<// ---Note: this is my third pinpoint //>
<span style="position: absolute; left: 82; top: 84; z-index: 1">
<// ---Note: this is my bookmark to the third pinpoint //>
<a name="test3">
<img border="0" src="images/BD14578_.gif" width="15" height="15"></a></span>

<// --Note: this is my background image - notice the z-index of -1 to send the picture to the background//>
<span style="position: absolute; left: 25; top: 15; z-index: -1">
<img border="0" src="images/program_lifecycle_mgmnt.gif" width="1024" height="768"></a></span></p>
</body>
</html>

Here is the code to bottom_page.htm
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Frames Bottom Page</title>
<base target="main">
</head>
<table width="100%" border="1">
<tr>
      <td><a target="main" href="top_page.htm#test1">Link 1</a></td>
</tr>
<tr>
      <td><a target="main" href="top_page.htm#test2">Link 2</a></td>
</tr>
<tr>
      <td><a target="main" href="top_page.htm#test3">Link 3</a></td>
</tr>
</table>
<body>
</body>
</html>


Have fun and let me know how it comes out. I have tested the code above and it works fine.

RCMB
0
 
JeevaAuthor Commented:
Thanks very much RCMB.

I had not thought of using the map as background.

I'm sure I will now get something to work using your technique.

Jeeva
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.