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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<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>
<body background="images/us_map.jpg">
<table style="position:absolute;top:430px;left:400px;background-color:White;border-style:double;border-color:Blue;border-width:medium"cellpadding="0" cellspacing="3" >
<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)
Next
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.