Dynamic image maps

Mucello

Here is my problem:

I have the latitude and longitude of over 200 points stored in a database. I have a map of the region of interest. I want to dynamically make an image map based around the coordinates from the database. Where do I even start on something like this?
-Mark

sarah

That is one heck of a task depending on exactly what you need...couple of questions...
- Are the image maps going to be squares or irregular shapes?
- Are all of the image maps going to be the same size as each other?

Mucello

Originally posted by sarah
- Are the image maps going to be squares or irregular shapes?
- Are all of the image maps going to be the same size as each other?

Yea its one heck of a task I think. The image is rectangular (500x400). I'll probably actually make it bigger later though. The dots on the map that are clickable should probably be small circles and yes, they will be all the same size.

Bah__Name

This is not a realistic attmept to to solve the problem, but rather a rough brainstorming, or chucking ideas in and see what happens..

Does a longtitude and latitude pair represent one coordinate on the map?

Could you define up front all possible locations for a clickable circle, then build the imagemap on demand, just making active only the circles that have something in the database/query/current instance (whatever)?

Could you split the whole map into however many maximum peices would ever be needed, then put the bits in a big table with no borders, sort of thing.

Are you talking about actual client-side image-maps? Can you make them dynamically?

Maybe you could do something funky with DHTML if every table data element is a DHTML element between <DIV> tage and named as a coordinate, sort of thing. Or mess about with layers.

Or something. Just throwing ideas around. Hope it helps

Gregg

Mucello

Does a longtitude and latitude pair represent one coordinate on the map?

Yes that is correct. I'll covert the latitude/longitude coordinates of my points of interest to the x,y coordinates of the map. I don't think that will be a big deal though.

Could you define up front all possible locations for a clickable circle, then build the imagemap on demand, just making active only the circles that have something in the database/query/current instance (whatever)?

Not sure I completely understand what you're suggesting. I need the dots on the map to be drawn dynamically. And then those same dots to be assigned their respective link when clicked.

Are you talking about actual client-side image-maps? Can you make them dynamically?

Good question and I'm not sure. Which ever would be easier to do from my standpoint would be the best route.

Maybe you could do something funky with DHTML if every table data element is a DHTML element between <DIV> tage and named as a coordinate, sort of thing. Or mess about with layers.

The layers may be a possibility. Any idea how do do that dynamically?

sarah

It seems like you can get it to work if you determine the longitude and latitude of the top left edge of the image. Then, create a conversion formula that converts the longitude and latitude of the point into the pixel coordinates of the center of the image map circle. The beauty of the circle is that you only need the x, y, and diameter. With a simple formula, the latitude and longitude give you the x and y. And, the diameter is static.

One problem you might run into is overlapping circles...But, that isn't a big issue and I don't think it would take too much to resolve.

When you get this working, I would be interested in seeing the final result.

Bah__Name

Any idea how do do that dynamically?

Well, not specifically. Perhaps you could code the map to load, then feed it an array of active coordinates as an argument. Or during the drawing of the map.
The array could be constructed from the results of querying the database.
Dividing the map up into table elements might not be sophisticated enough for you. It would rule out overlapping though. You might not need to if you can work at a pixel level.
With DHTML you can specify x and y offsets, something like
MyLayer.left = n
MyLayer.Top = n
I'm only just learning DHTML so I can't really get detailed on it.
If you had one big map, could you dynamically create only as many layers as you need (dictated by the query) in a constructing loop or something, then position each layer according to the coordinates specified by the record it refers to in the query, detail the link info for it while you're at it, then HEY! adjust the Z-order on mousover in javascript!!? - Sorry, getting carried away. Would this sort of thing work?

Bah__Name

Just realised that might not work. If the map is one layer, then making the circle layer a higher z order might make the map disappear. Also javascript might not work on invisible layers. Maybe other problems too. I did say I was just guessing here :/

I'd also be interested if you get it working.

Gregg

Weedpacket

If you make the src for your image map a PHP script (which it probably would be if you want it to be dynamic anyway), then you could use the GD functions to stick wee circles on the image map at the appropriate x/y coordinates.

You probably ought to make the image map client-side instead of server side as well; the script containing the map (not the one generating the image) would need to read the database also in order to write the appropriate HTML for specifying all those locations (I forget the syntax). The result would be faster and simpler than a server-side map, because you'd be told which circle was clicked on, instead of just getting a pair of x and y coordinates and then having to convert those to a longitude and latitude which would have to be compared against all the points in the database to figure out which was the nearest (or even if the point clicked was inside a circle!)