55 lines
2.4 KiB
Markdown
55 lines
2.4 KiB
Markdown
# Vector Tile Sources
|
||
|
||
Add and style a vector tile source
|
||
|
||
> This example uses UIKit
|
||
|
||
This example shows how a vector data source can be added and a style for it can be configured dynamically.
|
||
|
||
The tiles are [tiles around Innsbruck, Austria](https://github.com/maplibre/demotiles/tree/gh-pages/tiles-omt) that use the OpenMapTiles schema. We are interested in the [POIs](https://openmaptiles.org/schema/#poi) that are in the `poi` layer, and filter this further with an `NSPredicate` to only show POIs with a `class` of shop. Each POI has a `rank` which is normally used to reduce label density. In this example, we use it to demonstrate how a numeric attribute can be used for styling with the [step](https://maplibre.org/maplibre-style-spec/expressions/#step) expression. POIs with a rank between 0 and 10 get a red color, between 10 and 20 green, etc.
|
||
|
||
<!-- include-example(DDSCircleLayerExample) -->
|
||
|
||
```swift
|
||
class DDSCircleLayerExample: UIViewController, MLNMapViewDelegate {
|
||
var mapView: MLNMapView!
|
||
|
||
override func viewDidLoad() {
|
||
super.viewDidLoad()
|
||
|
||
mapView = MLNMapView(frame: view.bounds, styleURL: AMERICANA_STYLE)
|
||
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
|
||
mapView.tintColor = .darkGray
|
||
|
||
// Set the map’s center coordinate and zoom level.
|
||
let innsbruck = CLLocationCoordinate2D(latitude: 47.26497, longitude: 11.4088)
|
||
mapView.setCenter(innsbruck, animated: false)
|
||
mapView.zoomLevel = 14
|
||
|
||
mapView.delegate = self
|
||
view.addSubview(mapView)
|
||
}
|
||
|
||
// Wait until the style is loaded before modifying the map style.
|
||
func mapView(_: MLNMapView, didFinishLoading style: MLNStyle) {
|
||
let source = MLNVectorTileSource(identifier: "demotiles", configurationURL: URL(string: "https://demotiles.maplibre.org/tiles-omt/tiles.json")!)
|
||
|
||
style.addSource(source)
|
||
|
||
let layer = MLNCircleStyleLayer(identifier: "poi-shop-style", source: source)
|
||
|
||
layer.sourceLayerIdentifier = "poi"
|
||
layer.predicate = NSPredicate(format: "class == %@", "shop")
|
||
|
||
// Style the circle layer color based on the rank
|
||
layer.circleColor = NSExpression(mglJSONObject: ["step", ["get", "rank"], 0, "red", 10, "green", 20, "blue", 30, "purple", 40, "yellow"] as [Any])
|
||
layer.circleRadius = NSExpression(forConstantValue: 3)
|
||
|
||
style.addLayer(layer)
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
Map data from OpenStreetMap. Style uses OpenMapTiles. |