문서 / 설정 / iOS / MapLibre

MapLibre 설정

MapLibre Native를 MapConductor에서 쓰는 절차입니다. API 키가 불필요해 가장 짧게 시작할 수 있습니다. 지도의 겉모습은 스타일 JSON의 배포처로 정해집니다.

PACKAGE

ios-for-maplibre

API KEY

불필요

MIN iOS

15.1

VIEW

MapLibreMapView

같은 프로바이더, 다른 플랫폼Android React

데모 보기매장 지도 · React ↗

시작하기 전에

Xcode 15 이상

디플로이 타깃 iOS 15.1 이상

STEP 01

Swift Package Manager로 추가한다

Xcode의 File > Add Package Dependencies에서 패키지 URL을 입력합니다. MapLibre Native SDK는 의존 관계로서 자동으로 들어옵니다.

Package URLSwift Package Manager

https://github.com/MapConductor/ios-for-maplibre

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
    .package(url: "https://github.com/MapConductor/ios-for-maplibre", from: "1.0.0"),
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [
            .product(name: "MapConductorCore", package: "ios-sdk-core"),
            .product(name: "MapConductorForMapLibre", package: "ios-for-maplibre"),
        ]
    ),
]

STEP 02

스타일을 정한다

MapLibre 본체에 계정도 키도 없습니다. 다만 타일의 배포처는 스스로 정할 필요가 있습니다. MapTiler 등의 상용 서비스를 쓰는 경우, 그 키는 스타일 JSON의 URL에 넣는 형태가 됩니다. MapConductor는 타일 배포처의 인증에는 관여하지 않습니다.

ContentView.swiftSwift

// Built-in presets
mapState.mapDesignType = MapLibreDesign.OsmBright
mapState.mapDesignType = MapLibreDesign.OsmBrightJa
mapState.mapDesignType = MapLibreDesign.MapTilerTonerEn
mapState.mapDesignType = MapLibreDesign.DemoTiles

주의

데모용의 스타일은 동작 확인을 위한 것입니다. 본번에서는 자체 또는 상용의 타일 배포를 쓰고, 제공처가 요구하는 귀속 표시를 UI에 내 주세요.

STEP 03

위치 정보의 권한을 더한다(필요한 경우)

위치 정보를 쓰는 경우는 Info.plist에 용도를 쓰고, 앱 쪽에서 허가를 요청합니다.

Info.plistXML

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to display on the map</string>

LocationManager.swiftSwift

import CoreLocation

final class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestPermission() {
        manager.requestWhenInUseAuthorization()
    }
}

동작 확인

여기까지 보이면 완료

스타일을 지정해 지도를 냅니다. 타일이 읽히고, 줌과 팬이 들으면 완료입니다.

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapLibre

struct ContentView: View {
    @StateObject var mapState = MapLibreViewState(
        mapDesignType: MapLibreDesign.OsmBright,
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 12.0
        )
    )

    var body: some View {
        MapLibreMapView(state: mapState)
            .ignoresSafeArea()
    }
}

지도 디자인

MapLibreDesign은 스타일 JSON의 URL을 감싼 타입입니다. 자체 스타일을 쓸 때는 같은 타입을 직접 조립합니다.

MapLibreDesign

Notes

DemoTiles

경량인 데모 타일

OsmBright / OsmBrightEn / OsmBrightJa

OSM Bright. 라벨의 언어 차이

MapTilerTonerEn / MapTilerTonerJa

고대비의 Toner 스타일

MapTilerBasicEn / MapTilerBasicJa

정보량을 줄인 Basic 스타일

잘 안 될 때

지도가 새하얀 채로

고른 MapLibreDesign의 스타일 JSON URL에 도달할 수 있는지 확인합니다.
타일 프로바이더를 쓰고 있는 경우, URL에 넣은 키가 유효한지 확인합니다.
디플로이 타깃이 iOS 15.1 이상인지 확인합니다.

빌드가 통과하지 않는다

빌드 폴더를 지웁니다(Cmd+Shift+K).
~/Library/Developer/Xcode/DerivedData를 삭제하고 다시 빌드합니다.
Swift Package Manager의 의존을 갱신합니다. CocoaPods와의 병용은 피해 주세요.

MapLibreMapView가 나오면, 다른 프로바이더와 같은 공통 API로 오버레이를 겹칠 수 있습니다.