Labels have already been added to US, North America, and Canada maps. You can edit these, or add labels to any other map you wish. 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. Generate with online tool or manually. |
| y | The y coordinate of the label. Generate with online tool or manually. |
| 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 | 'yes' creates a line to the parent. Lines can now be used at all display levels. | line_x | Overwrite the line destination's x value. | line_y | Overwrite the line destination's y value. | line_color | If a line exists, the color of the line. (e.g. 'black' or '#000000') | line_size | If a line exists, the width of the line's stroke. 1 by default. | 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. |
| 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') |
| opacity | The opacity of the label. (e.g. '1') |
| hover_opacity | The opacity of the label upon hover. (e.g. '1') |
| scale | If 'yes' the label's size will remain constant as the map zooms. 'no' by default. |
| display | Determines when the label will be visible. Options are: 'all', 'out', 'region', 'state', 'auto'. Use of a zoom ratio [0-1], is also permitted. In the case of '.25', a label would be visible when the map had zoomed in such that the viewbox width was less than 25% of the initial view's width. 'auto' will show a label when visible, except when fully zoomed out. A zoom ratio range is also acceptable using the colon (e.g. "1:.4") will make labels visible at a zoom ratio of 1 through .4. |
| level | The z-index position of the label. Larger numbers on top. (defaults: states: 0, lines: 2, labels: 3, locations: 5). |
It's now easy to create labels using our online map editor. Just click on Generate Labels and choose one of the options:
| Choices | Description |
|---|---|
| Get x,y from parent | This will loop over all of the labels you've created and replace any blank x/y coordinates with its best guess of the optimal label placement. |
| Add a label to the center of each state | This will create a label for each state in the mapdata.js file. |
| Add a label to the center of each state | This will create a label for each location in the mapdata.js. |
| Add labels by click | This will put the map in a special mode where every first click selects a state/location and every second click creates a label at the clicked-upon spot for the selected state/location. |
Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps | FAQs
Formerly FlashUSAmap.com and FlashWorldMap.com
SimpleMaps.com is a product of Pareto Software, LLC. © 2010-2024.