debug/circles.html

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 3,
    center: [-77.01866, 38.888],
    style: 'mapbox://styles/mapbox/streets-v9',
    hash: true
});

map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.GeolocateControl());

map.on('load', function() {

    map.addSource('circles', {
        "type": "geojson",
        "data": "/test/integration/data/places.geojson"
    });

    map.addLayer({
        "id": "circles",
        "type": "circle",
        "source": "circles",
        "paint": {
            "circle-radius": [
                "interpolate",
                ["exponential", 2.0],
                ["zoom"],
                0, 5,
                5, ['*', ["get", "scalerank"], 20],
            ],
            "circle-color": [
                "match",
                ["get", "featureclass"],
                "cape", "orange",
                "island", "#0088ff",
                "plain", "yellow",
                "pole", "white",
                "waterfall", "blue",
                "red"
            ],
            "circle-pitch-scale": "map",
            "circle-pitch-alignment": "map"
        }
    });

    map.addLayer({
        "id": "labels",
        "type": "symbol",
        "source": "circles",
        "minzoom": 1,
        "layout": {
            "text-field": [
                "concat",
                ["get", "name"],
                " (",
                [
                    "coalesce",
                    ["get", "subregion"],
                    ["get", "region"]
                ],
                ")"
            ]
        }
    });
});

</script>
</body>
</html>