"Craig Storey" <cr*********@nr c.ca> wrote in message
news:d3******** **@nrc-news.nrc.ca...
I have a little php application to store day hiking trips and to keep a
running total of their yearly trips for a few users. Currently they
select their hiking routes using drop lists or checkboxes containing the
names and numbers of the trails. If the route is simple the form takes
1-2 minutes to fill in, if it involves lots of tiny sections it can
become tedious to search for every trailname and may take 20 minutes.
Because of this they have asked for a map, rather than lists, and want
to open the application to the public. Hmmm..
So I'm looking to create an application where users can select their
routes, by somehow selecting lines on a map, then somehow pass this to a
php script to process.
Suggestions on how to do this are invited. I hope it's trivial, I fear
it isn't.
If you know Flash, then it's trivial. If not, then Javascript is probably a
easier option, as Flash is tricky, especially when you have to deal with
remoting.
I would do it like this:
1. Create two transparent gifs per trail, one showing it as selectable and
the other as selected. These images should be of the same size as the map.
2. Overlay all these images on the map, with the CSS visibility of the
selected ones set to hidden. The HTML will look something like this:
<div style="position : relative">
<img src="map.gif">
<img src="trail1_gra y.gif" id="trail1"
style="position : absolute; left: 0; top: 0;">
<img src="trail1_red .gif" id="trail1_sel "
style="position : absolute; left: 0; top: 0; visibility: hidden">
<img src="trail2_gra y.gif" id="trail2"
style="position : absolute; left: 0; top: 0;">
<img src="trail2_red .gif" id="trail2_sel "
style="position : absolute; left: 0; top: 0; visibility: hidden">
.... etc ...
</div>
3. On top of all these, overlay a blank transparent gif of the same size as
the map. This will be used for the image map.
4. Create a client-side image map for users to click on. Use polygon regions
to define clickable area near each trail. Attach an onclick handler to each
area. The HTML will look something like the following:
<map name="trails">
<area shape="polygon" coords="123,23, 32,434,45,342"
onclick="return ToggleTrail(1)" title="Trail 1">
<area shape="polygon" coords="231,232 ,332,34,35,142"
onclick="return ToggleTrail(2)" title="Trail 1">
.... etc ...
</map>
5. In the Javascript handler toggle between the selectable and selected
image by setting the CSS visibility to hidden/visible. Save the selection
somewhere. The code will look something like this:
function ToggleTrail(num ) {
if(selected[num]) {
document.getEle mentById('trial ' + num).style.visi ble = 'visible';
document.getEle mentById('trial ' + num + '_sel').style.v isible =
'hidden';
selected[num] = false;
}
else {
document.getEle mentById('trial ' + num).style.visi ble = 'hidden';
document.getEle mentById('trial ' + num + '_sel').style.v isible =
'visible';
selected[num] = true;
}
}
6. When the user press submit, saved the selections into a hidden element
and post the form.
Obviously you will need to add code that checks whether the trails are
actually connected.
