Solved

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

Posted on 2004-08-15
2
234 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

730 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