Change colour of MabBox Draw Polygon

Question

I'm creating polygons in MapBox using Mapbox draw as follows:

 polyshapeoutzone = {
                id: 'polyOut',
                type: 'Feature',
                properties: {},
                geometry: { type: 'Polygon', coordinates: [mysql2poly(values[1])]}
            };

I want to be able to change the polygon line and fill color on the fly (basically I have 2 polygons, I want 1 to be red and the other to be green). Is there a simple way to apply/change the colours on the fly for a given polygon (I don't care about vertex colours or the polygon colour when it's selected, I just want to be able to set each polygon's line and fill colour and change them dynamically).

Answer 1

$(function() {
if (!mapboxgl.supported()) {
      alert('Your browser does not support Mapbox GL');
  }
  var initMap = function(){
  mapboxgl.accessToken = 'pk.eyJ1IjoiamFtZXNwYWNrIiwiYSI6ImNqMDI5amtvZzAwNjIzM3QwYTZkbjk5c3MifQ.9jiCjBzXNG1IqvezOddnHA';

     var map = new mapboxgl.Map({
      container: 'multiple_poly',
             style: 'mapbox://styles/mapbox/satellite-v9',
       
      center: [103.32718927498,2.0123503108086],
      zoom: 15
  });

  map.on('load', function () {
   map.addSource("polygon_one", 
   {
   "type":"geojson",
   "data":{
    "type":"FeatureCollection",
     "features":[
      {"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.045157852226,26.303612426466],[73.045501174966,26.291685547272],[73.051166000414,26.299611287628],[73.045157852226,26.303612426466]]],"type":"Polygon"}},
     ]
    }
   });

   map.addSource("polygon_two", 
   {
   "type":"geojson",
   "data":{
    "type":"FeatureCollection",
     "features":[
      {"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.01923698434584,26.286793889676773],[73.01726287851736,26.274403503526514],[73.02696174635398,26.277635905719848],[73.02972176719453,26.28963931883034],[73.01923698434584,26.286793889676773]]],"type":"Polygon"}},
     ]
    }
   });
   map.addLayer({
          "id": "quota-one",
          "type": "line",
          "source": "polygon_one",
          "layout": {
                   "line-cap": "round",
                   "line-join": "round"
                 },
                 "paint": {
                   "line-color": "red",
                   "line-width": 3
                 },
          "filter": ["==", "$type", "Polygon"]
      });

      map.addLayer({
          "id": "quota-two",
          "type": "line",
          "source": "polygon_two",
          "layout": {
                   "line-cap": "round",
                   "line-join": "round"
                 },
                 "paint": {
                   "line-color": "green",
                   "line-width": 3
                 },
          "filter": ["==", "$type", "Polygon"]
      });
    
      map.flyTo({center:[73.01923698434584,26.286793889676773],zoom: 13});
  });
 }
  initMap();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet">


<div id="multiple_poly" style="width: 400px;height: 400px"></div>