Skip to main content

Mapbox Annotation

種類​

#意味クラス想定用途
1画像のピンPointAnnotation基本はこれか
2円形のピンCircleAnnotation色分けだけしたいときに便利そう
3線PolylineAnnotation経路表示などに使おう
  • ポリゴンもあるが、省略。市区町村のハイライトに良さそうか
  • View Annotation は、別ファイルにする (TODO)
  • Style Layers についても、別ファイルで試そう (TODO)
試して分かったこと
  • Assets.xcassets に登録した画像であれば簡単
  • SF Symbols などを使って動的に読み込んだ画像は、煩雑 (うまくいってないので記載も省略)

準備​

サンプルの dest-pin.pdf を、Assets.xcassets に追加

サンプル (UIKit)​

ポイント​

swift
let pointAnnotationManager = mapView.annotations.makePointAnnotationManager()
pointAnnotationManager.annotations = [pointAnnotation]

全文​

ViewController.swift
import UIKit
import MapboxMaps

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MapView(frame: view.bounds)

        // スタイルの設定
        mapView.mapboxMap.mapStyle = MapStyle(uri: StyleURI(rawValue: "mapbox://styles/mapbox/standard")!)

        // カメラの設定
		let center = CLLocationCoordinate2D(latitude: 35.6598, longitude: 139.702389)
		let cameraOptions = CameraOptions(center: center, zoom: 13, bearing: 0, pitch: 0)
		mapView.mapboxMap.setCamera(to: cameraOptions)

        // リサイズ用の設定
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

		let coord = CLLocationCoordinate2D(latitude: 35.6572747, longitude: 139.6910424)

        view.addSubview(mapView)

		// ★1. 画像ピンの設定
		let coord1 = CLLocationCoordinate2D(latitude: 35.65746215456105, longitude: 139.69363342539)
		var pointAnnotation = PointAnnotation(coordinate: coord1)
		pointAnnotation.image = .init(image: UIImage(named: "dest-pin")!, name: "dest-pin")

		pointAnnotation.tapHandler = { context in // ★4. タップのイベントハンドラ登録
		  print("tapped point annotation at \(context.coordinate)")
		  return true // 
		}

		let pointAnnotationManager = mapView.annotations.makePointAnnotationManager()
		pointAnnotationManager.annotations = [pointAnnotation]

		// ★2. 円形ピンの設定
		let coord2 = CLLocationCoordinate2DMake(35.666154428709845, 139.7121950099489)
		var circleAnnotation = CircleAnnotation(centerCoordinate: coord2)
		circleAnnotation.circleColor = StyleColor(.blue)
		circleAnnotation.circleRadius = 15

		let circleAnnotationManager = mapView.annotations.makeCircleAnnotationManager()
		circleAnnotationManager.annotations = [circleAnnotation]

		// ★3. 線の設定
		let coords = [coord1, coord2]
		var lineAnnotation = PolylineAnnotation(lineCoordinates: coords)
		lineAnnotation.lineColor = StyleColor(.green)
		lineAnnotation.lineWidth = 5

		let lineAnnotationManager = mapView.annotations.makePolylineAnnotationManager()
		lineAnnotationManager.annotations = [lineAnnotation]
    }
}

サンプル (SwiftUI)​

ポイント​

  • Map { ... } 内で設定する必要あり

全文​

swift
import SwiftUI
import MapboxMaps

struct ContentView: View {
	var body: some View {
		// スタイルの設定
		let mapStyle = MapStyle(uri: StyleURI(rawValue: "mapbox://styles/mapbox/standard")!)

		// カメラの設定
		let center = CLLocationCoordinate2D(latitude: 35.6598, longitude: 139.702389)
		let camera = Viewport.camera(center: center, zoom: 13, bearing: 0, pitch: 0)
		Map(initialViewport: camera) {
            // ★1. 画像ピン設定
			let coord1 = CLLocationCoordinate2D(latitude: 35.6572747, longitude: 139.6910424)
			PointAnnotation(coordinate: coord1)
				.image(.init(image: UIImage(named: "dest-pin")!, name: "dest-pin"))
				.onTapGesture { context in // ★4. タップのイベントハンドラ登録
					print("Tapped at \(context.coordinate)")
					return true
				}

            // ★2. 円形ピン設定
			let coord2 = CLLocationCoordinate2DMake(35.666154428709845, 139.7121950099489)
			CircleAnnotation(centerCoordinate: coord2)
				.circleColor(.red)
				.circleRadius(15)

			// ★3. 線の設定
			let coords = [coord1, coord2]
			PolylineAnnotation(lineCoordinates: coords)
				.lineColor(.green)
				.lineWidth(5)
		}
		.mapStyle(mapStyle)
		.ignoresSafeArea()
	}
}

イベントハンドラについて​

実装する関数

  • UIKit : tapHandler = ..
  • SwiftUI : onTapGesture { .. }

注意点

  • return true で propagation を止める (裏のオブジェクトでもイベント拾う場合は false)
  • PolylineAnnotation で使用する場合は線分の途中でなく、端点のみ反応する
  • AnnotationManager に追加する前に設定する (UIKit)
Last updated on