<!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 ] ] ] ] } }
]
}