Zum Inhalt

GeoJSON-Layer (iOS)

Laden und zeigen Sie GeoJSON-Daten auf einer mit SmartMaps gestalteten Karte an.

MapSession erforderlich

Denken Sie daran, die MapSession in Ihre App zu integrieren. Die MapSession muss periodisch alle 10 Minuten aufgerufen werden, solange die Karte aktiv ist.

GeoJSON-Linie hinzufügen

import UIKit
import MapLibre

class GeoJSONViewController: UIViewController, MLNMapViewDelegate {
    private var mapView: MLNMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let styleURL = URL(string:
            "https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]&channel=app"
        )!

        mapView = MLNMapView(frame: view.bounds, styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self
        view.addSubview(mapView)
    }

    func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {
        let coordinates = [
            CLLocationCoordinate2D(latitude: 49.0069, longitude: 8.4037),
            CLLocationCoordinate2D(latitude: 49.4875, longitude: 8.4660),
            CLLocationCoordinate2D(latitude: 48.7758, longitude: 9.1829)
        ]

        let polyline = MLNPolylineFeature(coordinates: coordinates, count: UInt(coordinates.count))
        let source = MLNShapeSource(identifier: "route-source", shape: polyline, options: nil)
        style.addSource(source)

        let lineLayer = MLNLineStyleLayer(identifier: "route-layer", source: source)
        lineLayer.lineColor = NSExpression(forConstantValue: UIColor(red: 0.09, green: 0.20, blue: 0.36, alpha: 1))
        lineLayer.lineWidth = NSExpression(forConstantValue: 4)
        style.addLayer(lineLayer)

        // Fit camera to the line
        let bounds = MLNCoordinateBounds(
            sw: CLLocationCoordinate2D(latitude: 48.7758, longitude: 8.4037),
            ne: CLLocationCoordinate2D(latitude: 49.4875, longitude: 9.1829)
        )
        mapView.setVisibleCoordinateBounds(bounds, edgePadding: UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50), animated: true)
    }
}

GeoJSON-Polygon hinzufügen

func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {
    let coordinates = [
        CLLocationCoordinate2D(latitude: 48.99, longitude: 8.38),
        CLLocationCoordinate2D(latitude: 48.99, longitude: 8.44),
        CLLocationCoordinate2D(latitude: 49.02, longitude: 8.44),
        CLLocationCoordinate2D(latitude: 49.02, longitude: 8.38),
        CLLocationCoordinate2D(latitude: 48.99, longitude: 8.38)
    ]

    let polygon = MLNPolygonFeature(coordinates: coordinates, count: UInt(coordinates.count))
    let source = MLNShapeSource(identifier: "area-source", shape: polygon, options: nil)
    style.addSource(source)

    // Fill layer
    let fillLayer = MLNFillStyleLayer(identifier: "area-fill", source: source)
    fillLayer.fillColor = NSExpression(forConstantValue: UIColor(red: 0.09, green: 0.20, blue: 0.36, alpha: 0.3))
    style.addLayer(fillLayer)

    // Outline layer
    let outlineLayer = MLNLineStyleLayer(identifier: "area-outline", source: source)
    outlineLayer.lineColor = NSExpression(forConstantValue: UIColor(red: 0.09, green: 0.20, blue: 0.36, alpha: 1))
    outlineLayer.lineWidth = NSExpression(forConstantValue: 2)
    style.addLayer(outlineLayer)
}

GeoJSON von URL laden

func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {
    let url = URL(string: "https://example.com/data.geojson")!
    let source = MLNShapeSource(identifier: "remote-source", url: url, options: nil)
    style.addSource(source)

    let circleLayer = MLNCircleStyleLayer(identifier: "points-layer", source: source)
    circleLayer.circleRadius = NSExpression(forConstantValue: 6)
    circleLayer.circleColor = NSExpression(forConstantValue: UIColor(red: 0.09, green: 0.20, blue: 0.36, alpha: 1))
    style.addLayer(circleLayer)
}