Labels | Documentation

Labels exist by default in the US, North America, and Canada Maps. Labels must be attached to either a region, a state or a location. They will share hover and click events with their parent.

Label Properties (these overwrite the properties in the main settings)
name	The name of the label.
x	The x coordinate of the label. Learn how to find x/y coordinates at the end of this page.
y	The y coordinate of the label. Learn how to find x/y coordinates at the end of this page.
parent_type	The type of the parent. ['state', 'region', 'location']
parent_id	The id of the parent. (e.g. '0')
hide	'yes' makes the label invisible.
line	If 'yes' and the parent is a location, a line will be drawn from the location to the label. Lines cannot be used with display: 'all',
line_color	If a line exists, the color of the line. (e.g. 'black' or '#000000')
anchor	The orientation of the text relative to the x/y coordinate. ('start', 'middle', 'end')
pill	If 'yes', and the parent is a state, the label will have a pill with the same color as the parent.
width	Only relevant if pill:'yes',. This is the width of the pill. If not specified, the pill will grow to fit the label.
display	Where should the label be visible. Options are: 'all', 'out', 'region', 'state'.
font	The font family for the label. (e.g. 'Arial')
size	The size of the label font in pixels
color	The color of the label. (e.g. 'black' or '#000000')
hover_color	The color of the label upon hover. (e.g. 'black' or '#000000')

Some states contain default labels. These can be overwritten in the mapdata.js file. Below are the default labels for the United States:

labels: {
		'NH':{parent_id: 'NH', x: '932', y: '183', pill: 'yes', width: 45, display: 'all'},
		'VT':{parent_id: 'VT', x: '883', y: '243', pill: 'yes', width: 45, display: 'all'},
		'RI':{parent_id: 'RI', x: '932', y: '273', pill: 'yes', width: 45, display: 'all'},	
		'NJ':{parent_id: 'NJ', x: '883', y: '273', pill: 'yes', width: 45, display: 'all'},
		'DE':{parent_id: 'DE', x: '883', y: '303', pill: 'yes', width: 45, display: 'all'},
		'MD':{parent_id: 'MD', x: '932', y: '303', pill: 'yes', width: 45, display: 'all'},
		'DC':{parent_id: 'DC', x: '884', y: '332', pill: 'yes', width: 45, display: 'all'},
		'MA':{parent_id: 'MA', x: '932', y: '213', pill: 'yes', width: 45, display: 'all'},
		'CT':{parent_id: 'CT', x: '932', y: '243', pill: 'yes', width: 45, display: 'all'},		
		'HI':{parent_id: 'HI', x: 305, y: 565},
		'AK':{parent_id: 'AK', x: '113', y: '495'},
		'FL':{parent_id: 'FL', x: '773', y: '510'},	
		'ME':{parent_id: 'ME', x: '893', y: '85'},
		'NY':{parent_id: 'NY', x: '815', y: '158'},
		'PA':{parent_id: 'PA', x: '786', y: '210'},
		'VA':{parent_id: 'VA', x: '790', y: '282'},
		'WV':{parent_id: 'WV', x: '744', y: '270'},
		'OH':{parent_id: 'OH', x: '700', y: '240'},
		'IN':{parent_id: 'IN', x: '645', y: '250'},
		'IL':{parent_id: 'IL', x: '595', y: '250'},
		'WI':{parent_id: 'WI', x: '575', y: '155'},
		'NC':{parent_id: 'NC', x: '784', y: '326'},
		'TN':{parent_id: 'TN', x: '655', y: '340'},
		'AR':{parent_id: 'AR', x: '545', y: '368'},
		'MO':{parent_id: 'MO', x: '545', y: '293'},
		'GA':{parent_id: 'GA', x: '718', y: '405'},
		'SC':{parent_id: 'SC', x: '760', y: '371'},
		'KY':{parent_id: 'KY', x: '680', y: '300'},
		'AL':{parent_id: 'AL', x: '655', y: '405'},
		'LA':{parent_id: 'LA', x: '550', y: '435'},
		'MS':{parent_id: 'MS', x: '605', y: '405'},
		'IA':{parent_id: 'IA', x: '525', y: '210'},
		'MN':{parent_id: 'MN', x: '506', y: '124'},
		'OK':{parent_id: 'OK', x: '460', y: '360'},
		'TX':{parent_id: 'TX', x: '425', y: '435'},
		'NM':{parent_id: 'NM', x: '305', y: '365'},
		'KS':{parent_id: 'KS', x: '445', y: '290'},
		'NE':{parent_id: 'NE', x: '420', y: '225'},
		'SD':{parent_id: 'SD', x: '413', y: '160'},
		'ND':{parent_id: 'ND', x: '416', y: '96'},
		'WY':{parent_id: 'WY', x: '300', y: '180'},
		'MT':{parent_id: 'MT', x: '280', y: '95'},
		'CO':{parent_id: 'CO', x: '320', y: '275'},
		'UT':{parent_id: 'UT', x: '223', y: '260'},
		'AZ':{parent_id: 'AZ', x: '205', y: '360'},
		'NV':{parent_id: 'NV', x: '140', y: '235'},
		'OR':{parent_id: 'OR', x: '100', y: '120'},
		'WA':{parent_id: 'WA', x: '130', y: '55'},
		'ID':{parent_id: 'ID', x: '195', y: '150'},		
		'CA':{parent_id: 'CA', x: '79', y: '285'},
		'MI':{parent_id: 'MI', x: '663', y: '185'},
		'PR':{parent_id: 'PR', x: '620', y: '545'},
		'GU':{parent_id: 'GU', x: '550', y: '540'},
		'VI':{parent_id: 'VI', x: '680', y: '519'},		
		'MP':{parent_id: 'MP', x: '570', y: '575'}	
	}

You can copy and paste the above object into your mapdata.js file and make any changes you desire.

How to Find X/Y Coordinates

First, choose the map you want to install:

Open the map in Chrome
Click F12 to go to Developer Tools
Click on the Console tab
Enter the command simplemaps_worldmap.get_xy();
Click somewhere on the map
You'll get a prompt that gives you the x/y coordinates

Labels | Documentation

How to Find X/Y Coordinates

HTML5 Map Documentation v3.2

Customization

Installation

Common Questions

Troubleshooting

JavaScript API