mapbox · asheemmamoowala · Apr 26, 2018 · Apr 13, 2018 · Feb 28, 2018 · Apr 13, 2018
diff --git a/bench/benchmarks.js b/bench/benchmarks.js
@@ -18,6 +18,7 @@ function register(Benchmark) {
 import Layout from './benchmarks/layout';
 import LayoutDDS from './benchmarks/layout_dds';
 import Paint from './benchmarks/paint';
+import PaintStates from './benchmarks/paint_states';
 import LayerBenchmarks from './benchmarks/layers';
 import Load from './benchmarks/map_load';
 import Validate from './benchmarks/style_validate';
@@ -31,6 +32,7 @@ import FilterEvaluate from './benchmarks/filter_evaluate';
 register(Layout);
 register(LayoutDDS);
 register(Paint);
+register(PaintStates);
 LayerBenchmarks.forEach(register);
 register(Load);
 register(Validate);

diff --git a/bench/benchmarks/paint_states.js b/bench/benchmarks/paint_states.js
@@ -0,0 +1,68 @@
+
+import style from '../data/empty.json';
+import Benchmark from '../lib/benchmark';
+import createMap from '../lib/create_map';
+
+function generateLayers(layer) {
+    const generated = [];
+    for (let i = 0; i < 50; i++) {
+        const id = layer.id + i;
+        generated.push(Object.assign({}, layer, {id: id}));
+    }
+    return generated;
+}
+
+const width = 1024;
+const height = 768;
+const zoom = 4;
+
+export default class PaintStates extends Benchmark {
+    setup() {
+        return fetch('/bench/data/naturalearth-land.json')
+            .then(response => response.json())
+            .then(data => {
+                this.numFeatures = data.features.length;
+                return Object.assign({}, style, {
+                    sources: {'land': {'type': 'geojson', 'data': data, 'maxzoom': 23}},
+                    layers: generateLayers({
+                        'id': 'layer',
+                        'type': 'fill',
+                        'source': 'land',
+                        'paint': {
+                            'fill-color': [
+                                'case',
+                                ['boolean', ['feature-state', 'bench'], false],
+                                ['rgb', 21, 210, 210],
+                                ['rgb', 233, 233, 233]
+                            ]
+                        }
+                    })
+                });
+            })
+            .then((style) => {
+                return  createMap({
+                    zoom,
+                    width,
+                    height,
+                    center: [-77.032194, 38.912753],
+                    style: style
+                }).then(map => {
+                    this.map = map;
+                });
+            });
+    }
+
+    bench() {
+        this.map._styleDirty = true;
+        this.map._sourcesDirty = true;
+        this.map._render();
+        for (let i = 0; i < this.numFeatures; i += 50) {
+            this.map.setFeatureState({ source: 'land', id: i }, { bench: true });
+        }
+        this.map._render();
+    }
+
+    teardown() {
+        this.map.remove();
+    }
+}
diff --git a/bench/data/naturalearth-land.json b/bench/data/naturalearth-land.json
diff --git a/debug/highlightpoints.html b/debug/highlightpoints.html
@@ -0,0 +1,68 @@
+<!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: 2.5,
+    center: [0, 0],
+    style: 'mapbox://styles/mapbox/light-v9',
+    hash: true
+});
+map.showTileBoundaries = true;
+map.on('load', function() {
+    map.addSource('places', {
+        type: "geojson",
+        data: "/test/integration/data/places.geojson"
+    });
+    map.addLayer({
+        id:"places",
+        source: "places",
+        type:"circle",
+        paint: {
+            "circle-radius": ["case",
+                ["boolean", ["feature-state", "hover"], false],
+                ["number", ["*", ["get", "scalerank"], 2]],
+                ["number", ["*", ["get", "scalerank"], 1.5]]
+            ],
+            "circle-color": ["case",
+                ["boolean", ["feature-state", "hover"], false],
+                ["rgb", 21, 210, 210],
+                ["rgb", 233, 103, 233]
+            ]
+        }
+    });
+    let hoveredFeature;
+    map.on('mousemove', 'places', function(e) {
+        if (e.features.length) {
+            const f = e.features[0];
+            if (!f.state.hover) {
+                map.setFeatureState(f, {'hover': true});
+                if (hoveredFeature) {
+                    map.setFeatureState(hoveredFeature, {'hover': false});
+                }
+                hoveredFeature = f;
+            }
+        }
+    });
+});
+
+</script>
+</body>
+</html>