Change colour of MabBox Draw Polygon - colors

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>