Absolute Image Placement and Dynamic Manipulation
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 codefile="usmap.aspx.vb" inherits="usmap" language="VB" % autoeventwireup="false">
DOT System - US MAP
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 = "
Else
TempImage = "
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.
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 codefile="usmap.aspx.vb" inherits="usmap" language="VB" % autoeventwireup="false">
DOT System - US MAP
 | DOT Compliant State |
 | Non DOT Compliant State |
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 = "
ElseTempImage = "
End IfTempImage += "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.
No comments:
Post a Comment