Style layers by your data
Wherever a layer has a color - a circle's fill, a polygon's fill or outline, a line, a column - you choose how that color is decided. The same choices appear across circles, shapes & geometry, lines, grids, columns, and any reference layer you have joined to your data.
Color modes
| Mode | Use it for |
|---|---|
| Single color | Everything the same color. |
| Gradient (by value) | A continuous number mapped onto a color ramp - good for smooth measures such as temperature. |
| By category | One color per distinct value. Add Also split by (second field) to key the colors on two columns together. |
| Class breaks | A number grouped into a few classes, each with its own color - the classic choropleth. |
| Bivariate (2 fields) | Two numbers at once, shown on a 3 x 3 color grid. |
| From color field | Your data already holds a color (a hex code or color name) for each row. |
On top of any mode, Conditional rules override the base color for features that match a condition - the first matching rule wins. Use them to flag exceptions, such as anything below target in red.
Class breaks
Class breaks turn a continuous measure into a handful of readable classes. Choose the Method:
- Quantile - the same number of features in each class. Spreads color evenly across skewed data.
- Equal interval - classes of equal width across the value range.
- Natural breaks - finds the natural groupings in your data, so similar values share a class.
- Manual - type your own Class bounds (for example
10, 20, 50); n bounds make n + 1 classes. Use this for thresholds that mean something, such as regulatory limits.
Then set the number of Classes and pick a Color ramp; class colors are sampled evenly from the ramp, low to high.
Bivariate colors
A bivariate map shows how two measures vary together - income against health, say. Pick the First field and Second field and a Palette; each feature takes one of nine colors according to whether it is low, middle or high on each measure. Two of the palettes (purple-gold and orange-blue) are color-blind safe. The legend draws the 3 x 3 key for you.
Dot density
On polygons, Dot density scatters dots inside each shape, where 1 dot represents a number you choose - 1 dot per 1,000 people, for instance. Add several series to show a breakdown in different colors. Dots are drawn over the fill, so lower the fill opacity for the classic look.
Fill patterns
Polygons can carry a pattern as well as a color: hatch lines, cross-hatch, dots, checkerboard, chevrons, or a tiled image, with control over angle, spacing, thickness, color and opacity. Patterns are useful where color alone is not enough - print, accessibility, or overlapping designations. They are not available while a layer is extruded or drawn with deck.gl.
Size by data
Circles, icons, lines and columns can be sized from a column - a fixed size, a size in pixels or meters read straight from your data, or a range that stretches your values between a minimum and maximum. Turn on Scale size with zoom (or Scale width with zoom for lines) to make symbols grow as the viewer zooms in.
A chart at every point
On a Circles layer, Chart per point replaces each circle with a small pie, donut or bar chart built from several numeric columns - for example the product mix at each store. Charts show for up to 500 points; beyond that the layer falls back to circles. This is separate from clustering, where the chart summarizes a group of nearby points.
Combining rows at one location
When several rows share a location, turn on Combine rows at the same location to collapse them into one feature and style it by the count, sum, average, minimum or maximum - so a site with 40 incidents draws once, bigger, rather than 40 times.
Next steps
- Labels - put the values on the map as text.
- Map controls - add a legend so viewers can read your colors.
- Themes - a consistent look across charts, cards and controls.