[ios, macos] updated screenshots

14 files changed, 17 insertions, 10 deletions

diff --git a/platform/darwin/docs/guides/Style Layers Using Expressions.md.ejs b/platform/darwin/docs/guides/Style Layers Using Expressions.md.ejs
index 3865ad1c98..f80396bf89 100644
--- a/platform/darwin/docs/guides/Style Layers Using Expressions.md.ejs
+++ b/platform/darwin/docs/guides/Style Layers Using Expressions.md.ejs
@@ -17,7 +17,6 @@
 Runtime styling removes the inconvenience of manually calculating intermediate values between different zoom levels or creating a multitude of style layers to handle homogeneous features in the map content. For example, if your content source indicates the prices of hotels in an area, you can color-code the hotels by price, relying on a data expression to smoothly interpolate among desired colors without having to specify the color for each exact price.
 *Data-driven styling* specifically refers to the use of non-constant expressions to vary the map’s appearance based on data in a content source.
 You can also specify expressions in a style JSON file, to be applied automatically when the map loads. See the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec/#types-function) for details.
-![available bikes](img/data-driven-styling/citibikes.png) ![subway lines](img/data-driven-styling/polylineExample.png)
 
 This guide uses earthquake data from the [U.S. Geological Survey](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) and data-driven styling to style a map based on attributes. For more information about how to work with GeoJSON data in our iOS SDK, please see our [working with GeoJSON data](working-with-geojson-data.html) guide. To learn more about supported expressions functions, see our [Predicates and Expressions](predicates-and-expressions.html) guide. The Predicates and Expressions guide also outlines Mapbox custom functions that can be used to dynamically style a map.
 
@@ -45,7 +44,7 @@ The effect a key has on the layer style value is determined by the interpolation
 The stops dictionary below, for example, shows colors that continuously shift from yellow to orange to red to blue to white based on the attribute value.
 <%- guideExample(guide, 'Linear', os) %>
 
-![exponential mode](img/data-driven-styling/exponential.png)
+![exponential mode](img/data-driven-styling/linear.png)
 
 ### Exponential
 
@@ -91,10 +90,14 @@ Some built-in expressions functions can be applied to attribute values to style
 
 <%- guideExample(guide, 'Multiply', os) %>
 
+![multiply magnitude](img/data-driven-styling/multiply.png)
+
 Through expressions, you can also cast attribute values in order to use them. One example is to cast an integer as an `NSString` and use it as a text value.
 
 <%- guideExample(guide, 'Cast', os) %>
 
+![cast a value](img/data-driven-styling/cast.png)
+
 <% if (iOS) { -%>
 
   ##Migrating from Style Functions to Expressions
diff --git a/platform/darwin/docs/img/data-driven-styling/cast.png b/platform/darwin/docs/img/data-driven-styling/cast.png
new file mode 100644
index 0000000000..e5b40b4ffa
--- /dev/null
+++ b/platform/darwin/docs/img/data-driven-styling/cast.png
diff --git a/platform/darwin/docs/img/data-driven-styling/categorical1.png b/platform/darwin/docs/img/data-driven-styling/categorical1.png
index 2dafe8b56e..c47b4877cd 100644
--- a/platform/darwin/docs/img/data-driven-styling/categorical1.png
+++ b/platform/darwin/docs/img/data-driven-styling/categorical1.png
diff --git a/platform/darwin/docs/img/data-driven-styling/categorical2.png b/platform/darwin/docs/img/data-driven-styling/categorical2.png
index 322a48df57..e38b0ba3c0 100644
--- a/platform/darwin/docs/img/data-driven-styling/categorical2.png
+++ b/platform/darwin/docs/img/data-driven-styling/categorical2.png
diff --git a/platform/darwin/docs/img/data-driven-styling/citibikes.png b/platform/darwin/docs/img/data-driven-styling/citibikes.png
deleted file mode 100644
index b65ff3ef16..0000000000
--- a/platform/darwin/docs/img/data-driven-styling/citibikes.png
+++ /dev/null
diff --git a/platform/darwin/docs/img/data-driven-styling/exponential.png b/platform/darwin/docs/img/data-driven-styling/exponential.png
deleted file mode 100644
index 73342cd0d7..0000000000
--- a/platform/darwin/docs/img/data-driven-styling/exponential.png
+++ /dev/null
diff --git a/platform/darwin/docs/img/data-driven-styling/identity.png b/platform/darwin/docs/img/data-driven-styling/identity.png
index b00109296b..3355694ec9 100644
--- a/platform/darwin/docs/img/data-driven-styling/identity.png
+++ b/platform/darwin/docs/img/data-driven-styling/identity.png
diff --git a/platform/darwin/docs/img/data-driven-styling/interval.png b/platform/darwin/docs/img/data-driven-styling/interval.png
index 97a64eba2b..38671bae9b 100644
--- a/platform/darwin/docs/img/data-driven-styling/interval.png
+++ b/platform/darwin/docs/img/data-driven-styling/interval.png
diff --git a/platform/darwin/docs/img/data-driven-styling/linear.png b/platform/darwin/docs/img/data-driven-styling/linear.png
new file mode 100644
index 0000000000..bab59879a5
--- /dev/null
+++ b/platform/darwin/docs/img/data-driven-styling/linear.png
diff --git a/platform/darwin/docs/img/data-driven-styling/multiply.png b/platform/darwin/docs/img/data-driven-styling/multiply.png
new file mode 100644
index 0000000000..df42f243e1
--- /dev/null
+++ b/platform/darwin/docs/img/data-driven-styling/multiply.png
diff --git a/platform/darwin/docs/img/data-driven-styling/polylineExample.png b/platform/darwin/docs/img/data-driven-styling/polylineExample.png
deleted file mode 100644
index cc8cf9f5d1..0000000000
--- a/platform/darwin/docs/img/data-driven-styling/polylineExample.png
+++ /dev/null
diff --git a/platform/darwin/test/MGLDocumentationGuideTests.swift b/platform/darwin/test/MGLDocumentationGuideTests.swift
index 9c260a88c1..df610a8c44 100644
--- a/platform/darwin/test/MGLDocumentationGuideTests.swift
+++ b/platform/darwin/test/MGLDocumentationGuideTests.swift
@@ -174,8 +174,7 @@ class MGLDocumentationGuideTests: XCTestCase, MGLMapViewDelegate {
                 NSColor.orange, NSColor.red, NSColor.yellow, defaultColor)
         #else
             let defaultColor = UIColor.blue
-            layer.circleColor = NSExpression(
-            format: "MGL_MATCH(type, 'earthquake', %@, 'explosion', %@, 'quarry blast', %@, %@)",
+            layer.circleColor = NSExpression(format: "MGL_MATCH(type, 'earthquake', %@, 'explosion', %@, 'quarry blast', %@, %@)",
                 UIColor.orange, UIColor.red, UIColor.yellow, defaultColor)
         #endif
         //#-end-example-code
diff --git a/platform/ios/docs/guides/Style Layers Using Expressions.md b/platform/ios/docs/guides/Style Layers Using Expressions.md
index 69e3d7f95f..fec8190d00 100644
--- a/platform/ios/docs/guides/Style Layers Using Expressions.md
+++ b/platform/ios/docs/guides/Style Layers Using Expressions.md
@@ -10,7 +10,6 @@
 Runtime styling removes the inconvenience of manually calculating intermediate values between different zoom levels or creating a multitude of style layers to handle homogeneous features in the map content. For example, if your content source indicates the prices of hotels in an area, you can color-code the hotels by price, relying on a data expression to smoothly interpolate among desired colors without having to specify the color for each exact price.
 *Data-driven styling* specifically refers to the use of non-constant expressions to vary the map’s appearance based on data in a content source.
 You can also specify expressions in a style JSON file, to be applied automatically when the map loads. See the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec/#types-function) for details.
-![available bikes](img/data-driven-styling/citibikes.png) ![subway lines](img/data-driven-styling/polylineExample.png)
 
 This guide uses earthquake data from the [U.S. Geological Survey](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) and data-driven styling to style a map based on attributes. For more information about how to work with GeoJSON data in our iOS SDK, please see our [working with GeoJSON data](working-with-geojson-data.html) guide. To learn more about supported expressions functions, see our [Predicates and Expressions](predicates-and-expressions.html) guide. The Predicates and Expressions guide also outlines Mapbox custom functions that can be used to dynamically style a map.
 
@@ -67,7 +66,7 @@ layer.circleRadius = NSExpression(forConstantValue: 10)
 mapView.style?.insertLayer(layer, below: symbolLayer)
 ```
 
-![exponential mode](img/data-driven-styling/exponential.png)
+![exponential mode](img/data-driven-styling/linear.png)
 
 ### Exponential
 
@@ -117,8 +116,7 @@ There are three main types of events in the USGS dataset: earthquakes, explosion
 
 ```swift
 let defaultColor = UIColor.blue
-layer.circleColor = NSExpression(
-format: "MGL_MATCH(type, 'earthquake', %@, 'explosion', %@, 'quarry blast', %@, %@)",
+layer.circleColor = NSExpression(format: "MGL_MATCH(type, 'earthquake', %@, 'explosion', %@, 'quarry blast', %@, %@)",
     UIColor.orange, UIColor.red, UIColor.yellow, defaultColor)
 ```
 
@@ -142,6 +140,8 @@ Some built-in expressions functions can be applied to attribute values to style
 layer.circleRadius = NSExpression(forFunction: "multiply:by:", arguments: [NSExpression(forKeyPath: "mag"), 3])
 ```
 
+![multiply magnitude](img/data-driven-styling/multiply.png)
+
 Through expressions, you can also cast attribute values in order to use them. One example is to cast an integer as an `NSString` and use it as a text value.
 
 ```swift
@@ -150,6 +150,8 @@ magnitudeLayer.text = NSExpression(format: "CAST(mag, 'NSString')")
 mapView.style?.addLayer(magnitudeLayer)
 ```
 
+![cast a value](img/data-driven-styling/cast.png)
+
 
   ##Migrating from Style Functions to Expressions
 
diff --git a/platform/macos/docs/guides/Style Layers Using Expressions.md b/platform/macos/docs/guides/Style Layers Using Expressions.md
index 478b31dc95..a45ef8945a 100644
--- a/platform/macos/docs/guides/Style Layers Using Expressions.md
+++ b/platform/macos/docs/guides/Style Layers Using Expressions.md
@@ -10,7 +10,6 @@
 Runtime styling removes the inconvenience of manually calculating intermediate values between different zoom levels or creating a multitude of style layers to handle homogeneous features in the map content. For example, if your content source indicates the prices of hotels in an area, you can color-code the hotels by price, relying on a data expression to smoothly interpolate among desired colors without having to specify the color for each exact price.
 *Data-driven styling* specifically refers to the use of non-constant expressions to vary the map’s appearance based on data in a content source.
 You can also specify expressions in a style JSON file, to be applied automatically when the map loads. See the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec/#types-function) for details.
-![available bikes](img/data-driven-styling/citibikes.png) ![subway lines](img/data-driven-styling/polylineExample.png)
 
 This guide uses earthquake data from the [U.S. Geological Survey](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) and data-driven styling to style a map based on attributes. For more information about how to work with GeoJSON data in our iOS SDK, please see our [working with GeoJSON data](working-with-geojson-data.html) guide. To learn more about supported expressions functions, see our [Predicates and Expressions](predicates-and-expressions.html) guide. The Predicates and Expressions guide also outlines Mapbox custom functions that can be used to dynamically style a map.
 
@@ -67,7 +66,7 @@ layer.circleRadius = NSExpression(forConstantValue: 10)
 mapView.style?.insertLayer(layer, below: symbolLayer)
 ```
 
-![exponential mode](img/data-driven-styling/exponential.png)
+![exponential mode](img/data-driven-styling/linear.png)
 
 ### Exponential
 
@@ -142,6 +141,8 @@ Some built-in expressions functions can be applied to attribute values to style
 layer.circleRadius = NSExpression(forFunction: "multiply:by:", arguments: [NSExpression(forKeyPath: "mag"), 3])
 ```
 
+![multiply magnitude](img/data-driven-styling/multiply.png)
+
 Through expressions, you can also cast attribute values in order to use them. One example is to cast an integer as an `NSString` and use it as a text value.
 
 ```swift
@@ -150,6 +151,8 @@ magnitudeLayer.text = NSExpression(format: "CAST(mag, 'NSString')")
 mapView.style?.addLayer(magnitudeLayer)
 ```
 
+![cast a value](img/data-driven-styling/cast.png)
+
 ##Resources
 
 * [USGS](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php)