Absolute Image Placement and Dynamic Manipulation

Recently I had the challenge of building a DOT Transportation Compliance System and one of the challenges was generating a pop up map of the United States indicating A State's DOT compliance status based on system settings. In other words a system administrator sets a states DOT status in the application and the popup map will dynamically reflect these changes.

The above popup map clearly indicates DOT and NON-DOT states. The squares colors are set based on data from a database. I am basically toggling between two images and setting their absolute position with in the page.

The first thing that I did was found a suitable map from the Internet and set the page background attribute to this image. The next thing that I had to do was dynamically build the image string for the above indicator images in the VB code behind.

The Code

HTML

This code simply holds the HTML for the legend.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="usmap.aspx.vb"Inherits="usmap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>DOT System - US MAP</title>

<style>

.normal{

font-family: "MS Sans Serif", Geneva, sans-serif;

font-size: 13px;

font-weight: Normal;

color: #3f3f3f;

}

</style>

</head>

<tr><td><img src="images/mark_dot.jpg"></td><td class="normal"> DOT Compliant State</td></tr>

<tr><td><img src="images/mark_nondot.jpg"></td><tdclass="normal"> Non DOT Compliant State</td></tr>

</table>

</body>

</html>

VB Code

Partial Class usmap

Inherits System.Web.UI.Page

Dim myData As New clsData

Dim myTable As Data.DataTable

Dim myUtil As New clsUtility

Dim myHash As New Hashtable

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)Handles Me.Load

BuildHashTable()

GetStates()

End Sub

Private Sub BuildHashTable()

myHash.Add("ga", "position: absolute; top:355;left:575")

myHash.Add("fl", "position: absolute; top:411;left:611")

myHash.Add("wv", "position: absolute; top:219;left:600")

myHash.Add("al", "position: absolute; top:348;left:520")

myHash.Add("ak", "position: absolute; top:425;left:85")

myHash.Add("ar", "position: absolute; top:320;left:430")

myHash.Add("co", "position: absolute; top:248;left:250")

myHash.Add("dc", "position: absolute; top:217;left:642")

myHash.Add("id", "position: absolute; top:121;left:147")

myHash.Add("il", "position: absolute; top:225;left:474")

myHash.Add("in", "position: absolute; top:225;left:513")

myHash.Add("ks", "position: absolute; top:257;left:344")

myHash.Add("ky", "position: absolute; top:245;left:541")

myHash.Add("me", "position: absolute; top:61;left:713")

myHash.Add("md", "position: absolute; top:204;left:643")

myHash.Add("ma", "position: absolute; top:138;left:685")

myHash.Add("mi", "position: absolute; top:139;left:523")

myHash.Add("mn", "position: absolute; top:121;left:398")

myHash.Add("mo", "position: absolute; top:257;left:429")

myHash.Add("ms", "position: absolute; top:356;left:475")

myHash.Add("nh", "position: absolute; top:108;left:692")

myHash.Add("ny", "position: absolute; top:131;left:652")

myHash.Add("nd", "position: absolute; top:97;left:326")

myHash.Add("or", "position: absolute; top:122;left:70")

myHash.Add("pa", "position: absolute; top:192;left:604")

myHash.Add("ri", "position: absolute; top:148;left:701")

myHash.Add("sc", "position: absolute; top:325;left:606")

myHash.Add("tn", "position: absolute; top:283;left:546")

myHash.Add("ut", "position: absolute; top:226;left:166")

myHash.Add("az", "position: absolute; top:313;left:153")

myHash.Add("ca", "position: absolute; top:233;left:51")

myHash.Add("ct", "position: absolute; top:152;left:688")

myHash.Add("de", "position: absolute; top:209;left:664")

myHash.Add("hi", "position: absolute; top:468;left:261")

myHash.Add("ia", "position: absolute; top:196;left:415")

myHash.Add("la", "position: absolute; top:371;left:433")

myHash.Add("mt", "position: absolute; top:96;left:217")

myHash.Add("ne", "position: absolute; top:202;left:335")

myHash.Add("nv", "position: absolute; top:208;left:97")

myHash.Add("nj", "position: absolute; top:192;left:668")

myHash.Add("nc", "position: absolute; top:294;left:637")

myHash.Add("nm", "position: absolute; top:327;left:232")

myHash.Add("oh", "position: absolute; top:214;left:560")

myHash.Add("ok", "position: absolute; top:309;left:362")

myHash.Add("sd", "position: absolute; top:151;left:327")

myHash.Add("tx", "position: absolute; top:385;left:334")

myHash.Add("vt", "position: absolute; top:106;left:677")

myHash.Add("va", "position: absolute; top:225;left:629")

myHash.Add("wa", "position: absolute; top:62;left:81")

myHash.Add("wi", "position: absolute; top:141;left:461")

myHash.Add("wy", "position: absolute; top:173;left:231")

End Sub

Private Sub GetStates()

Dim strSQL As String = "Select * From DOT_STATE order by 1"

Dim i As Integer = 0

Dim TempImage As String = ""

myTable = myData.GetDataTable_SQLString(strSQL) â€˜My data class

For i = 0 To myTable.Rows.Count - 1

If myTable.Rows(i)(2) = 0 Then

TempImage = "<img src='images/mark_nondot.jpg' "

Else

TempImage = "<img src='images/mark_dot.jpg' "

End If

TempImage += "style='" & myHash(CType(myTable.Rows(i)(1), String).ToLower) & "' alt='" & CType(myTable.Rows(i)(1), String).ToUpper & "' />"

Response.Write(TempImage)

End Sub

End Class

This class is basically composed of two procedures.

BuildHashtbale: I used an image-mapping program to find the image placement position for all the states and placed this information in a hash table. Noteâ€¦this information is not in the database because this map was created after the fact. The state abbreviation denotes the row in the hash table paired with itâ€™s Top and Left information.

GetStates: Here I query the database to get the state long name, abbreviation and DOT status information.

The Data

Long Name	Abbreviation	DOT Status
Georgia	GA	1
Florida	FL	0
Texas	TX	0
Kentucky	KY	1

I then loop thru the data table and dynamically build the HTML image tag. Based on the DOT status column I start building a black or orange square image. I use the abbreviation fields to attach the image style to the appropriate row in the hash table, which sets the image positioning to absolute and sets a top and left position values.

As an added bonus I placed the state abbreviation in the images ALT tag using the abbreviation column data.

This article shows one creative way of dynamically placing images on a page and placing them in predetermined positions.

Items can be positioned based on data in a database by dynamically building a style string from database information.