문서 / 설정 / iOS / MapTiler

MapTiler 설정

MapTiler Cloud의 스타일을 MapConductor에서 쓰는 절차입니다. iOS 판은 MapLibre Native를 렌더러로 쓰고, MapTiler의 참조 스타일을 이름으로 고를 수 있습니다.

PACKAGE

ios-for-maptiler

API KEY

필요

MIN iOS

15.1

VIEW

MapTilerMapView

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

데모 보기매장 지도 · React ↗

시작하기 전에

Xcode 15 이상

MapTiler Cloud의 계정과 API 키

디플로이 타깃 iOS 15.1 이상

STEP 01

API 키를 취득한다

MapTiler Cloud의 대시보드에서 API 키를 발행합니다. 무료 구간이 있습니다.

STEP 02

Swift Package Manager로 추가한다

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

Package URLSwift Package Manager

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

Package.swiftSwift

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

STEP 03

API 키를 넘긴다

뷰마다 넘기거나, Info.plist에 둡니다. 뷰의 apiKey가 nil일 때 Info.plist가 쓰입니다. Android 판이 AndroidManifest의 MAPTILER_API_KEY를 읽는 것과 같은 사고방식입니다.

ContentView.swiftSwift

// Per view
MapTilerMapView(state: mapViewState, apiKey: "YOUR_MAPTILER_API_KEY")

Info.plistXML

<!-- Fallback, used when the view's apiKey is nil -->
<key>MapTilerAPIKey</key>
<string>YOUR_MAPTILER_API_KEY</string>

주의

키를 소스에 그대로 적어 넣지 말고, xcconfig나 환경 변수에서 빌드 시에 주입해 주세요.

동작 확인

여기까지 보이면 완료

지도와 마커가 나오면 완료입니다.

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapTiler

struct ContentView: View {
    @StateObject private var mapViewState = MapTilerViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
            zoom: 11
        )
    )

    var body: some View {
        MapTilerMapView(state: mapViewState) {
            Marker(
                position: GeoPoint(latitude: 35.6762, longitude: 139.6503),
                icon: DefaultMarkerIcon(label: "Tokyo")
            )
        }
    }
}

지도 디자인

MapTilerDesign은 MapTiler Cloud의 참조 스타일에 대응합니다.

MapTilerDesign

Notes

Streets / StreetsDark / StreetsLight

표준의 도로 지도와 명암의 배리에이션

Basic / Bright

정보량을 줄인 스타일

Satellite

위성 화상

Outdoor / Winter / Topo

아웃도어・동계・지형

Toner / Dataviz / Backdrop

데이터를 얹는 바탕용

Ocean / Landscape / Aquarelle / OpenStreetMap

그 밖의 테마별 스타일

잘 안 될 때

지도가 새하얀 채로

뷰의 apiKey나 Info.plist의 MapTilerAPIKey에 값이 들어 있는지 확인합니다.
MapTiler Cloud에서 키가 유효한지, 무료 구간을 넘지 않았는지 확인합니다.

빌드가 통과하지 않는다

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

iOS 판은 MapLibre Native로 렌더링하기 때문에, 마커나 폴리곤 같은 오버레이도 공통 API로 그대로 쓸 수 있습니다.