Mapbox - Dynamic Polygon Style

For https://stackoverflow.com/questions/52411563/color-each-polygon-dynamically-using-mapbox

by Nikolay Petrov

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css">
<div id='map'></div>

CSS

#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZWN6YWprMSIsImEiOiJjamx0dm13ZDAwY29xM2tvZzAwMmpwendvIn0.OhZeYxhmqmesSidqtJOrwQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [28.33161, 57.81362],
    zoom: 14
});

var source = { 
	"type": "geojson", 
  "data": { 
  	"type": "FeatureCollection", "features": [ 
    	{ 
        "id": 1, 
        "type": "Feature", 
        "geometry": { "type": "Polygon", "coordinates": [[[28.3310727,57.8138172],[28.3311173,57.8133962],[28.3311212,57.8133603],[28.3313957,57.8133686],[28.3320879,57.8133894],[28.3320394,57.8138462],[28.3310727,57.8138172]]] } 
  		} 

] } };

var layer = document.getElementById('layer');

map.on('load', function () {
  map.addSource('mySource', source);

  map.addLayer({
    id: 'myLayer',
    source: 'mySource',
    //type: 'fill',
    type: 'circle',
  });
});