Solved

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

Posted on 2004-08-15
2
232 Views
Last Modified: 2013-12-24
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
Comment
Question by:Jeeva
2 Comments
 
LVL 12

Accepted Solution

by:
rcmb earned 250 total points
ID: 11803866
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
 

Author Comment

by:Jeeva
ID: 11804000
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Database solution for an NPO that facilitates training? 3 49
Web Data Entry Application 5 88
Windows Tool to Build Android and iOS App 3 74
Detailed steps to upload 6 34
In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question