Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
Solved

# dynamic image maps

Posted on 2003-02-25
Medium Priority
664 Views
Last Modified: 2008-07-13
I have a code that will take in a variable number of points and find their latitude/longitude coordinates and mark all these points on a map dynamically. I need to make each of these points a hotspot connecting to that point's details. Since the map with the points marked on it is created dynamically.. how do I determine the map coordinates for each hotspot.
0
Question by:kitey
• 8
• 5
• 4
• +1
18 Comments

LVL 5

Accepted Solution

gator4life earned 100 total points
ID: 8021089
I am assuming that these points containing hotspots are <area> tags within an image map that are being created dynamically like so:

document.write('<area shape="poly" coords="' + x + ',' + y + '" href="' + url + '">');

Am I right?  If I'm not, could you please post some code to look at?

Now, if I were to click on that hotspot in an image map, I could determine it's coordinates by referencing the coords attribute of the <area> tag from the onclick event, like so:

<script type="text/javascript">
<!--
function ShowCoords(oHotspot) {

var sCoords = oHotspot.coords;
var aCoords = sCoords.split(',');

window.alert('x=' + aCoords[0] + ',y=' + aCoords[1]);
}
//-->
</script>

.
.
.

<area shape="poly" coords="20,50" href="http://www.somesite.com" onclick="ShowCoords(this);">

If I am way out in left field here, could you repost your question with some code to help me understand more clearly what you want?

gator4life
(chomp, chomp)
0

LVL 2

Assisted Solution

miskate earned 100 total points
ID: 8021594
Have a look at http://www.funk-tion.com/steph/ (done by a friend of mine for another friends extended holiday).

Rather than doing it all as an image map, there is one image containing the map itself and the locations on the map are actually absolutely positioned div's containing a link around an image (and in this case some text).

So, you need to convert the coordinates into pixels then for a hotspot at x=200px, y=100px on the map:

<img src="map.jpg" id="mapimg">

<div id="hotspot1" style="position:absolute;top:expression(mapimg.offsetTop+100); left:expression(mapimg.offsetLeft+200);"><a href="whatever.html"><img src="hotspot.gif"></a></div>

OR (using an absolutely positioned map image because you're a little worried about using css2 expressions with older browsers)

<img src="map.jpg" id="mapimg" style="position:absolute;top:20px;left:20px;">

<div id="hotspot1" style="position:absolute;top:120px; left:220px;"><a href="whatever.html"><img src="hotspot.gif"></a></div>

So, in your server side code you have a list of your hotspot coordinates and you just loop through them creating a series of hotspot divs which will place themselves.
0

LVL 2

Expert Comment

ID: 8021629
With the above (just because it was such a simple yet cool way to do it)... when steph wanted to add a new location she went to a special admin page that had form fields for all the info stuff and the submit button was an <input type="image" name="mapsubmit"> with the same map picture on it. Steph submitted the form by clicking on the point on the map where she wanted the new spot to go. The server side form handler stored all of  info and the x and y coordinates from the image input (which gets sent to the server and mapsubmit.x and mapsubmit.y) and those values are what is used to place the spots on the homepage. That meant she didn't have to figure out what numbers to enter when adding a hotspot - she just had to click where she wanted it.
0

Author Comment

ID: 8027788
Thank you both for the answers !! I guess I'll make my question more clear:

My code is a java code that first finds the number of points to be mapped ... finds each of their address and then takes an address like XYZ street, sometown, somestate, somezip and finds its lat/long to plot on a map.

then it for loops to construct a Url string like :
http://someurl.com/somefile.cgi?Point1=lat1,long1&Point2=lat2,long2&...

and my JSP contains:
<img src = "http://someurl.com/somefile.cgi?Point1=lat1,long1&Point2=lat2,long2" >
and the cgi script generates a map with the locations marked.

So there is no way i will know the positioning of the points on the map ... and i dont do any click on the map to indicate the position so steph's way wont work for me..

Thanks !!
0

Author Comment

ID: 8027841
I think I should be asking it this way... how do I make each of these points marked on the map a hotspot ?

Thanks !!
0

LVL 5

Expert Comment

ID: 8028860
Could you post the code (or a hyperlink to the code) that you are using to generate the map and the points on the map from the latitude and longitude coordinates being passed to the cgi script?  I may be able to help you if I see this.

gator4life
(chomp, chomp)
0

Author Comment

ID: 8028988
Thanks gator4life !!

Unfortunatey no !! :-( That cgi was not written by me. I just use it for generating my map.

Is there something that I can do on my side once the map is generated ?

Thanks again !!
0

LVL 5

Expert Comment

ID: 8029199
Hey kitey -

Well, if we can't get into the cgi script, then we will not be able to get the hotspots added directly to the map, since the whole map is generated from the cgi script as the source of an image tag in the main document.  My thought was to be able to change the cgi script so that it would create the hotspots with the points as they were created.

So, since all we can mess with is the client-side code that is obtained from the cgi script, the solutions are require more time and more work, since they are not the prettiest workarounds.

One option that you have is to create a transparent client-side image map that you could display in a <div> that floats above the original map.  Within this transparent image map, you could create the clickable hotspots that you would need to perform what you want.  The easiest way to do this would be to take a screenshot of map that is produced by the cgi script, take the screenshot into a client-side image map generator, so that you can find the positions on the map faster than just guessing.

Another option is that you create a separate floating <div> above each spot on the map that you need a hotspot.  The <div>s would be small rectangles with an onClick event attached to them.  This method would require a lot of patience to position all of the <div>s correctly, but it could be done.

Any of this helping? : )

gator4life
(chomp, chomp)
0

LVL 2

Expert Comment

ID: 8029590

In order to be able to do this you need to know the starting point (long and lat of top left corner) and scale (pixels -> degrees) of the map

If you have this information, you can use it to calculate pixel references - for example if I new the coords of the top left corner of the map, and the number of degrees in each direction it shows, I can work out the pixel coords of my hotspot as follows: (in your version, the "mapimg" div would be replaced with your image tag for the map cgi)

<html>
<body onload="placePoint('hs1',79,150);">
<script>

var lon = 56;  // longitude of top left corner
var lat = 36;   // latitude of top left corner
var deglong = 150; // the number of longitude degrees the map shows
var deglat = 100; // the number of latitude degrees the map shows

function placePoint(ptid, la,lo) {
var map = document.getElementById('mapimg');
var hs = document.getElementById(ptid);

hs.style.top = (lo - lon)/deglong * map.offsetWidth + map.offsetTop;
hs.style.left = (la - lat)/deglat * map.offsetHeight + map.offsetLeft;

}
</script>

<div id="mapimg" style="width:200px;height:300px; position:absolute; top:40px; left:50px; background-color:green"></div>
<div id="hs1" style="position:absolute;width:10px; height:10px; background-color:black"></div>
</body>
</html>
0

Author Comment

ID: 8036345
Thanks for taking the time to reply !!

gator4life... the second method sounds on target to me... how can i achieve this.. since i have no idea before hand where my points are going to be on the map.. you see.. my project is something like this : display all the locations on a map of all people that are signed into something... so this is always varying as people sign in and out...

Really appreciate your help with this !!
Thanks !

0

Author Comment

ID: 8036361
hi mistake

unfortunately i do not have the latitude and longitude of the top left corner nor do i have the scale... you see the map generation cgi is not being handled by me at all... im just doing the client side.

Thanks for taking the time to reply !!
0

Author Comment

ID: 8036503
hi mistake

unfortunately i do not have the latitude and longitude of the top left corner nor do i have the scale... you see the map generation cgi is not being handled by me at all... im just doing the client side.

Thanks for taking the time to reply !!
0

LVL 2

Expert Comment

ID: 8037825
In that case my dear kitey you are stuffed. If you don't know in advance what the map is showing, how can you possibly put a reference on it? What you're asking for is roughly equivalent to a fool proof way of playing pin-the-tail-on-the-donkey blindfolded and with the sort of friends who spin you around really fast and don't necessarily stop you facing the donkey picture. And they ain't standing around yelling "warmer!" as you grope blindly in the dark either.

If you don't know where on the map you have to place your point, how can you possibly place it?

Unless there is some sort of regularity in the map. Does it always show the same area or does it move? If it always shows the same area, then you can sit down and work out the numbers to fill in the equations above. If not, you need to find out how the CGI calculates the map and then mimic those calculations to find the bounding coordinates. Not pretty, and not easy either.
0

Author Comment

ID: 8037905
miskate ... i guess I am stuffed :-(

as i said earlier my proj is like : display all the locations on a map of all people that are signed into something... so this is always varying as people sign in and out... and i have to make each point on the map a link to that person's details.

so the map may not show the same area all the time.

do you know of any other way other than image maps that could make this work ?

Thanks very much for the reply !!
0

LVL 5

Expert Comment

ID: 8039075
kitey -

I completely and wholeheartedly want to help you out, but the reality of this situation is that you cannot do anything to achieve what you want without knowing SOMETHING about the map beforehand.

miskate's description is dead on.  If the information is completely dynamic all the time, and you know nothing about how this data is being generated, then there is absolutely no way that you can create something that would just happen to spontaneously "know" where all the points are without having some sort of data to utilize.

Unless you can get access to the cgi script, I am afraid that you are indeed out of luck, since dynamic functionality is always based on knowing how to make something dynamic to begin with.

Sorry...

gator4life
(chomp, chomp)
0

Author Comment

ID: 8041902
Thank you both for taking the time to respond to my query.

I'm trying to get the CGI but am not sure if that would be possible... guess I cant do anything abt it.

Thanks a lot anyways  !!
0

LVL 53

Expert Comment

ID: 9350262
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

<note>
Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.
</note>

If the user does not know how to close the question, the options are here:
http://www.experts-exchange.com/help/closing.jsp

Cd&

0

LVL 5

Expert Comment

ID: 9353602
I think it would be great if the points for this question could be split up for both miskate and myself.  We both took a lot of time helping kitey out and, in the end, even answered the original question - even though it was not the answer s/he wanted.

gator4life
(chomp, chomp)
0

## Featured Post

Question has a verified solution.

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

By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
Why WooCommerce is one of the majorly favored choices when it comes to having an eCommerce store. This article will acquaint you with some reasons that I believe make it one of the best eCommerce platforms available.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google Mâ€¦
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
###### Suggested Courses
Course of the Month11 days, 6 hours left to enroll

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

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