summaryrefslogtreecommitdiff
path: root/platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs
diff options
context:
space:
mode:
Diffstat (limited to 'platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs')
-rw-r--r--platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs75
1 files changed, 7 insertions, 68 deletions
diff --git a/platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs b/platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs
index 7745ab07a1..e41ac1c832 100644
--- a/platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs
+++ b/platform/darwin/docs/guides/Using Style Functions at Runtime.md.ejs
@@ -1,9 +1,9 @@
-
<%
const os = locals.os;
const iOS = os === 'iOS';
const macOS = os === 'macOS';
const cocoaPrefix = iOS ? 'UI' : 'NS';
+ const guide = 'UsingStyleFunctionsAtRuntime';
-%>
<!--
This file is generated.
@@ -36,13 +36,7 @@ The documentation for each individual style layer property notes which style fun
Stops are key-value pairs that that determine a style value. With a `MGLCameraSourceFunction` stop, you can use a dictionary with a zoom level for a key and a `MGLStyleValue` for the value. For example, you can use a stops dictionary with zoom levels 0, 10, and 20 as keys, and yellow, orange, and red as the values. A `MGLSourceStyleFunction` uses the relevant attribute value as the key.
-```swift
-let stops = [0: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .yellow),
- 2.5: MGLStyleValue(rawValue: .orange),
- 5: MGLStyleValue(rawValue: .red),
- 7.5: MGLStyleValue(rawValue: .blue),
- 10: MGLStyleValue(rawValue: .white)]
-```
+<%- guideExample(guide, 'Stops', os) %>
## Interpolation mode
@@ -54,28 +48,7 @@ The effect a key has on the style value is determined by the interpolation mode.
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.
-```swift
-let url = URL(string: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")!
-let symbolSource = MGLSource(identifier: "source")!
-let symbolLayer = MGLSymbolStyleLayer(identifier: "place-city-sm", source: symbolSource)
-
-let source = MGLShapeSource(identifier: "earthquakes", url: url, options: nil)
-style.addSource(source)
-
-let stops = [0: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .yellow),
- 2.5: MGLStyleValue(rawValue: .orange),
- 5: MGLStyleValue(rawValue: .red),
- 7.5: MGLStyleValue(rawValue: .blue),
- 10: MGLStyleValue(rawValue: .white)]
-
-let layer = MGLCircleStyleLayer(identifier: "circles", source: source)
-layer.circleColor = MGLStyleValue(interpolationMode: .exponential,
- sourceStops: stops,
- attributeName: "mag",
- options: [.defaultValue: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .green)])
-layer.circleRadius = MGLStyleValue(rawValue: 10)
-style.insertLayer(layer, below: symbolLayer)
-```
+<%- guideExample(guide, 'Linear', os) %>
![exponential mode](img/data-driven-styling/exponential.png)
@@ -90,15 +63,7 @@ Here’s a visualization from Mapbox Studio (see [Working with Mapbox Studio](wo
The example below increases a layer’s `circleRadius` exponentially based on a map’s zoom level. The `MGLStyleFunctionOptionInterpolationBase` is `1.5`.
-```swift
-let stops = [12: MGLStyleValue<NSNumber>(rawValue: 0.5),
- 14: MGLStyleValue(rawValue: 2),
- 18: MGLStyleValue(rawValue: 18)]
-
-layer.circleRadius = MGLStyleValue(interpolationMode: .exponential,
- cameraStops: stops,
- options: [.interpolationBase: 1.5])
-```
+<%- guideExample(guide, 'Exponential', os) %>
### Interval
@@ -106,18 +71,7 @@ layer.circleRadius = MGLStyleValue(interpolationMode: .exponential,
When we use the stops dictionary given above with an interval interpolation mode, we create ranges where earthquakes with a magnitude of 0 to just less than 2.5 would be yellow, 2.5 to just less than 5 would be orange, and so on.
-```swift
-let stops = [0: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .yellow),
- 2.5: MGLStyleValue(rawValue: .orange),
- 5: MGLStyleValue(rawValue: .red),
- 7.5: MGLStyleValue(rawValue: .blue),
- 10: MGLStyleValue(rawValue: .white)]
-
-layer.circleColor = MGLStyleValue(interpolationMode: .interval,
- sourceStops: stops,
- attributeName: "mag",
- options: [.defaultValue: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .green)])
-```
+<%- guideExample(guide, 'Interval', os) %>
![interval mode](img/data-driven-styling/interval.png)
@@ -127,17 +81,7 @@ At each stop, `MGLInterpolationModeCategorical` produces an output value equal t
There are three main types of events in the dataset: earthquakes, explosions, and quarry blasts. In this case, the color of the circle layer will be determined by the type of event, with a default value of blue to catch any events that do not fall into any of those categories.
-```swift
-let categoricalStops = ["earthquake": MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .orange),
- "explosion": MGLStyleValue(rawValue: .red),
- "quarry blast": MGLStyleValue(rawValue: .yellow)]
-
-layer.circleColor = MGLStyleValue(interpolationMode: .categorical,
- sourceStops: categoricalStops,
- attributeName: "type",
- options: [.defaultValue: MGLStyleValue<<%- cocoaPrefix %>Color>(rawValue: .blue)])
-
-```
+<%- guideExample(guide, 'Categorical', os) %>
![categorical mode](img/data-driven-styling/categorical1.png) ![categorical mode](img/data-driven-styling/categorical2.png)
@@ -145,12 +89,7 @@ layer.circleColor = MGLStyleValue(interpolationMode: .categorical,
`MGLInterpolationModeIdentity` uses the attribute’s value as the style value. For example, you can set the `circleRadius` to the earthquake’s magnitude. Since the attribute value itself will be used as the style value, `sourceStops` should be set to `nil`.
-```swift
-layer.circleRadius = MGLStyleValue(interpolationMode: .identity,
- sourceStops: nil,
- attributeName: "mag",
- options: [.defaultValue: MGLStyleValue<NSNumber>(rawValue: 0)])
-```
+<%- guideExample(guide, 'Identity', os) %>
![identity mode](img/data-driven-styling/identity.png)