?
Solved

dynamic image maps

Posted on 2003-02-25
20
Medium Priority
?
656 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
Comment
Question by:kitey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 4
  • +1
20 Comments
 
LVL 5

Accepted Solution

by:
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

by:miskate
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

by:miskate
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kitey
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

by:kitey
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

by:gator4life
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

by:kitey
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

by:gator4life
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

by:miskate
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

by:kitey
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

by:kitey
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

by:kitey
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

by:miskate
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

by:kitey
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

by:gator4life
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

by:kitey
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

by:COBOLdinosaur
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

by:gator4life
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

770 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