Mapbox GL circles

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
        <link rel="stylesheet" href="style.css">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
    </head>
    <body>
        <div id="map"></div>
        <script src="script.js"></script>
    </body>
</html>

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v8',
    center: [-96, 37.8],
    zoom: 2,
    interactive: true
});

map.on('style.load', function (e) {
    map.addSource('markers', {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "modelId": 1,
                },
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "modelId": 2,
                },
            }]
        }
    });
    map.addLayer({
        "id": "circles1",
        "source": "markers",
        "type": "circle",
        "paint": {
            "circle-radius": 10,
            "circle-color": "#007cbf",
            "circle-opacity": 0.5,
            "circle-stroke-width": 0,
        },
        "filter": ["==", "modelId", 1],
    });
    map.addLayer({
        "id": "circles2",
        "source": "markers",
        "type": "circle",
        "paint": {
            "circle-radius": 20,
            "circle-opacity": 0,
            "circle-stroke-width": 1,
            "circle-stroke-color": "#00bf7c",
            "circle-stroke-opacity": 1,
        },
        "filter": ["==", "modelId", 2],
    });
});

body {
    margin:0;
    padding:0;
}

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