I want to try to visualize multiple types of data in one map marker.

We currently have up to three types of data on one coordinate and this is going to increase to 6 within the next three years.

You could think of the coordinate as always having a "base data" and then complimentary/additional data upon the "base data".

The possibility to activate inactivate the types of data is a must have feature, so the visualization on the map must work with all activated or just with one type of data. The "base data can be turned off also".

The map markers action is to open a tooltip with a brief information of each type.

  • 2
    Could you provide a mockup of your current situation or your proposed idea? This would make it easier to help you. – msp Aug 20 '14 at 11:02


Obviously you can represent the values of multiple variables with text beside the marker. For example, on general aviation sectional maps, airport markers include text for the name, location identifier, control tower frequency, ATIS frequency, Unicom frequency, elevation, and runway length, among other information. For an electronic map, some or all text may be shown statically, on hover, on a click adjacent to the marker, or on a click in separate dedicated area of the display, depending on how often and critical the information is, and how much there is. If you have trained users that regularly use the app, you may be able to exclude the variables’ names to reduce clutter, relying instead on font and order of the values, format of the values, and a legend, to communicate what each variable is (e.g., elevation versus runway length).

Text representation is best when the user has already identified the marker of interest and wants more information on it. It’s also best when the user needs to read a precise quantitative value.


However, it seems you’re interested in data visualization with graphical representations of data. That is, your users will be looking for patterns in the data, the relation of certain markers to the geographic context, relative amounts across markers, and/or central tendencies, outliers, and trends over the geographic regions. The users may be searching for categories of markers or markers of certain approximate quantities.

A map marker has multiple graphic dimensions for representing a variable value, but which works best depends on the data type. These include (and are best for):

  • Shade (e.g., brightness of the marker): Quantitative data such as rates, intensities, and ratios.

  • Color saturation: Two or 3 levels of a quantitative variable.

  • Color hue: Qualitative differences, although there are some special cases or applications for indicating different levels of variable (e.g., green, yellow, red for levels of hazard).

  • Transparency: To indicate something not entirely there (e.g., under construction versus completed; temporary versus permanent).

  • Slant (e.g., the orientation of an isosceles triangle marker): Qualitative differences or a few levels of something, or quantities related to geographic orientation (e.g., wind direction).

  • Size: Quantities or levels, especially raw quantities (versus densities or rates).

  • Crispness (blurriness of the marker): To indicate two or three levels of uncertainty about the marker (e.g., inexact value of another variable).

  • Shape: Qualitative differences. If the shapes have pictorial associations with the quality (i.e., they’re icons), you can have quite a large number of shapes, although recognizable pictures tend to be larger and thus more cluttering.

  • Position (e.g., whether a graphic feature appears on top or below a marker): qualitative (categorical) or quantitative data (the most versatile dimension).

  • Density (i.e.,, how close graphic features, such as lines through your marker, are spaced): Quantitative data such as rates, intensities, and ratios.

  • Animation: For directing the user’s attention to particularly important markers. Characteristics of the animation (e.g., rate, smoothness of transition) can represent additional information. Provide users a means to turn off animation as part of your activation/deactivation feature.

A marker can be elaborated to use the same dimension multiple times. For example, the overall size of the marker can represent one variable, the thickness of its border can represent another, the size of a hole in the middle can represent a third, the size of a flag hanging off the side a forth, and the length of the “flag pole” a fifth. That’s five different variables represented by the size of something. The same graphic feature of a marker can also be used for different (but usually related) data by manipulating separate dimensions. For example, in addition to varying the length of the flag pole, you can vary its orientation to represent something else.


The need to activate and inactivate the display of certain variables requires special attention. The main concern is the user confusing a deactivated variable for a specific value of a variable if the user forgets (or is unaware) that the variable was deactivated. In some case this is easy. If you represent a variable with a flag pole, then removing the flag pole means the variable value is not displayed (…or it could mean the value is 0, depending the variable). If blue and yellow code a variable, then you can use a neutral color like gray when the variable is deactivated. Other cases are hard, such as for graphic dimensions “built into” the basic marker rather than added to it. For example if the size of marker represent a variable, how big do you make the markers when the variable is deactivated?

Presumably the purpose for deactivation is to reduce clutter. That makes sense for graphics and text that are added onto the marker (e.g., flags). For graphics built into the basic marker, you’re not reducing clutter much be deactivating them, so maybe it’s not worth the risk of confusion. It's a good idea to select a few high-use high-priority variables that are built into the base marker and cannot be deactivated.

The Learning Challenge

It’s pretty easy to come up with a marker symbology for representing 6 variables. Somewhat harder may be getting your user to understand the symbology. An easy-to-call-up legend is essential and tooltips are very helpful. Usability testing your symbology will help you arrive at the most intuitive markers feasible. Beyond that, you may need to consider training or tutorials for your users.

For more on graphic coding see my Putting the G into GUI. For issues in color coding, see my Breaking the Color Code (spoiler alert: color coding is sometimes more trouble than it's worth). Also consider getting an introductory textbook on cartography. For more advanced concepts, I can recommend Alan MacEachren’s How Maps Work.

| improve this answer | |

A map marker can show multiple types of information, as Google Maps does it:

Google Maps marker displaying information

But your requirement seems to be that you want to visually make it clear which map markers actually carry multiple types of information. For this, you could use a colour scheme depicting a particular colour for 1, 2, 3 or more types of info.

Also note that tooltips are usually used for a small amount of helper information. If you want to display multiple types of information for each pin/ marker, I'd say its better to use a card.

| improve this answer | |

Whereas I think Michael's answer is great and pretty exhaustive, I think main options to consider in your case would be:

enter image description here

Shape of the markers top (and overall shape — pointed for main markers or round for secondary, and so forth),

Color coding of the markers,

Size (with only two-three sizes, as markers are already quite small, and it's hard to differentiate),

Icons (to code a place function, for example, or show values).

Combinations of thereof can help you to be flexible with your variables, both qualitative and quantitative.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.