Map styles

Styles and patterns used in the maps

Data-driven styles

To modify the width of circles and lines based on the zoom level, Mapbox data-driven styles are used to set stops set with pairs of zoom level and matching pixel width. This is used for the map in create, edit, and drawing modes. These pairs are stops and are set as show in the following code for styling lines in a vector tile layer.

return {
    id: this.layerIdName,
    type: "line",
    layout: {
        "line-join": "round",
        "line-cap": "round",
    },
    paint: {
        "line-color": "green",
    "line-width": {
        base: 1,
        stops: [
          [10, 1], // [zoom, width in px]
          [13, 2],
          [16, 10],
          [18, 25],
        ],
      },              
    },
}

The stops key above contain a 2D array which holds pairs of zoom levels and widths in pixels. Out-of-the-box, Mapbox will use calculate the values between these stops to adjust the circle radius linearly between stops levels.

Map control styles

The map controls styles are set to mimic those of Mapox GL JS. Constants like MAPBOX_PADDING_PIXELS and MAPBOX_CONTROL_BUTTON_WIDTH are set based on the padding and button widths of Mapbox zoom controls. The geocoder also uses the default Mapbox styles.