Using CSS to Populate a Dynamic Map

Clients often want maps of their service area, particularly county maps of a state, or states/regions within country. I had a project with a land company that wanted to be able to have a map automatically turn on/off a county based on the contents of the property's county in database.

I decided to create a page that used a vector based map with the counties outlined, id each county with a CSS class of that county name, then if any county was retrieved from the query, that county's ID would be highlighted to display. No, the map doesn't need to be a vector map per se, but using CSS can you can extend the functionality of each unit of the map (and resize easily if need be).

An example of this can be found at

Since the potential for several states exsists, I created a CSS file for South Carolina, 'sc.css'.

The CSS for the map contains a div tag for the overall map, and a div for the location of each county to display:

#scmap {
height: 506px;
width: 638px;
background-image: url(map/scmap.gif);
background-repeat: no-repeat;
padding: 0;
margin: 0;
position: relative;
font: Arial;
font-size: 11px;
font-stretch: narrower;}    
#scmap li {
margin: 0; padding: 0; list-style: none;
position: absolute; text-align: center;}    

#scmap li a:link, #scmap li a:visited, #scmap li a:active
{ color: black; }

#scmap li a:hover {background-color: #BF9839;color: #000;    
text-decoration: underline; }

#none {left: 540px; top: 470px; }    
#spartanburg {left: 145px;top: 41px; }
#greenville { left: 103px;    top: 14px;     }
#oconee {left: 12px; top: 70px; }
#laurens {left: 153px; top: 110px; }
#aiken {left: 207px;    top: 260px;}
#abbeville {left:90px; top: 152px; }
#edgefield {left: 164px;top: 224px;}
#cherokee {left: 202px; top: 9px; }
#union {left: 209px; top: 77px; }
#pickens { left: 65px; top: 44px; }
#anderson {left: 69px; top: 105px;}
#mccormick {left: 95px; top: 202px;}
#chester {left: 269px; top: 76px; }
#york {left: 269px; top: 34px; }
#lancaster {left: 332px; top: 80px; }
#fairfield {left: 276px; top: 127px; }
/*(and so on... not all counties are displayed here )*/

.disabled {color: #999999;}

Then in the .cfm file, I set up the code to use an unordered list display or grey out the counties as needed:

<ul id="scmap">
<cfoutput query="getcounties">

<cfif cnt gt 0 > <!--- cnt is a count of properties from query --->
<li id='#lcase(county)#'> <!--- div id --->
<!--- if county has a count gt 0, diplay link & count--->
<a href='filename.cfm?cid=#countyid#'>#county#</a><br/>
#cnt# listings

<cfelse> <!--- county has 0 listings at all, show county in proper location but disabled --->

<li id='#lcase(county)#'>
<span class="disabled">#county#</span>


The overall effect takes a bit of time to set up the location of the counties, but once done, it allows your map to disable or show links based on database values without having to recode the map.

This effect can be applied to geographic maps, real estate siteplans, and many other applications that use an overall large mapping but the need to be dynamic in the content for that map.

I can take this effort one more step to create hotspots based on the vector shape of the county and make rollovers, or even color the entire county based on the query results.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Comments are not allowed for this entry.
BlogCFC was created by Raymond Camden. This blog is running version Contact HHWD