Highlighting Areas on Image in ASP.Net

Question

I have a map of a building and I'd like to programmatically highlight specific rooms based upon user input.

I'd like to do it from the server side if possible, and eventually, I'd like to be able to highlight multiple rooms. To elaborate more, this feature is for an exhibition. Users will be viewing data about an exhibitor, click the booth, and be presented with a map of the hall with the booth(s) highlighted.

I'd also like to later enable 'bookmarking' of exhibitors, so to make this worth our while we need to be able to easily highlight a number of booths.

What's the best way to go about this?

Answer 1

jQuery Map Hilight might have what you're looking for if you need this to be client-side.

jQuery Map Hilight

Answer 2

I'm assuming server side programming here. I would just do it by saving the original image with nothing highlighted, maybe called building.jpg. Then I would create variants of the building image with each room highlighted (so building-room1.jpg, building-room2.jpg), etc. (using your favorite image editing software - MSPaint would work fine for this). Then you just point the Image control to the appropriate ImageUrl.

It would be fun to combine this with an Image Map control in ASP.NET 2.0, so the user could click on the room they're interested in and you could then load the image with that room highlighted.

Answer 3

Here's what ended up working really well.

First, the ugly (but necessary) part - mapping where all of the booths are and storing the values. So, for booth1 we would store the four corner points of the area we wanted to highlight.

On the image, we use a normal asp:image, but set the ImageUrl to BoothMap.ashx, a handler we've designed to draw the booth locations, sending in the booth location in the querystring. So, it might look like...

<asp:Image ID="imgBoothMap" ImageUrl="BoothMap.ashx?ID=A1" runat="server" />

Our handler looks something like this...

 <%@ WebHandler Language="C#" Class="BoothMap" %>

using System.Drawing;
using System.Drawing.Imaging;
using System.Web;

public class BoothMap : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "image/jpg";

        //load booth corners
        Point[] points = GetBoothCorners(context.Request.QueryString["ID"]);

        Image curImage = Image.FromFile(@"C:\BoothMapjpg");
        Graphics g = Graphics.FromImage(curImage);
        Pen transPen = new Pen(Color.FromArgb(128, 132, 112, 255), 10);
        Brush transBrush = new SolidBrush(Color.FromArgb(128, 132, 112, 255));
        g.FillPolygon(transBrush, points);
        curImage.Save(context.Response.OutputStream, ImageFormat.Jpeg);
        g.Dispose();
        curImage.Dispose();
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return true;
        }
    }
}

All this provides the framework for us to highlight map locations in ASP.Net. If we wanted to, we could easily modify the code to highlight multiple areas of the map, change colors, etc.