Data-Driven Map Styles

Data-driven map styles allow you to visualize your data by varying the color or size. This may be categorical, based on type (apple=red, orange=orange, banana=yellow), by a numeric range (1-10=red, 11-20=blue) or exponential (from 1 to 100 show a continuous gradient of colors from red to blue)

Display Functions

From:

https://www.mapbox.com/help/how-map-design-works/#data-driven-styles

These are normally used to make 3 general types of maps

Graduated circles - circles with varying size
Choropleth - polygons with varying colors
Line colors - varying line colors

In some cases, like with graduated circles, we an also apply varying colors of the circles in order to show two values at once.

Configuring Numeric Fields in MapHubs

To display the map style based on a numeric value, you first need to configure the value as a number in MapHubs. Likely when the data was imported it was recorded as a plain text value. This is generally safer for most datasets, since many datasets are messy and may contain non-numeric characters in that field. If that is the case for your data, please edit the data and remove any non-numeric values from the field before proceeding.

Go to the page for the layer
From the menu in the bottom right, choose
Manage Layer
Go to the
Fields
tab
Locate the field, and change the type dropdown to
Number
Click
Save

Editing the Map Style

see Editing Map Style Codeto learn how to access and edit the Mapbox GL style

Graduated Circle Maps

A graduated circle map is one where locations on the map are displayed using varying circle sizes. To do this you need to decide how to classify your data.

Disclaimer: it is important to consider the accuracy of your data classification. It is easy to mislead or misrepresent data while still making a nice looking map.

One simple way to classify your data is with equal intervals. For example of your data ranges from 0 to 25, then you can create 5 class 0-5, 6-10, 11-20, 21-25 and assign each range a circle size. In the style code, you will create stops for 0, 5, 10, 15, 20, 25 and assign each a size. Alternatively you can use the interval method and assign each range a size.

However equal intervals may not be the best way to display your data. To classify your data, you will need to explore your data and decide on your classification using an external GIS program. We recommend QGIS a free open-source GIS program. You can export your data from MapHubs to view it in QGIS. You can learn more about map classification here http://axismaps.github.io/thematic-cartography/articles/classification.html

Once you know how you want to classify your data, Edit the Map Style Codefor the layer.

Scroll through the code and look for the section with an id that starts with "omh-data-point-" This is the mapbox-gl layer that draws the circles for the point data. By default, point data in MapHubs is draw as a uniform small circle.

In the paint section we are going to add a "circle-radius" parameter and assign it a list of stops corresponding with the classifications in our data

"paint": {
        "circle-color": "#44bbf8",
        "circle-opacity": 0.8,
        "circle-blur": 0.2,
        "circle-radius": {
          "type": "exponential",
          "property": "my-value",
          "stops": [
            [
              0,
              1
            ],
            [
              10,
              6
            ],
            [
              50,
              12
            ],
            [
              100,
              16
            ],
            [
              250,
              20
            ],
            [
              500,
              25
            ]
          ]
        },
        "circle-stroke-width": 0.5,
        "circle-stroke-color": "#44bbf8"
      }
    },

Choropleth Maps

A choropleth map is one where the polygons features are have different colors based on an attribute value. If you wan to display a type/categorical value, this is is easy, just choose a color for each type (apple=red, orange=orange, banana=yellow). However, you have numeric data (population, crime rates, etc.) then you need to decide how to classify your data.

Disclaimer: it is important to consider the accuracy of your data classification. It is easy to mislead or misrepresent data while still making a nice looking map.

One simple way to classify your data is with equal intervals. For example of your data ranges from 0 to 25, then you can create 5 class 0-5, 6-10, 11-20, 21-25 and assign each range a color. In the style code below which is using the exponential method, you would create stops for 0, 5, 10, 15, 20, 25 and assign each a color. Alternatively you can use the interval method and assign each range a color.

Once you know how you want to classify your data, Edit the Map Style Codefor the layer.

Scroll through the code and look for the section with an id that starts with "omh-data-polygon-"

Inside that section look for "paint" and then "fill-color", you want to replace the "fill-color" value with an array of values, called "stops" where each stop introduces a new color.

The colors use HTML CSS Hex colors

Code for single color polygons:

Example code for multiple colors:

In this example, the data has an attribute field called population, replace it with the name of your attribute. Note: it is likely case-sensitive.

After editing the style, double check the syntax. Every string must be surrounded in quotes, each item in an array must be separated with a comma. When done click "Save" on the style editor, then "Save" again on the layer style page. If all goes well, your map should update with a new style.

Official documentation on data-driven styling support in the Mapbox GL Style Spec is here: https://www.mapbox.com/mapbox-gl-style-spec/#types-function

Additional Examples

https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/

PreviousCustom Layer Legends NextEditing Map Style Code (Advanced)

Last updated 6 years ago