World Map with info - Coldfusion - Advanced Techniques

[atahualpa]

Hello Gang ..
I'm off on a tricky task and I wanting to hear everyone's opinion on it ..

I need to provide an image with the world map, pointing certain citie names on
some countries.
These cities will need to activate a menu drop down of some sort giving
several choices, the choices are store names within that country ..
I have an image of the world map .. I just need to figure out the best way to
get the drop downs off each city ..

Do I use javascript, flash .. I'm not sure of the most effective way to handle
this situation ..

Any ideas will help ..

Cheeers
Pagin

[MikerRoo]

I'd start with the google-earth API or google-maps API and work from there.

[efecto747]

This is a relatively simple solution using CSS, JavaScript and the html <map>
tag.





<script language="JavaScript">
function storeList(city) {
var obj = eval("formName.lst_" + city);
if (obj.style.display == "none") // show
obj.style.display = "";
else
obj.style.display = "none"; // hide
}
</script>

<style>
#img_worldMap { position:absolute; left:0px; top:0px; }
#lst_London { position:absolute; left:130px; top:220px; }
#lst_NewYork { position:absolute; left:90px; top:300px; }
</style>

<form name="formName">
<select id="lst_London" style="display:none;">
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
</select>
<select id="lst_NewYork" style="display:none;">
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
</select>
</form>

<img id="img_worldMap" src="world_map.gif" width="800" height="600"
usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="110,220,130,240"
href="javascript:storeList('London')">
<area shape="rect" coords="70,300,90,320"
href="javascript:storeList('NewYork')">
</map>

[atahualpa]

Thanks efecto747 .. this works great ..

I was wondering .. how would I go about replacing the drop down menu with a
dhtml drop down menu instead ..
it appears that the business owners want the user to experience the following:
1. User clicks on the city name (London) on the map
2. Have the click action open a list of store names (2 to 10 choices) as a
Dhtml menu
3. Have the user select a store name and on the mouse over action have it
generate another layer of menu containing the store address, etc.

I've made the Dhtml menu before, but nothing like what I'm working on right
now ..
Any ideas or suggestions will be appreciated ..

Pagino

[efecto747]

It shouldn't be too hard - you'd need to replace the <select> tags with perhaps
<div> tags - so instead of:

<select id="lst_London" style="display:none;">
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
</select>

you'd have something like:

<div id="lst_London" style="display:none;">
<table>
<tr id="m1r1" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
onclick="showStore(1)"><td>Store 1</td></tr>
<tr id="m1r2" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
onclick="showStore(2)"><td>Store 2</td></tr>
<tr id="m1r3" onmouseover="rowOn(this)" onmouseout="rowOff(this)"
onclick="showStore(3)"><td>Store 3</td></tr>
</table>
</div>

you'd need to add some functions to handle the row highlighting (rowOn and
rowOff) and to handle the mouse click event (showStore) which is really outside
the scope of this forum.

The appearance of the menu (colour, lines, etc.) can be controlled through the
style settings using the id to reference each menu.

If you're looking to go down this path, your best bet would probably be to dig
around some dhtml and JavaScript forums for some ideas on how you can build
your menus and functions.

hth - good luck.