Skip to main content

Displaying Radar Maps on iOS

To create a map on iOS, add MapLibre Native to your Xcode project.

Then, add assets for the Radar logo and optionally for a marker. You can download assets here.

Finally, add a MapView to a ViewController with a Radar style URL that includes your publishable key:

import SwiftUIimport MapLibre
struct MapView: UIViewRepresentable {        func makeCoordinator() -> MapView.Coordinator {        Coordinator(self)    }        func makeUIView(context: Context) -> MLNMapView {        // create a map
        let style = "radar-default-v1"        let publishableKey = "prj_live_pk..."        let styleURL = URL(string: "https://api.radar.io/maps/styles/\(style)?publishableKey=\(publishableKey)")
        let mapView = MLNMapView(frame: .zero, styleURL: styleURL)        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]        mapView.logoView.isHidden = true
        mapView.setCenter(          CLLocationCoordinate2D(latitude: 40.7342, longitude: -73.9911),          zoomLevel: 11,          animated: false        )                // add the Radar logo
        let logoImageView = UIImageView(image: UIImage(named: "radar-logo"))        logoImageView.translatesAutoresizingMaskIntoConstraints = false        mapView.addSubview(logoImageView)
        NSLayoutConstraint.activate([            logoImageView.bottomAnchor.constraint(equalTo: mapView.safeAreaLayoutGuide.bottomAnchor, constant: -10),            logoImageView.leadingAnchor.constraint(equalTo: mapView.safeAreaLayoutGuide.leadingAnchor, constant: 10),            logoImageView.widthAnchor.constraint(equalToConstant: 74),            logoImageView.heightAnchor.constraint(equalToConstant: 26)        ])
        mapView.delegate = context.coordinator
        return mapView    }        func updateUIView(_ uiView: MLNMapView, context: Context) {
    }        // add a marker on map load
    class Coordinator: NSObject, MLNMapViewDelegate {        var control: MapView
        init(_ control: MapView) {            self.control = control        }
        func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {            addMarker(style: style, coordinate: CLLocationCoordinate2D(latitude: 40.7342, longitude: -73.9911))        }
        func addMarker(style: MLNStyle, coordinate: CLLocationCoordinate2D) {            let point = MLNPointAnnotation()            point.coordinate = coordinate
            let shapeSource = MLNShapeSource(identifier: "marker-source", shape: point, options: nil)
            let shapeLayer = MLNSymbolStyleLayer(identifier: "marker-style", source: shapeSource)
            if let image = UIImage(named: "default-marker") {                style.setImage(image, forName: "marker")            }
            shapeLayer.iconImageName = NSExpression(forConstantValue: "marker")
            style.addSource(shapeSource)            style.addLayer(shapeLayer)        }    }}
Adding a Radar logo to the map is required in our Terms of Use.