Main Settings | Documentation
| Common properties |
| width |
The width of the map in pixels (e.g. '700'). Height is adjusted automatically. 'responsive' will make the map width responsive. |
| background_color |
The color of the background. White by default. |
| background_transparent |
Makes it possible to see content behind the map. ['yes', 'no'] |
| label_color |
The color of state abbreviation labels. |
| popups |
'detect' - the map automatically detects mobile devices and shows them pop-ups on click and generates a link to the defined url.
'on_hover' - pop-ups always appear on hover.
'on_click' - pop-ups always appear on click.
'off' - pop-ups never appear.
|
Note: Depending on the map, state could refer to a state, province or country.
| State defaults (can be overwritten for individual states) |
| state_color |
Default color of states. (e.g. 'blue' or '#0000FF') |
| state_description |
Default description for states. This will fill up the popup and can include HTML/CSS. |
| state_hover_color |
Default color of states upon hover. (e.g. 'darkblue' or '#000066') |
| state_url |
Default url when states are clicked. (e.g. 'http://simplemaps.com') |
| all_states_inactive |
If "yes" all states are inactive by default. This means hovering or clicking on a state has no effect. |
| border_size |
The width of the stroke for state borders. 1.5 by default. It is often desirable to change this property if you make the map much larger or smaller than it's default settings. |
| border_color |
Color of state borders. White by default. If the border color is the same as state_color it will not be possible to distinguish individual state boundaries. |
| all_states_zoomable |
When set to 'yes', clicking on a state will zoom into that state instead of redirecting the page to the url. 'no' by default. |
| Location defaults (can be overwritten for individual locations) |
| location_color |
Default color of locations. (e.g. 'blue' or '#0000FF') |
| location_hover_color |
Default color of locations upon hover. (e.g. 'blue' or '#0000FF') |
| location_description |
Default description for locations. This will fill up the popup and can include HTML/CSS. |
| location_url |
Default url when locations are clicked. (e.g. 'http://simplemaps.com') |
| location_size |
The width of location squares. 12 by default. |
| location_type |
Shape of location markers. ['square', 'circle'] |
location_image_source |
If location_type is set to 'image', this is the name of the image which must be placed in the map_images folder. [e.g. 'frog.png'] |
| location_opacity |
The opacity of the location. [0-1] |
| location_hover_opacity |
The opacity of the location upon hover. [0-1] |
| location_border_color |
Default color of location borders. (e.g. 'white') |
| location_border |
Size of location border. (e.g. 2) |
| location_hover_border |
Size of location border upon hover. (e.g. 2.5) |
| all_locations_inactive |
If "yes" all locations are inactive by default. This means hovering or clicking on a location has no effect. |
| all_locations_hidden |
If "yes" all locations are hidden by default. |
| Label defaults (can be overwritten for individual labels) |
| label_color |
Default color of labels. (e.g. 'white' or '#FFFFFF') |
| label_hover_color |
Default color of labels upon hover. (e.g. 'blue' or '#0000FF') |
| label_font |
Default font family for labels (e.g. 'Arial') |
| hide_labels |
When 'yes', labels will be hidden by default |
| hide_eastern_labels |
When 'yes', labels on the East Coast of the US map will be hidden. Only works with US map. |
| Zoom Settings |
| zoom |
'yes' enables zooming based off of default regions. 'no' means that default regions will be ignored. |
| back_image |
Use image in images_directory instead of back arrow for zooming out. (e.g. 'no' or 'back.png') |
| initial_zoom |
The region the map start zoomed in to. '-1' is zoomed out. |
| initial_zoom_solo |
'yes' hides the back arrow and adjacent continents when initial_zoom is not -1. |
| initial_back |
This property accepts JavaScript. When set, the back button will appear even when the map is fully zoomed out. Clicking on the button will execute this JavaScript. e.g. 'javascript: alert("You clicked the back button")',. Useful for linking maps.
|
| arrow_color |
The color of the back arrow that can be clicked to zoom out. Blue by default. |
| arrow_color_border |
The color of the back arrow's border. |
| zoom_out_incrementally |
If 'no' clicking the back button will zoom all the way out. If 'yes', clicking the back button will zoom out to the previous level. |
| zoom_percentage |
The percentage of the canvas that a zoomed region or state should take up. (e.g. '.9', would create a 10% border around the zoomed state/region) |
| region_opacity |
Default opacity of regions (default '1') |
| region_hover_opacity |
Opacity of regions when hovered over (default'.6') |
| adjacent_opacity |
Opacity of adjacent states when zoomed in on a state or region. (e.g. '.3') |
| zoom_time |
The time in seconds to fly from one region/state to another during zooming. (e.g. '.5') |
| Miscellaneous properties |
| div |
The id of the div that will be replaced by the map when the page loads. 'map' by default. |
| url_new_tab |
'no' open urls in the same window. 'yes' open urls in new tab. |
| auto_load |
'yes' means the map will load itself automatically. 'no' prevents the map from loading unless it is loaded manually using the JavaScript API.
|
| images_directory |
The map will typically look for a map_images folder in the same directory as the usmap.js/worldmap.js file. If you'd like this directory to exist somewhere else, you can specify it's location here. Must end with /. e.g. ('http://yoursite.com/map_images/') |
| fade_time |
The time in seconds it takes for hovered colors to return to their default color after the mouse leaves them. (e.g. .1) |
| link_text |
When mobile users click on a state they first see the description on must click this text to go to the defined url. '(Link)' by default. |
| location_popups |
Override popups for locations. |
| state_popups |
Override popups for states. |
| Pop-up/tooltip styling (customize the look of the pop-ups) |
| popup_color |
The color of the pop-up background. 'white' by default. |
| popup_opacity |
The opacity of the pop-up. .9 by default. 1 is opaque. 0 is transparent. [0-1]. |
| popup_shadow |
The size of the pop-up drop shadow. 1 by default. 0 removes the drop shadow. 2 would double the size of the default drop shadow. Note: IE 7 and 8 are unable to show the drop shadow. |
| popup_corners |
The radius of the rounded corners. 5 by default. 0 will make the pop-ups rectangles. Note: IE 7 and 8 do not support rounded corners and will always show rectangular pop-ups. |
| popup_font |
The default font for the pop-up. '12px/1.5 Verdana, Arial, Helvetica, sans-serif' by default.
|
| popup_nocss |
'yes' turns off all css for the pop-up. You must then set your own css styles. |
