Image Map Mitten for DTE Energy

While working for Vectorform, I was tasked to code the front-end for one particular section of DTE Energy’s website, specifically, the Renewable Energy section. I was excited to work on a subject matter that I found to be at least somewhat interesting, and was also up to the challenge being presented by one of our top talents in design. Her Project Map concept is the purpose of this post, but the design called for image carousels, modal popups, solar panel API integration, as well as other interactive elements.

For the Project Map, I coordinated each of Michigan’s 83 counties by simply documenting key points on the base image using a photo editor, like Pixlr. This information was stored in a JavaScript object, along with some other metadata, in what can only be described as a flat-file database:

// ...
"Macomb" : {
	"id" : 70,
	"coordinates" : [ 662, 587 ],
	"pin_coordinates" : [
		[ 673, 601 ],
		[ 689, 598 ],
		[ 677, 635 ],
		[ 687, 625 ]
	"polymap" : "664,589, 698,587, 700,614, 692,619, 695,626, 688,633, 687,644, 667,646",
	"icons" : {
		"off" : "70_Macomb_OFF.png",
		"on" : "70_Macomb_ON.png"
// ...

Since their site was utilizing jQuery, I was able to quickly write the logic for displaying the active counties in the proper location, based on another JSON file containing information on the active renewable energy projects that DTE Energy has going. This way, they can manage their projects using a 3rd party JSON editor and it automatically updates the project map accordingly.

$.each( $( 'img', $pins ), function( ) {
	var $pin = $( this );
	setTimeout( function( ) {
		$pin.animate( { 'opacity' : 1, 'margin-top' : 0 }, 'slow', 'swing' );
	}, 500 + Math.random( ) * 500 );
} );

While I’m looping through the active projects, I also add pins for each renewable energy category: Wind, Solar, Biomass, and Landfill Gas. These can be toggled using some checkboxes in the map legend, and I randomly drop the pins whenever they are shown. If that weren’t enough, each county has a rollover state, which highlights the county and displays the project list for that county. These projects can, in turn, then be clicked to display some more data in a table view that is generated from the same project info JSON that DTE maintains.

In hindsight, I probably should have coupled this logic with a spritesheet for the (in)active county states in order to reduce HTTP requests, but I’m pleased with the end result.

Leave a Reply

Your email address will not be published. Required fields are marked *