Dynamic image placement and manipulation in VB.NET

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



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>



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







<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">&nbsp;DOT Compliant State</td></tr>

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





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 ObjectByVal e As System.EventArgs)Handles Me.Load



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' "


           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 & "' />"



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


DOT Status














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.