<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Choropleth</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'https://anton9ov.github.io/osm-liberty/style.json',
            center: [27.555490, 53.898801],
            zoom: 11
        });

        map.on('load', function() {
            
            map.addSource("buildings", {
                type: "geojson",
                data: "test2.geojson"
            });

            map.addLayer({
                "id": "buildingsBoundaries",
                "type": "fill",
                "source": "buildings",
                "paint": {
                    
                    "fill-color": [
                        'interpolate',
                        ['linear'],
                        ['get', 'testValue'],
                        10, '#F2F12D',
                        20, '#CA8323',
                        30, '#723122'
                    ],

                    /*'fill-color': {
                        property: 'testValue',
                        stops: [[10, '#F2F12D'], [20, '#CA8323'], [30, '#723122']]
                    },*/

                    "fill-opacity": 0.5
                }
            });
        });
    </script>
</body>
</html>
{
"type": "FeatureCollection",
"name": "test1",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "testValue": 10 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 27.458676115796219, 53.938712084285847 ], [ 27.518679889623918, 53.93771429722559 ], [ 27.515289845904835, 53.850215519321381 ], [ 27.454608063333321, 53.851215397722143 ], [ 27.458676115796219, 53.938712084285847 ] ] ] ] } },
{ "type": "Feature", "properties": { "testValue": 20 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 27.527833007665436, 53.948289626009789 ], [ 27.590548816468395, 53.948489134746062 ], [ 27.593599855815565, 53.843015689717738 ], [ 27.522408937714903, 53.841615579050824 ], [ 27.527833007665436, 53.948289626009789 ] ] ] ] } },
{ "type": "Feature", "properties": { "testValue": 30 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 27.602074965113264, 53.938712084285847 ], [ 27.664112765172408, 53.938712084285847 ], [ 27.667841813263394, 53.850815449228094 ], [ 27.604787000088525, 53.846615759304228 ], [ 27.602074965113264, 53.938712084285847 ] ] ] ] } }
]
}