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

Properties (add these manually to the regions object in the mapdata.js file)
name	The name of the region
description	The description for the the region. It can contain HTML and CSS.
states	The list of 2-digit state iso codes in each region generated by the customization tool. Do not change these manually.
color	The color for all of the states in the region. If it exists, it will overwrite any state/level colors.
hover_color	The hover_color for all of the states in the region. If it exists, it will overwrite any state/level hover_colors.
cascade	By default, states do not inherit properties from regions. If set to 'yes', child states will inherit their state color and hover_color from their parent region.
zoomable	Regions are zoomable by default. If set to 'no', a region will no longer be zoomable. This can be used to make regions act just like states.
zoom_percentage	The percentage of the canvas that a zoomed region should take up. (e.g. '.9', would create a 10% border around the zoomed region).
url	The url to go to when the region is clicked.
region_opacity	Default opacity of region (default '1')
region_hover_opacity	Opacity of region when hovered over (default'.6')
x1, y1, x2, y2	Only needed if you want to overwrite default zooming. Overwrite each region's default bounding box by providing all 4 of these properties. (x1, y1) is the upper left coordinate of the bounding box. (x2,y2) is the lower left coordinate of the bounding box. Use simplemaps_worldmap.get_xy() (tutorial) to get coordinates.

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. Use our online customization tool for the us map or world map
2. Click on "Settings"
3. Click on "Create Regions"
4. Change the composition of the states in each region as shown:

5. Click the "Create Regions" button
6. The new regions should be reflected on your map
7. Download the map and open the mapdata.js file in a text editor
8. Find the regions object and add any of the following properties to the regions you have created.

Screencast