Migrate examples using stop functions to expressions

mapbox · Jan 12, 2018 · 9ac35b1 · 9ac35b1
1 parent 2cb3818
commit 9ac35b1
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 200 deletions.
diff --git a/docs/pages/example/3d-extrusion-floorplan.html b/docs/pages/example/3d-extrusion-floorplan.html
@@ -1,5 +1,4 @@
-<div id='map'>
-</div>
+<div id='map'></div>
 <script>
 var map = new mapboxgl.Map({
     container: 'map',
@@ -11,34 +10,28 @@
 });
 
 map.on('load', function() {
-
     map.addLayer({
         'id': 'room-extrusion',
         'type': 'fill-extrusion',
         'source': {
-            // Geojson Data source used in vector tiles, documented at
+            // GeoJSON Data source used in vector tiles, documented at
             // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
             'type': 'geojson',
             'data': '/mapbox-gl-js/assets/indoor-3d-map.geojson'
         },
         'paint': {
-            // See the Mapbox Style Spec for details on property functions
-            // https://www.mapbox.com/mapbox-gl-style-spec/#types-function
-            'fill-extrusion-color': {
-                // Get the fill-extrusion-color from the source 'color' property.
-                'property': 'color',
-                'type': 'identity'
-            },
-            'fill-extrusion-height': {
-                // Get fill-extrusion-height from the source 'height' property.
-                'property': 'height',
-                'type': 'identity'
-            },
-            'fill-extrusion-base': {
-                // Get fill-extrusion-base from the source 'base_height' property.
-                'property': 'base_height',
-                'type': 'identity'
-            },
+            // See the Mapbox Style Specification for details on data expressions.
+            // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
+
+            // Get the fill-extrusion-color from the source 'color' property.
+            'fill-extrusion-color': ['get', 'color'],
+
+            // Get fill-extrusion-height from the source 'height' property.
+            'fill-extrusion-height': ['get', 'height'],
+
+            // Get fill-extrusion-base from the source 'base_height' property.
+            'fill-extrusion-base': ['get', 'base_height'],
+
             // Make extrusions slightly opaque for see through indoor walls.
             'fill-extrusion-opacity': 0.5
         }

diff --git a/docs/pages/example/cluster.html b/docs/pages/example/cluster.html
@@ -28,24 +28,29 @@
         source: "earthquakes",
         filter: ["has", "point_count"],
         paint: {
-            "circle-color": {
-                property: "point_count",
-                type: "interval",
-                stops: [
-                    [0, "#51bbd6"],
-                    [100, "#f1f075"],
-                    [750, "#f28cb1"],
-                ]
-            },
-            "circle-radius": {
-                property: "point_count",
-                type: "interval",
-                stops: [
-                    [0, 20],
-                    [100, 30],
-                    [750, 40]
-                ]
-            }
+            // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
+            // with three steps to implement three types of circles:
+            //   * Blue, 20px circles when point count is less than 100
+            //   * Yellow, 30px circles when point count is between 100 and 750
+            //   * Pink, 40px circles when point count is greater than or equal to 750
+            "circle-color": [
+                "step",
+                ["get", "point_count"],
+                "#51bbd6",
+                100,
+                "#f1f075",
+                750,
+                "#f28cb1"
+            ],
+            "circle-radius": [
+                "step",
+                ["get", "point_count"],
+                20,
+                100,
+                30,
+                750,
+                40
+            ]
         }
     });
 

diff --git a/docs/pages/example/data-driven-circle-colors.html b/docs/pages/example/data-driven-circle-colors.html
@@ -23,17 +23,17 @@
                 'base': 1.75,
                 'stops': [[12, 2], [22, 180]]
             },
-            // color circles by ethnicity, using data-driven styles
-            'circle-color': {
-                property: 'ethnicity',
-                type: 'categorical',
-                stops: [
-                    ['White', '#fbb03b'],
-                    ['Black', '#223b53'],
-                    ['Hispanic', '#e55e5e'],
-                    ['Asian', '#3bb2d0'],
-                    ['Other', '#ccc']]
-            }
+            // color circles by ethnicity, using a match expression
+            // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
+            'circle-color': [
+                'match',
+                ['get', 'ethnicity'],
+                'White', '#fbb03b',
+                'Black', '#223b53',
+                'Hispanic', '#e55e5e',
+                'Asian', '#3bb2d0',
+                /* other */ '#ccc'
+            ]
         }
     });
 });

diff --git a/docs/pages/example/data-driven-circle-colors.js b/docs/pages/example/data-driven-circle-colors.js
@@ -1,6 +1,6 @@
 /*---
-title: Style circles using data-driven styling
-description: Using a categorical circle-color property function for a visualization
+title: Style circles with a data-driven property
+description: Creating a visualization with a data expression for circle-color
 tags:
   - layers
 pathname: /mapbox-gl-js/example/data-driven-circle-colors/

diff --git a/docs/pages/example/data-driven-lines.html b/docs/pages/example/data-driven-lines.html
@@ -7,9 +7,6 @@
     zoom: 16
 });
 
-var red = '#F7455D';
-var blue = '#33C9EB';
-
 map.on('load', function() {
     map.addLayer({
         'id': 'lines',
@@ -21,7 +18,7 @@
                 'features': [{
                     'type': 'Feature',
                     'properties': {
-                        'color': red,
+                        'color': '#F7455D' // red
                     },
                     'geometry': {
                         'type': 'LineString',
@@ -39,7 +36,7 @@
                 }, {
                     'type': 'Feature',
                     'properties': {
-                        'color': blue
+                        'color': '#33C9EB' // blue
                     },
                     'geometry': {
                         'type': 'LineString',
@@ -73,14 +70,11 @@
                 }]
             }
         },
-        // The identity function does not take a 'stops' property.
-        // Instead, the property value (in this case, 'color') on the source will be the direct output.
         'paint': {
             'line-width': 3,
-            'line-color': {
-                'type': 'identity',
-                'property': 'color'
-            }
+            // Use a get expression (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-get)
+            // to set the line-color to a feature property value.
+            'line-color': ['get', 'color']
         }
     });
 });

diff --git a/docs/pages/example/data-driven-lines.js b/docs/pages/example/data-driven-lines.js
@@ -1,6 +1,6 @@
 /*---
-title: Style lines using an identity property function.
-description: Using an identity line-color property function for a visualization
+title: Style lines with a data-driven property
+description: Creating a visualization with a data expression for line-color
 tags:
   - layers
 pathname: /mapbox-gl-js/example/data-driven-lines/

diff --git a/docs/pages/example/data-join.html b/docs/pages/example/data-join.html
@@ -10,7 +10,7 @@
 });
 
 // Join local JSON data with vector tile geometry
-// USA unemplyoment rate in 2009
+// USA unemployment rate in 2009
 // Source https://data.bls.gov/timeseries/LNS14000000
 var maxValue = 13;
 var data = [
@@ -66,45 +66,35 @@
     {"STATE_ID": "56", "unemployment": 7.59}
 ];
 
-// Get the vector geometries to join
-// US Census Data Source
-// https://www.census.gov/geo/maps-data/data/cbf/cbf_state.html
-var mapId = "mapbox.us_census_states_2015";
-var layerName = "states";
-var vtMatchProp = "STATEFP";
-var dataMatchProp = "STATE_ID";
-var dataStyleProp = "unemployment";
-
 map.on('load', function() {
 
-    // Add source for state polygons hosted on Mapbox
+    // Add source for state polygons hosted on Mapbox, based on US Census Data:
+    // https://www.census.gov/geo/maps-data/data/cbf/cbf_state.html
     map.addSource("states", {
         type: "vector",
-        url: "mapbox://" + mapId
+        url: "mapbox://mapbox.us_census_states_2015"
     });
 
-    // First value is the default, used where the is no data
-    var stops = [["0", "rgba(0,0,0,0)"]];
+    var expression = ["match", ["get", "STATEFP"]];
 
     // Calculate color for each state based on the unemployment rate
     data.forEach(function(row) {
-        var green = ((row[dataStyleProp] / maxValue) * 255);
+        var green = (row["unemployment"] / maxValue) * 255;
         var color = "rgba(" + 0 + ", " + green + ", " + 0 + ", 1)";
-        stops.push([row[dataMatchProp], color]);
+        expression.push(row["STATE_ID"], color);
     });
 
+    // Last value is the default, used where there is no data
+    expression.push("rgba(0,0,0,0)");
+
     // Add layer from the vector tile source with data-driven style
     map.addLayer({
         "id": "states-join",
         "type": "fill",
         "source": "states",
-        "source-layer": layerName,
+        "source-layer": "states",
         "paint": {
-            "fill-color": {
-                "property": vtMatchProp,
-                "type": "categorical",
-                "stops": stops
-            }
+            "fill-color": expression
         }
     }, 'waterway-label');
 });