MapHubs Help
  • Introduction
  • Getting Started
    • Signup for a MapHubs Account
    • MapHubs Groups
    • Searching MapHubs
    • MapHubs Terminology
    • Troubleshooting Common Issues
  • Maps
    • Make a Map
    • Sharing Maps
    • Export a Map as an Image
    • Change the Layer Color
    • Copying Maps
  • Forest Analytics
    • Forest Report
  • Data
    • Uploading Data
    • Attach Photos to Map Features
    • Creating Data
    • Layer Metadata
    • Raster Tile Layers
  • Advanced
    • Custom Layer Legends
    • Data-Driven Map Styles
    • Editing Map Style Code (Advanced)
    • Map Dropdown Menus
    • Earth Engine Layers
    • Changing Polygon Fill Patterns
Powered by GitBook
On this page
  • Configuring Numeric Fields in MapHubs
  • Editing the Map Style
  • Graduated Circle Maps
  • Choropleth Maps
  • Additional Examples
  1. Advanced

Data-Driven Map Styles

PreviousCustom Layer LegendsNextEditing Map Style Code (Advanced)

Last updated 7 years ago

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:

These are normally used to make 3 general types of maps

  1. Graduated circles - circles with varying size

  2. Choropleth - polygons with varying colors

  3. 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.

  1. Go to the page for the layer

  2. From the menu in the bottom right, choose

    Manage Layer

  3. Go to the

    Fields

    tab

  4. Locate the field, and change the type dropdown to

    Number

  5. Click

    Save

Editing the Map 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.

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.

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.

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.

Additional Examples

see to learn how to access and edit the Mapbox GL style

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

Once you know how you want to classify your data, for the layer.

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

Once you know how you want to classify your data, for the layer.

The colors use

Official documentation on data-driven styling support in the Mapbox GL Style Spec is here:

https://www.mapbox.com/help/how-map-design-works/#data-driven-styles
Editing Map Style Code
http://axismaps.github.io/thematic-cartography/articles/classification.html
Edit the Map Style Code
http://axismaps.github.io/thematic-cartography/articles/classification.html
Edit the Map Style Code
HTML CSS Hex colors
https://www.mapbox.com/mapbox-gl-style-spec/#types-function
https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/