Legend/Key - HTML5/JavaScript Interactive Map Documentation

Legend/Key | Documentation

It's now possible to easily add an interactive legend or key to our maps (v4.1+). A legend describes a group of locations or states based on what they have in common.

Legend Properties

html Optional. Allows you to overwrite the legend HTML. If omitted, the HTML will be generated automatically.

entries

An array that includes all the entries in the legend. Each entry is an object that needs:

name	The description of this group of locations/states (e.g. Offices).
color	The color of this group of location/states. (e.g. red). Upon hover, the map will pulse all locations/states that have this color.
type	Must be either location or state. Can't be both.
shape	The shape to be used in the legend/key. ['circle', 'square', 'marker', 'triangle', 'heart', 'star', or 'diamond']. This does not have to match the state or location's shape on the map. All matching is done by `color` or `ids`.
ids	Optional. Manually match the legend entry to states/locations with a string of the ids delimited by a comma. (e.g. 'ID,WA,MT').

Examples

Here's a simple example that creates a legend with an entry for all red locations:

legend: {
    entries: [
      {
        name: "Offices",
        color: "red",
        type: "location",
        shape: "triangle"
      }
    ]
  },

You can create your legend using our online customization tool. Just go to the "Key" tab and fill out the online spreadsheet. For example, the above example can be created in the online tool with the following:

Here's another example using our US map. Click on the blue button to customize online.

Customize Example Online

Legend/Key | Documentation

Examples

HTML5 Map Documentation v4.4

Customization

Installation

How can I...

Troubleshooting

JavaScript API

Other common FAQs