Polygon Selection Change Color

is there any way to change the default color of the mapbox draw tool, i'd like to draw polygons with green color instead of the default orange. something like var draw = new Mapbox

Solution 1:

You can add a styles parameter like this:

const mapDraw = new MapboxDraw({ styles: [
  // ACTIVE (being drawn)// polygon fill
  {
    "id": "gl-draw-polygon-fill",
    "type": "fill",
    "filter": \["all", \["==", "$type", "Polygon"\], \["!=", "mode", "static"\]\],
    "paint": {
      "fill-color": "#D20C0C",
      "fill-outline-color": "#D20C0C",
      "fill-opacity": 0.1
    }
  },
  // polygon outline stroke// This doesn't style the first edge of the polygon, which uses the line stroke styling instead
  {
    "id": "gl-draw-polygon-stroke-active",
    "type": "line",
    "filter": \["all", \["==", "$type", "Polygon"\], \["!=", "mode", "static"\]\],
    "layout": {
      "line-cap": "round",
      "line-join": "round"
    },
    "paint": {
      "line-color": "#D20C0C",
      "line-dasharray": \[0.2, 2\],
      "line-width": 3
    }
  },
  // vertex points
  {
    "id": "gl-draw-polygon-and-line-vertex-active",
    "type": "circle",
    "filter": \["all", \["==", "meta", "vertex"\], \["==", "$type", "Point"\], \["!=", "mode", "static"\]\],
    "paint": {
      "circle-radius": 3,
      "circle-color": "#D20C0C",
    }
  }
] })]

Solution 2:

just for clarification, if you use this method, and want to draw points as well as polygons, you have to define them;

const mapDraw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    point: true,
    trash: true
  },
  styles: [{
      "id": "gl-draw-polygon-fill",
      "type": "fill",
      "paint": {
        "fill-color": "#0BD1C3",
        "fill-outline-color": "#D20C0C",
        "fill-opacity": 0.1
      }
    },
    //*** HERE YOU DEFINE POINT STYLE *** //
    {
      "id": "gl-draw-point",
      "type": "circle",
      "paint": {
        "circle-radius": 5,
        "circle-color": "#ff0202"
      }
    } //**********************************//
    ,
    {
      "id": "gl-draw-polygon-stroke-active",
      "type": "line",
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "#D20C0C",
        "line-dasharray": [0.2, 2],
        "line-width": 3
      }
    },
    {
      "id": "gl-draw-polygon-and-line-vertex-active",
      "type": "circle",
      "filter": ["all", ["==", "meta", "vertex"],
        ["==", "$type", "Point"],
        ["!=", "mode", "static"]
      ],
      "paint": {
        "circle-radius": 3,
        "circle-color": "#470CD1",
      }
    }
  ]
})
map.addControl(mapDraw);