イベントハンドラ

MapConductor は、マップとそのコンポーネントに対するユーザーインタラクションのための包括的なイベント処理を提供します。すべてのイベントは MapViewContainer コンポーネントを通じて処理されます。 すべてのイベントリスナーは MapView コンポーネントを通じて渡されます。

MapView(
    ...,
    onMapLoaded: OnMapLoadedHandler? = null,
    onMapClick: OnMapEventHandler? = null,
    onCameraMoveStart: OnCameraMoveHandler? = null,
    onCameraMove: OnCameraMoveHandler? = null,
    onCameraMoveEnd: OnCameraMoveHandler? = null,
    onMarkerClick: OnMarkerEventHandler? = null,
    onMarkerDragStart: OnMarkerEventHandler? = null,
    onMarkerDrag: OnMarkerEventHandler? = null,
    onMarkerDragEnd: OnMarkerEventHandler? = null,
    onMarkerAnimateStart: OnMarkerEventHandler? = null,
    onMarkerAnimateEnd: OnMarkerEventHandler? = null,
    onCircleClick: OnCircleEventHandler? = null,
    onPolylineClick: OnPolylineEventHandler? = null,
    onPolygonClick: OnPolygonEventHandler? = null,
    onGroundImageClick: OnGroundImageEventHandler? = null,
) { }

マップイベント

マップ初期化

• マップの読み込みが完了し、インタラクションの準備ができたときに呼び出されます。

  onMapLoaded: OnMapLoadedHandler? = null

• 例

  MapView(
      ...
      onMapLoaded: {
          println("Map loaded")
      },
  ) {
      ...
  }

マップインタラクション

• ユーザーがマップ（オーバーレイではない部分）をタップしたときに呼び出されます。

  onMapClick: OnMapEventHandler? = null

イベントデータ: GeoPoint - タップされた地理座標

• 例

  MapView(
      ...
      onMapClick = { geoPoint ->
          println("Map clicked at: ${geoPoint.latitude}, ${geoPoint.longitude}")
      }
  ) {
      ...
  }

マーカーイベント

すべてのマーカーイベントは、マーカーの現在の状態を含む MarkerState オブジェクトを受け取ります。

クリックイベント

• マーカーがタップされたときに呼び出されます。

  onMarkerClick: OnMarkerEventHandler? = null

• 例

  MapView(
      ...
      onMarkerClick = { markerState ->
          println("Marker clicked at: ${geoPoint.latitude}, ${geoPoint.longitude}")
      },
  ) {
      ...
  }

ドラッグイベント

• onMarkerDragStart: ドラッグ開始時に呼び出されます

• onMarkerDrag: ドラッグ中に継続的に呼び出されます

• onMarkerDragEnd: ドラッグ終了時に呼び出されます

  onMarkerDragStart: OnMarkerEventHandler? = null
  onMarkerDrag: OnMarkerEventHandler? = null
  onMarkerDragEnd: OnMarkerEventHandler? = null

  MapView(
      ...
          onMarkerDragStart = { draggedMarker ->
              println("Drag started: ${draggedMarker.id}")
          },
          onMarkerDrag = { draggedMarker ->
              if (draggedMarker.id == markerState.id) {
                  markerState = markerState.copy(position = draggedMarker.position)
              }
          },
          onMarkerDragEnd = { draggedMarker ->
              println("Drag ended: ${draggedMarker.id}")
          },
  ) { }

アニメーションイベント

• マーカーアニメーションの開始時と終了時に呼び出されます。

  onMarkerAnimateStart: OnMarkerEventHandler? = null
  onMarkerAnimateEnd: OnMarkerEventHandler? = null

オーバーレイイベント

円イベント

• 円がタップされたときに呼び出されます。

  onCircleClick: OnCircleEventHandler? = null

  イベントデータ: CircleEvent

  data class CircleEvent(
      val state: CircleState,
      val clicked: GeoPoint
  )

• 例

  MapView(
      ...
          onCircleClick = { event ->
              println("A circle clicked at: ${event.clicked.latitude}, ${event.clicked.longitude}")
  
              event.state.fillColor = Color.Red.copy(
                  opacity = 0.7f,
              )
          },
  ) { }

ポリラインイベント

• ポリラインがタップされたときに呼び出されます。

  onPolylineClick: OnPolylineEventHandler? = null

  イベントデータ: PolylineEvent

  data class PolylineEvent(
      val state: PolylineState,
      val clicked: GeoPoint
  )

• 例

  MapView(
      ...
          onPolylineClick = { event ->
              println("A circle clicked at: ${event.clicked.latitude}, ${event.clicked.longitude}")
  
              event.state.fillColor = Color.Red.copy(
                  opacity = 0.7f,
              )
          },
  ) { }

ポリゴンイベント

onPolygonClick: OnPolygonEventHandler? = null

イベントデータ: PolygonEvent

data class PolygonEvent(
    val state: PolygonState,
    val clicked: GeoPoint?
)

グラウンドイメージイベント

onGroundImageClick: OnGroundImageEventHandler? = null

イベントデータ: GroundImageEvent

data class GroundImageEvent(
    val state: GroundImageState,
    val clicked: GeoPointImpl?
)

使用例

基本的なイベント処理

// GoogleMapView、MapboxMapView など、選択した地図SDKに置き換えてください
MapView(
    state = mapViewState,
    onMapClick = { geoPoint ->
        println("Map clicked at: ${geoPoint.latitude}, ${geoPoint.longitude}")
    },
    onMarkerClick = { markerState ->
        println("Marker clicked: ${markerState.extra}")
    },
    onCircleClick = { circleEvent ->
        println("Circle clicked: ${circleEvent.state.extra}")
    }
) {
    // マップコンテンツ
}

高度なイベント処理

@Composable
fun AdvancedEventHandlingExample() {
    var selectedItem by remember { mutableStateOf<String?>(null) }
    var draggedMarker by remember { mutableStateOf<MarkerState?>(null) }

    // GoogleMapView、MapboxMapView など、選択した地図SDKに置き換えてください
    MapView(
        state = mapViewState,
        onMapClick = { geoPoint ->
            selectedItem = null
            println("Map clicked at: $geoPoint")
        },
        onMarkerClick = { markerState ->
            selectedItem = "Marker: ${markerState.extra}"
        },
        onMarkerDragStart = { markerState ->
            draggedMarker = markerState
            println("Started dragging: ${markerState.id}")
        },
        onMarkerDrag = { markerState ->
            draggedMarker = markerState
            println("Dragging to: ${markerState.position}")
        },
        onMarkerDragEnd = { markerState ->
            draggedMarker = null
            println("Finished dragging: ${markerState.id}")
        },
        onCircleClick = { circleEvent ->
            selectedItem = "Circle: ${circleEvent.state.extra}"
        },
        onPolylineClick = { polylineEvent ->
            selectedItem = "Polyline: ${polylineEvent.state.extra}"
        },
        onPolygonClick = { polygonEvent ->
            selectedItem = "Polygon: ${polygonEvent.state.extra}"
        }
    ) {
        // マップコンポーネント
    }

    // 選択されたアイテム情報を表示
    selectedItem?.let { item ->
        Card(modifier = Modifier.padding(16.dp)) {
            Text(item, modifier = Modifier.padding(16.dp))
        }
    }
}

条件付きイベント処理

@Composable
fun ConditionalEventExample() {
    var editMode by remember { mutableStateOf(false) }
    var selectedMarkers by remember { mutableStateOf<Set<String>>(emptySet()) }

    // GoogleMapView、MapboxMapView など、選択した地図SDKに置き換えてください
    MapView(
        state = mapViewState,
        onMapClick = { geoPoint ->
            if (editMode) {
                // 編集モードで新しいマーカーを追加
                addNewMarker(geoPoint)
            } else {
                // 表示モードで選択をクリア
                selectedMarkers = emptySet()
            }
        },
        onMarkerClick = { markerState ->
            if (editMode) {
                // 編集モードで選択を切り替え
                selectedMarkers = if (markerState.id in selectedMarkers) {
                    selectedMarkers - markerState.id
                } else {
                    selectedMarkers + markerState.id
                }
            } else {
                // 表示モードで情報を表示
                showMarkerInfo(markerState)
            }
        },
        onMarkerDragStart = { markerState ->
            if (!editMode) {
                // 表示モードではドラッグを防止
                return@MapViewContainer
            }
        }
    ) {
        // マップコンテンツ
    }
}

イベントデバウンス

@Composable
fun DebouncedEventExample() {
    var searchLocation by remember { mutableStateOf<GeoPoint?>(null) }

    // 過剰な API 呼び出しを避けるために検索をデバウンス
    LaunchedEffect(searchLocation) {
        searchLocation?.let { location ->
            delay(500) // 500ms 待機
            performLocationSearch(location)
        }
    }

    // GoogleMapView、MapboxMapView など、選択した地図SDKに置き換えてください
    MapView(
        state = mapViewState,
        onMapClick = { geoPoint ->
            searchLocation = geoPoint
        }
    ) {
        searchLocation?.let { location ->
            Marker(
                position = location,
                icon = DefaultIcon(
                    fillColor = Color.Blue,
                    label = "🔍"
                )
            )
        }
    }
}

イベントハンドラの型

OnMapEventHandler

• MapViewに発生したイベントを伝えます

• 定義

  typealias OnMapEventHandler = (GeoPoint) -> Unit

OnMarkerEventHandler

• Markerに発生したイベントを伝えます
• 定義

  typealias OnMarkerEventHandler = (MarkerState) -> Unit

OnCircleEventHandler

• Circleに発生したイベントを伝えます。CircleEventはイベントが発生した位置情報を含みます。
• 定義

  typealias OnCircleEventHandler = (CircleEvent) -> Unit

OnPolylineEventHandler

• Polylineに発生したイベントを伝えます。PolylineEventはイベントが発生した位置情報を含みます。
• 定義

  typealias OnPolylineEventHandler = (PolylineEvent) -> Unit

OnPolygonEventHandler

• Polygonに発生したイベントを伝えます。PolygonEventはイベントが発生した位置情報を含みます。
• 定義

  typealias OnPolygonEventHandler = (PolygonEvent) -> Unit

OnPolygonEventHandler

• GroundImageに発生したイベントを伝えます。GroundImageEventはイベントが発生した位置情報を含みます。
• 定義

  typealias OnGroundImageEventHandler = (GroundImageEvent) -> Unit

ベストプラクティス

1. パフォーマンス: イベントハンドラ内で重い計算を避ける
2. 状態更新: イベントハンドラを使用してアプリケーション状態を更新する
3. ユーザーフィードバック: ユーザーインタラクションに対して即座に視覚的なフィードバックを提供する
4. エラー処理: null 値やエッジケースを適切に処理する
5. デバウンス: ドラッグなどの高頻度イベントをデバウンスしてパフォーマンスを向上させる
6. 条件付きロジック: アプリケーション状態を使用してイベント動作を決定する
7. イベント伝播: 一部のイベントがバブルアップまたは消費される可能性があることに注意する