At the end of MapConfig.js is a hook function for insering your own code to be executed when the map is being set up. This hook function is named map_userSetup(), and will be invoked after the default configuration is applied and before the map is initially drawn. This is how you can alter the color settings or informational box settings for individual states. There is a global variable called g_map_stateMap which contains a mapping of US state postal codes to objects representing a state. For example, there is an object representing the state of Florida which can be accessed through the map like this: g_map_stateMap["FL"] Or you can iterate over all of the states like this: for ( var abbrev in g_map_stateMap ) { var state = g_map_stateMap[abbrev]; ... // do something with state } Code like this doesn't have to go in map_userSetup(), it can be placed into your own event driven callbacks or on a timer or whatever. map_userSetup() is simply a hook to use as the map is being initially set up. --------------------------------------------------------------------------- Each state object in the g_map_stateMap has a number of properties that can be set, as well as some read-only properties. All properties of a state object begin with "my" The properties governing the border color accept CSS style color strings. myBorderColor myHighlightBorderColor myBorderColor is the color of the state's border when not highlighted. myHighlightBorderColor is the color that the state's border is traced in when it is highlighted, i.e. hovered over with the mouse pointer. EXAMPLE: change Colorado's border to black, and red when highlighted g_map_stateMap["CO"].myBorderColor = "black"; g_map_stateMap["CO"].myHighlightBorderColor = "red"; The properties governing the fill color of a state accept three dimensional arrays representing the Red, Green, and Blue color components and must be integers between 0 and 255 inclusive. myBaseRGB is the fill color of a state when it is not highlighted. myHighlightRGB is the fill color of a state when it is highlighted. EXAMPLE: change California's base color to blue and highlighted color to red g_map_stateMap["CA"].myBaseRGB = [0,0,255]; g_map_stateMap["CA"].myHighlightRGB = [255,0,0]; --------------------------------------------------------------------------- If you want to change whether or not an info box appears for an individual state, the myUseInfoBox is a boolean property that can be set to true or false. EXAMPLE: disable Alaska's info box g_map_stateMap["AK"].myUseInfoBox = false; The color properties of the info box all accept the three dimensional array style of setting, and are as follows: myInfoBoxFillRGB - the background color the info box is filled with myInfoBoxBorderRGB - the border color of the info box myInfoBoxTextRGB - the color of the text inside the info box EXAMPLE: set Wyoming's info box to have a blue background, red border, and white text g_map_stateMap["WY"].myInfoBoxFillRGB = [0,0,255]; g_map_stateMap["WY"].myInfoBoxBorderRGB = [255,0,0]; g_map_stateMap["WY"].myInfoBoxTextRGB = [255,255,255]; There are two methods (functions) built in to the state object which allow you to set the info box text. setInfoBoxText(t) sets the text in the box to the passed in string t. addInfoBoxText(t) appends the string t to the text already in the box. Both methods will attempt to auto-wrap your text according to the size of the info box. Results are undefined if you put too long of a string into the info box. EXAMPLE: Set Rhode Island's text box to "The Ocean State" followed by a blank line, followed by some other trivia about the state. g_map_stateMap["RI"].setInfoBoxText("The Ocean State"); g_map_stateMap["RI"].addInfoBoxText(""); g_map_stateMap["RI"].addInfoBoxText("It is the US's smallest state!"); --------------------------------------------------------------------------- Advanced text box manipulation: The following properties of the state object can be altered to control the size and position of the text box: myInfoBoxOrigin 2D array default = [625,290] myInfoBoxWidth integer default = 174 myInfoBoxHeight integer default = 160 myInfoBoxTextHeight integer=12 you must change this if you alter the canvas' font EXAMPLE: Change New Mexico's text box location g_map_stateMap["NM"].myInfoBoxOrigin = [400,200]; --------------------------------------------------------------------------- Each state also has some properties that you should treat as read-only. myAbbrev string postal code, i.e. "FL" myCapsName string name in all caps, "FLORIDA" myPrettyName string prettier name, "Florida" EXAMPLE: Create a string with Texas' all caps name and show it in a popup var example = "TX stands for " + g_map_stateMap["TX"].myCapsName; alert(example);