CODEWITHSUNDEEP
colorsstylespolygonsmapbox-gl-js
user1916817
user1916817

Reputation: 83

Change colour of MabBox Draw Polygon

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).

Upvotes: 0

Views: 1262

Answers (1)

Prahlad
Prahlad

Reputation: 796

$(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>

Upvotes: 0

Related Questions