Suggestion for an "imagemap-like" location feature -- methods?

[KatB]

Hi, I'm creating an asp.net application and one of the functions I need
is to click on a "Where Is This Office Located?" button. In a table,
each employee will have an office code location entered.

I then need to have the office layout image load and have the name of
that person highlighted such as bold/red (in the correct office
location).

Similar to an image map, but not quite. I do not want to click on an
office "hotspot" and go to a URL. Not finding anything in my searches
other than typical image map methods.

Any guidance or suggestions much appreciated!

Thanks, Kat

 

[Kevin Spencer]

Hi Kat,

Actually, nothing at all like an image map. Just an image. However, it has
to be dynamically-generated, as you want to "draw on it."

Let's analyze your requirements:

1. A user clicks on a link or button, or selects an item from a drop-down
list , or what-have-you. (I don't know which you would rather use)
2. A database is queried to get the file location of the appropriate image
and/or information from the database.
3. An office layout image is returned, with the user's name drawn on itin
bold/red letters.

Okay, so you can figure out number 1 for yourself. As for number 2 and 3:

a. The database is queried. Easy enough.
b. The image is fetched from its file location. Easy enough.
c. The image is drawn on. This is done using the System.Drawing and
System.Drawing.Imaging namespaces.
d. The image is returned to the browser. This requires that the image URL
point to an ASPX page that fetches the image, draws on it, sets the
Response.ContentType to "image/jpeg" (whatever MIME type you need), and
saves the image to the Response.OutputStream.

Okay, wait a second. We nede to back up. First, you need to identify the
user. This can be done with a "login" form in which the user supplies a user
id and password, and the data is stored on the server (Session, database,
Application Cache, etc).

That should do it!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Neither a follower nor a lender be.

 

[KatB]

Kevin, very helpful, thanks. If I use a floor plan image with all the
office names already on it, and then just add a star graphic or
something to indicate the position requested...how would I know the
position of where to draw the star?

I assume I would have a db table of person, office number, and then the
coordinates of the "star". How would I determine those coordinates?
Sorry, if I'm being stupid!

In the meantime, I'll go read up on system.drawing having not used it
before.

Thanks, Kat

 

[MWells]

Hi Kat, there's a good layer of dust in this part of my mental technical
archives, so I leave the implementation details to you.

As I recall, the original image map technology, which I remember being
referred to as "server side imagemaps", could be used to determine the X, Y
coordinate within an image that a user clicked on. It was fairly
straightforward; you add a tag to your image (ISMAP, maybe) and a Url, and
when the user clicks somewhere on the image, a hit is made to your Url.
Again lots of dust here; check this carefully but I recall that the Url was
in a nonstandard format, something like;

/somepage.aspx?23,48

I.e. you have a querystring but it's not a typical key-value querystring.
You'll need to process it a little differently; grab the entire querystring
and split on the comma, or something similar.

The point is, it should be easy to create an administration page that allows
you to modify the details of an Office record.

Within this page, you could show the floorplan contain the star of the
current location of the office. Then if the admin-user clicks on the
imagemap, you capture the new X, Y, and update the Office record.

This is about the cheapest, crudest, simplest way I can think of to capture
image coordinates through a web app.

If you're lucky, there may be some javascript that can respond to the click,
and allow you to create a true ASP.NET control using true ASP.NET postbacks
and so on. If you're fantastically lucky, someone may have done this for
you already.

The trickiest part will be making sure that you know the OfficeID that the
X, Y should be applied to on the receiving page. You may need to insert the
OfficeID into the Url that's posted back to, so that you can process it out
at the receiving end. On that note, the Hyperlink control may give you the
capabilities you need, or you may be able to derive from it to get the right
capabilities.

Other approaches;

+ Use Flash
+ Use a WinForms application for capturing the X, Y clicks and updating the
Office records
+ Use ASP.NET but give the user some up, down, left, right arrows rather
than the ability to click on the image.
+ Use ASP.NET but put a series of small clickable carats along the top and
left of the floorplan image. These would be standard LinkButtons with a
small graphical carat. Clicking these would set the X or Y, respectively to
a value matching the position of the carat.
+ Build an ActiveX control
+ Build a .NET winforms control that's delivered to the webpage (the user
must have .NET installed however).

HTML is quite limited from this perspective, but I'm fairly certain the
tools are there if you're willing to make them work.

Best of luck;

/// M

 

[jeff]

If you are open to use of commercial components to aid
in your project our MetaDraw control may be helpful

In MetaDraw you would have the office map created along with the
names of the all different individuals as text objects at their proper
locations. Save this layout as a MetaDraw data file. This is
all done ahead of time. Then when user clicks in a list on
a name you want to highlight you can tell MetaDraw to either
Hide all names but the desired name, or show all names but
only highlight ( bold or a bright color ) the desired name.

MetaDraw can be used server side in which case you have
MetaDraw save the resulting image ( with highlighted name, etc)
as a standard GIF, JPG, or PNG file and send that down to
the client. A more flexible approach is to use MetaDraw client
side - Sending the whole layout with all names, and then have
client side script hide or show the names, or even blink a name
on or off. You could also change the color of the room boundaries,
Scroll, Zoom, Print... etc.

Take a look at www.Bennet-Tec.com

Reply here if this seems like something of interest.

* * Please include a copy of this message with your reply

Jeff Bennett
Jeff @ Bennet-Tec.Com

* Bennet-Tec Information Systems, Inc
* 50 Jericho Tpk, Jericho, NY 11753
* Phone 516 997 5596, Fax - 5597
* RELIABLE Components Make You Look Sharp!
* TList/Pro * ALLText HT/Pro * MetaDraw *
* Custom Software Development Services Too.
* WWW.Bennet-Tec.Com
=================== ===================