MapLibre Native iOS
MapLibre Native renders the full vector outdoor style natively on iOS with hardware acceleration, including 3D terrain.
Full working example (UIKit): github.com/mapriot/map-examples/MaplibreNativeIosUIKit — complete Xcode project with API key management, custom attribution button, and proper
apiKeyinjection.
Installation
Swift Package Manager — add to Package.swift or in Xcode via File → Add Package Dependencies:
https://github.com/maplibre/maplibre-gl-native-distributionOr via CocoaPods:
pod 'MapLibre'Basic map (UIKit)
import UIKit
import MapLibre
class MapViewController: UIViewController, MLNMapViewDelegate {
var mapView: MLNMapView!
override func viewDidLoad() {
super.viewDidLoad()
let apiKey = "YOUR_API_KEY"
let styleURL = URL(string: "https://api.mapriot.com/styles/outdoor.json?apiKey=\(apiKey)")!
mapView = MLNMapView(frame: view.bounds, styleURL: styleURL)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.delegate = self
mapView.setCenter(
CLLocationCoordinate2D(latitude: 50.08, longitude: 14.42),
zoomLevel: 13,
animated: false
)
view.addSubview(mapView)
}
}API key injection
The style JSON references tile, font, and sprite URLs on api.mapriot.com. Each subrequest also needs your API key. On iOS, you can use a URLProtocol interceptor (similar to transformRequest in MapLibre GL JS) that appends ?apiKey= to all requests to api.mapriot.com.
See the full implementation in the map-examples UIKit project which includes a complete KeyManager and URL interceptor setup.
SwiftUI
import SwiftUI
import MapLibre
struct MapLibreView: UIViewRepresentable {
let apiKey: String
func makeUIView(context: Context) -> MLNMapView {
let styleURL = URL(string: "https://api.mapriot.com/styles/outdoor.json?apiKey=\(apiKey)")!
let mapView = MLNMapView(frame: .zero, styleURL: styleURL)
mapView.setCenter(
CLLocationCoordinate2D(latitude: 50.08, longitude: 14.42),
zoomLevel: 13,
animated: false
)
return mapView
}
func updateUIView(_ uiView: MLNMapView, context: Context) {}
}
struct ContentView: View {
var body: some View {
MapLibreView(apiKey: "YOUR_API_KEY")
.ignoresSafeArea()
}
}User location
mapView.showsUserLocation = true
mapView.userTrackingMode = .followAttribution
Include MapRiot and OSM attribution as required by the Terms of Service and OpenStreetMap license. The map-examples UIKit project demonstrates a custom attribution button that opens an action sheet with proper links to both copyright pages.