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 that use the OpenMapTiles schema. We are interested in the POIs 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 expression. POIs with a rank between 0 and 10 get a red color, between 10 and 20 green, etc.

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: "{"contact/admin/forURLs"}")!)

        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)
    }
}