Interactive Grid-Based Territory Map Help?

[MisterEBTS]

I simply love my job. Because I can put together our relatively simple intranet, the owner of my company decides I can put together a very complex portion of our corporate (I believe) website.

The basic structure is in place, but he wants me to do something that is strictly outside of my realm...so outside it that I don't even know where to begin figuring out how to do it, hence I'm turning here.

Basically, he wants me to a have a username/password protected portion of the site (which I don't know how to do, but I know I can find in a few of my books) for our sales force. Within that area of the site, he wants to have a map of our territory with a grid overlaid on top of it. Each square within the grid should be 10 to 20 pixels, squared.

The map needs to be interactive in the following ways:

• Ability to click on a square and "mark" it;
• Once "marked" a dialog box needs to pop up, allowing the rep to enter sales information (type of service sold, total contract amount);
• The "marking" becomes permanent, once the information is entered in the dialog box (though it can be clicked again and "unmarked" prior to info entering;
• Reps cannot modify cells "marked" by any other user;
• Once info is entered, another user (someone in admin) needs to be able to login and upload a small graphic, indicating the approval of the sale.

Without entering the protected section, the maps needs to be visible to ALL visitors of our site, indicating our successful sales in our region for the month, roughly approximated by geographic region.

Like I said, I'm way out of my knowledge base here, but my boss (the owner) is secure in his "faith in my abilities" than I can figure it out. He's exceptionally adamant that we don't a full-blown web-designer, and is fairly against freelancing out through Rent-A-Coder or another such site.

I'm kind of stuck. I'm not looking for the code or anything, i just need someone to point me in the right direction. How in the WORLD can I accomplish this? He's seen it done on other sites, though he hasn't told me where, so he knows it can be done (of course, he's believes ANYTHING can be done on the web...He's pushing for some REALLY out there stuff in the future).

So...yeah...any help, hints, etc. would be appreciated. As of the beginning of this project, he upgraded me to Macromedia Studio 8 and Adobe Creative Suite 2...

Thanks in advance!!

Spence

 

[damber]

Here's one way of approaching the map grid overlay:

1. Use a fixed size graphic for the map - e.g. 300px by 400px and put as a background image to a div
2. Overlay a box full of divs (with light coloured borders) however big you want them - e.g. 5px by 5px and give each of them a unique id - you can create these dynamically within a loop quite easily.
3. On the click of any div, trigger an event that will send information to the server via XMLHTTP (aka AJAX), which will updte your database server side of the new information for that co-ordinate / id.
4. When next rendering the image with the overlay divs use the database to check whether the div you're currently writing out has been selected before or not and colour the background differently - ideally using opacity settings to blend into the map a little.
5. For admin, same thing, except update existing db entries with a 'sale complete' flag or whatever. Then consider this when rendering the output again.

If you're looking for a sales made in an area, wouldn't you want to see the density of sales made in a particular area ? e.g. the same div can have 1 sale or 100 sales.. you can easily achieve this by adding a count to the db table holding the info for this feature and then when rendering change the opacity of the div colour to reflect the amount of sales.. e.g. 1 sale = 10% opacity, 10 sales =25%, 20 = 50%, 50 = 100% etc etc. This would be much more informative. You could also populate the div with a number of sales, but this could make it look messy.

As for password protection, it depends on your security policies, but you can generally do this with the server side language you are using.. e.g. ASP.NET, PHP, JSP etc This will require a database lookup (to validate the credentials) and use of session variables to store the authentication flag that the user is allowed to do xyz or open page abc. On each page you can check whether the user has the flag in their profile and has authenticated so can open the page. This can be implemented in many different ways and depends on the server side language used.

For more detailed information, you'll need to discuss this in the appropriate server side language forum.

Overall though, if you're not familiar with the technologies involved, then you've got to decide whether you can learn them sufficiently in the time given. Otherwise the result will likely be an insecure, inefficient and inadequate web application. Your bosses reluctant to use qualified experts may be a good opportunity for you if you want to go down that route - if you do, seize the opportunity.. otherwise tell him now that you cannot do it, and that he needs to get a professional in.

As of the beginning of this project, he upgraded me to Macromedia Studio 8 and Adobe Creative Suite 2...

He would have done better to have sent you on a course. Tools do not make-eth the developer..

Hope that helps

A smile is worth a thousand kind words. So smile, it's easy!

 

[Foamcow]

Yep, you are going to need to know a server side scripting language, some form of SQL and probably AJAX.

Or....

Server side language, SQL, and pretty advanced Flash Actionscripting.

Either way it's a steep learning curve. Not impossible though.

And a * from me for Damber for such a thorough answer!

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[damber]

awww, shucks... you're too kind foamcow but thankyou!

Would be nice if the OP came back with some feedback to let us know how it went and the solution he finally chose, so others could benefit...

A smile is worth a thousand kind words. So smile, it's easy!