Merge remote-tracking branch 'origin/mb-pages'

mapbox · Feb 1, 2017 · b701148 · b701148
2 parents e207068 + 3cee599
commit b701148
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 9 deletions.
diff --git a/docs/_data/roadmap.yml b/docs/_data/roadmap.yml
@@ -2,12 +2,6 @@
   term: "Active development"
   description: "Things actively being built right now."
   items:
-    -
-      name: Custom canvas layer type
-      issues: ["3580"]
-    -
-      name: Source loading and errored patterns
-      issues: ["3280"]
     -
       name: Client-side terrain rendering
       issues: ["3730"]
@@ -17,6 +11,9 @@
     -
       name: Property aggregation on clustered features
       issues: ["2412"]
+    -
+      name: Property functions for symbol paint properties
+      issues: ["2730"]
 -
   term: "Upcoming"
   description: "Things we hope to start building in the next several months."
@@ -33,9 +30,6 @@
     -
       name: Custom source type API
       project: 2
-    -
-      name: Property functions for symbol paint properties
-      issues: ["2730"]
     -
       name: Custom WebGL layer type
       issues: ["281"]
diff --git a/docs/_posts/examples/3400-01-31-data-driven-lines.html b/docs/_posts/examples/3400-01-31-data-driven-lines.html
@@ -0,0 +1,95 @@
+---
+layout: example 
+category: example 
+title: Style lines using an identity property function.
+description: Using an identity line-color property function for a visualization 
+tags: 
+- layers 
+---
+<div id='map'></div>
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-122.48383155304096, 37.82882682974591],
+    zoom: 16
+});
+
+var red = '#F7455D';
+var blue = '#33C9EB';
+
+map.on('load', function() {
+    map.addLayer({
+        'id': 'lines',
+        'type': 'line',
+        'source': {
+            'type': 'geojson',
+            'data': {
+                'type': 'FeatureCollection',
+                'features': [{
+                    'type': 'Feature',
+                    'properties': {
+                        'color': red,
+                    },
+                    'geometry': {
+                        'type': 'LineString',
+                        'coordinates': [
+                            [-122.4833858013153, 37.829607404976734],
+                            [-122.4830961227417, 37.82932776098012],
+                            [-122.4830746650696, 37.82932776098012],
+                            [-122.48218417167662, 37.82889558180985],
+                            [-122.48218417167662, 37.82890193740421],
+                            [-122.48221099376678, 37.82868372835086],
+                            [-122.4822163581848, 37.82868372835086],
+                            [-122.48205006122589, 37.82801003030873]
+                        ]
+                    }
+                }, {
+                    'type': 'Feature',
+                    'properties': {
+                        'color': blue
+                    },
+                    'geometry': {
+                        'type': 'LineString',
+                        'coordinates': [
+                            [-122.48393028974533, 37.829471820141016],
+                            [-122.48395174741744, 37.82940826466351],
+                            [-122.48395174741744, 37.829412501697064],
+                            [-122.48423874378203, 37.829357420242125],
+                            [-122.48422533273697, 37.829361657278575],
+                            [-122.48459815979002, 37.8293425906126],
+                            [-122.48458743095398, 37.8293447091313],
+                            [-122.4847564101219, 37.82932776098012],
+                            [-122.48474299907684, 37.829331998018276],
+                            [-122.4849334359169, 37.829298101706186],
+                            [-122.48492807149889, 37.82930022022615],
+                            [-122.48509705066681, 37.82920488676767],
+                            [-122.48509168624878, 37.82920912381288],
+                            [-122.48520433902739, 37.82905870855876],
+                            [-122.48519897460936, 37.82905870855876],
+                            [-122.4854403734207, 37.828594749716714],
+                            [-122.48543500900269, 37.82860534241688],
+                            [-122.48571664094925, 37.82808206121068],
+                            [-122.48570591211319, 37.82809689109353],
+                            [-122.4858346581459, 37.82797189627337],
+                            [-122.48582661151886, 37.82797825194729],
+                            [-122.4859634041786, 37.82788503534145],
+                            [-122.48595803976059, 37.82788927246246],
+                            [-122.48605459928514, 37.82786596829394]
+                        ]
+                    }
+                }]
+            }
+        },
+        // 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'
+            }
+        }
+    });
+});
+</script>