CSS Map ColdFusion Example

Tokyo, Japan: Tokyo, Japan the most populated city in the world, with a population of 28025000 people.
(35.41N, 139.46E)
Mexico City, Mexico: Mexico City, Mexico the second most populated city in the world, with a population of 18131000 people.
(19.24N, 98.57W)
Mumbai, India: Mumbai, India formerly known as Bombay has the third largest population of 18042000 people.
(18.96N, 72.82E)
Sao Paulo, Brazil: Sao Paulo, Brazil has the fourth largest population in the world with 17711000 people.
(23.32S, 46.37W)
New York City, USA: New York City, USA the fifth most populous city in the world, with a population of 16626000 people.
(40.42N, 74.00W)
Shanghai, China: Shanghai, China situated on the banks of the Yangtze River has a city population of 14173000, making it the sixth most populated city.
(31.13N, 121.28E)
Lagos, Nigeria: Lagos, Nigeria has the seventh largest city population with 13488000 people.
(6.34N, 3.19E)
Los Angeles, USA: Los Angeles, USA has the eighth largest city population with 13129000 people.
(33.56N, 118.24W)
Calcutta, India: Calcutta, India with a population of 12900000 it is the ninth most populous city in the world.
(22.82N, 88.20E)
Buenos Aires, Argentina: Buenos Aires, Argentina has the tenth largest city population of 12431000 people.
(-34.667, -58.40)

The ColdFusion Code

This ColdFusion example simulates 10 records returned from a database query. This recordset contains city names, description, and the city's real latitude and longitude. To be displayed correctly on the map these coordinates must be converted to pixels, The latlongToPixels CFC does this conversion.

The code below shows the CFC objects being created, and the latlongToPixels being initialized with the map image size.

<cfscript>
	//create query object of city info (simulates a database query return)
	cityInfo = createobject("component","city").getCityInfo();
	//set sizes
	mapPixelWidth = 550; //set map image width in pixels
	mapPixelHeight = 275; //set map image height in pixels
	mapPointMarkerDiameter = 10; //set point marker diameter in pixels
	//create lat/long to pixel convert object
	convert = createobject("component","latlongToPixels").init(mapPixelWidth,mapPixelHeight,mapPointMarkerDiameter);
</cfscript>

Once we have created the recordset and latlongToPixels we can loop over the records and convert lat/long coordinates to pixels:

<cfoutput query="cityInfo">
	dl.map.on a##location#currentrow# {
		top:#convert.convertLatitudeToPixel(cityLat)#px;
		left:#convert.convertLongitudeToPixel(cityLong)#px;
	}
</cfoutput>

This is just an overview of the code. Download the example for the full CF code.

Read the "A List Apart" article: A More Accessible Map