# Map styles

## Data-driven styles

To modify the width of circles and lines based on the zoom level, Mapbox [data-driven styles](https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/) 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](https://docs.mapbox.com/mapbox-gl-js/style-spec/other/#function-stops) and are set as show in the following code for styling lines in a vector tile layer.

```javascript
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.