Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • Last Modified:

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?
0
Jeeva
Asked:
Jeeva
1 Solution
 
rcmbCommented:
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now