Color interpolation (#3245)

Pass-through function interpolation property to mapbox-gl-function for customizable color space interpolation
mapbox · Oct 10, 2016 · b743b6e · b743b6e
1 parent cd6c761
commit b743b6e
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 2 deletions.
diff --git a/debug/color_spaces.html b/debug/color_spaces.html
@@ -0,0 +1,141 @@
+<!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%; }
+        #checkboxes {
+            position: absolute;
+            background: #fff;
+            top:0;
+            left:0;
+            padding:10px;
+        }
+        #buffer {
+            position: absolute;
+            top:100px;
+            left:0;
+            pointer-events: none;
+        }
+        #buffer div {
+            background-color: #fff;
+            padding: 5px 0;
+            text-indent: 10px;
+            white-space: nowrap;
+            text-shadow:
+               -1px -1px 0 #fff,
+                1px -1px 0 #fff,
+                -1px 1px 0 #fff,
+                 1px 1px 0 #fff;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<div id='checkboxes'>
+  <select onchange='pickInterpolation(this)'>
+    <option value='rgb'>rgb</option>
+    <option value='hcl'>hcl</option>
+    <option value='lab'>lab</option>
+  </select>
+</div>
+
+<div id='buffer' style="display:none">
+    <em>Waiting for data...</em>
+</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: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v9',
+    hash: true
+});
+
+map.addControl(new mapboxgl.Navigation());
+map.addControl(new mapboxgl.Geolocate());
+map.addControl(new mapboxgl.Scale());
+
+map.on('load', function() {
+    map.addSource('geojson', {
+        "type": "geojson",
+        "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson"
+    });
+
+    map.addLayer({
+        "id": "countries",
+        "type": "fill",
+        "source": "geojson",
+        "paint": {
+          "fill-color": {
+            "property": "pop_est",
+            "colorSpace": "lab",
+            "stops": [
+              [0, 'blue'],
+              [140041247, 'red']
+            ]
+          }
+        }
+    }, 'country-label-lg');
+
+    var bufferTimes = {};
+    map.on('tile.stats', function(bufferTimes) {
+        var _stats = [];
+        for (var name in bufferTimes) {
+            var value = Math.round(bufferTimes[name]);
+            if (isNaN(value)) continue;
+            var width = value;
+            _stats.push({name: name, value: value, width: width});
+        }
+        _stats = _stats.sort(function(a, b) { return b.value - a.value }).slice(0, 10);
+
+        var html = '';
+        for (var i in _stats) {
+            html += '<div style="width:' + _stats[i].width * 2 + 'px">' + _stats[i].value + 'ms - ' + _stats[i].name + '</div>';
+        }
+
+        document.getElementById('buffer').innerHTML = html;
+    });
+});
+
+map.on('click', function(e) {
+    if (e.originalEvent.shiftKey) return;
+    (new mapboxgl.Popup())
+        .setLngLat(map.unproject(e.point))
+        .setHTML("<h1>Hello World!</h1>")
+        .addTo(map);
+});
+
+function pickInterpolation(input) {
+  map.setPaintProperty('countries', 'fill-color', {
+    "property": "pop_est",
+    "colorSpace": input.value,
+    "stops": [
+      [0, 'blue'],
+      [140041247, 'red']
+    ]
+  });
+};
+
+// keyboard shortcut for comparing rendering with Mapbox GL native
+document.onkeypress = function(e) {
+    if (e.charCode === 111 && !e.shiftKey && !e.metaKey && !e.altKey) {
+        var center = map.getCenter();
+        location.href = "mapboxgl://?center=" + center.lat + "," + center.lng + "&zoom=" + map.getZoom() + "&bearing=" + map.getBearing();
+        return false;
+    }
+};
+</script>
+
+</body>
+</html>
diff --git a/js/style/style_declaration.js b/js/style/style_declaration.js
@@ -42,7 +42,8 @@ function StyleDeclaration(reference, value) {
 
         this.calculateInterpolationT = MapboxGLFunction.interpolated({
             stops: interpolationAmountStops,
-            base: value.base
+            base: value.base,
+            colorSpace: value.colorSpace
         });
     }
 }

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "geojson-vt": "^2.4.0",
     "gl-matrix": "^2.3.1",
     "grid-index": "^1.0.0",
-    "mapbox-gl-function": "^1.3.0",
+    "mapbox-gl-function": "mapbox/mapbox-gl-function#111a2b442be0689a65f5818dd2603c9b06962be0",
     "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#44b65f8090a74cbb0319664d010b8d8a8a1512b0",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#7d330d2abf1775abc95ab8b889089cf5ff579357",
     "mapbox-gl-supported": "^1.2.0",