Solved

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

Posted on 2004-08-15
2
229 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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
New Website 15 26
Expression Web 4 the latest 3 82
Problem to get function 52 82
SPLUNK REST  API call to Splunk to create and index? 2 67
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…
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 properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now