Regions | Documentation

Regions make it possible to group states together. In the world map, regions are defined by default to allow continent-level zooming. In the US map, regions are undefined by default. It is possible to create and customize regions by manually editing the mapdata.js file using our online customization tools.

Region Properties

How to Create Regions Manually

You can easily add regions to your mapdata.js file. At a minimum a region needs three parts:

1. An id. You can just use numbers or names for these.
2. An name. This is what will be displayed when a user hovers over the region.
3. An array of state ids. This is a list of the ids of the states in the region.

The region of North America in the US might look like this:

regions: {
	'0': {
		name: "North America",
		states: ["MX","CA","US","GL"]
	}
}

Note that MX is the id for Mexico, US is the id for the United States etc. That's all there is to it! The default regions in the world map are:

regions: {
	0: {
		name: "North America",
		states: ["MX","CA","US","GL"]
	},
	1: {
		name: "South America",
		states: ["EC","AR","VE","BR","CO","BO","PE","BZ","CL","CR","CU","DO","SV","GT","GY","GF","HN","NI","PA","PY","PR","SR","UY","JM","HT","BS"]
	},
	2: {
		name: "Europe",
		states:["IT","NL","NO","DK","IE","GB","RO","DE","FR","AL","AM","AT","BY","BE","LU","BG","CZ","EE","GE","GR","HU","IS","LV","LT","MD","PL","PT","RS","SI","HR","BA","ME","MK","SK","ES","FI","SE","CH","TR","CY","UA","XK"]
	},
	3: {
		name: "Africa and the Middle East",
		states: ["QA","SA","AE","SY","OM","KW","PK","AZ","AF","IR","IQ","IL","PS","JO","LB","YE","TJ","TM","UZ","KG","NE","AO","EG","TN","GA","DZ","LY","CG","GQ","BJ","BW","BF","BI","CM","CF","TD","CI","CD","DJ","ET","GM","GH","GN","GW","KE","LS","LR","MG","MW","ML","MA","MR","MZ","NA","NG","ER","RW","SN","SL","SO","ZA","SD","SS","SZ","TZ","TG","UG","EH","ZM","ZW"]
	},
	4: {
		name: "South Asia",
		states:["TW","IN","AU","MY","NP","NZ","TH","BN","JP","VN","LK","SB","FJ","BD","BT","KH","LA","MM","KP","PG","PH","KR","ID","CN"]
	},
	5:	{
		name: "North Asia",
		states: ["MN", "RU", "KZ"]
	}
}

Feel free to copy and paste the above in your mapdata.js file and play make changes. If you'd prefer not to mess with the code and are using the US or World maps, you can also do this using the online tool.

How to Create Regions with the Online Tool

1. Customize a map using our online tool. Open Customization Tool in New Window... HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 Congress Map HTML5 County Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map Other Country Map

2. Click on "Regions Tab"

3. Give each region you want to create a name.

   

4. Each region you create will be given a column the spreadsheet below. Fill out this column with the ids of the states you want in your region (state ids can be found on the "States" tab).

   

Customize the color, hover color, description, url and zoom status for each region.