Marker Icons（マーカーアイコン）

MapConductor は、地図上のマーカーの外観をカスタマイズするためのいくつかのマーカーアイコンタイプを提供します。すべてのマーカーアイコンは MarkerIconInterface インターフェースを実装しており、どの地図SDKでも使用できます。

MarkerIconInterface インターフェース

すべてのマーカーアイコンの基本インターフェース:

interface MarkerIconInterface {
    // Common properties for all marker icon implementations
}

アイコンタイプ

DefaultMarkerIcon (ColorDefaultIcon)

カスタマイズ可能な外観とテキストラベルを持つ標準的な色付きマーカーアイコンです。

注意: DefaultMarkerIcon は ColorDefaultIcon のエイリアスです。

DefaultMarkerIcon(
    scale: Float = 1.0f,
    label: String? = null,
    fillColor: Color = Color.Red,
    strokeColor: Color = Color.Black,
    strokeWidth: Dp = 1.dp,
    labelTextColor: Color = Color.White,
    labelStrokeColor: Color? = null,
    debug: Boolean = false
)

パラメータ

scale: アイコンのサイズ倍率（1.0 = 通常サイズ、0.5 = 半分サイズ、2.0 = 倍サイズ）
label: マーカーに表示されるテキスト（オプション）
fillColor: マーカーの背景色
strokeColor: マーカーのボーダー色
strokeWidth: ボーダーの幅
labelTextColor: ラベルテキストの色
labelStrokeColor: ラベルテキストのオプションのアウトライン色
debug: 有効にするとデバッグ情報を表示

使用例

// MapView を GoogleMapView、MapboxMapView などの選択した地図SDKに置き換えてください
MapView(state = mapViewState) {
    // Basic red marker
    Marker(
        position = GeoPoint.fromLatLong(37.7749, -122.4194),
        icon = DefaultMarkerIcon()
    )

    // Custom colored marker with label
    Marker(
        position = GeoPoint.fromLatLong(37.7849, -122.4094),
        icon = DefaultIcon(
            scale = 1.2f,
            label = "SF",
            fillColor = Color.Blue,
            strokeColor = Color.White,
            strokeWidth = 2.dp
        )
    )

    // Small marker with custom styling
    Marker(
        position = GeoPoint.fromLatLong(37.7649, -122.4294),
        icon = DefaultIcon(
            scale = 0.8f,
            fillColor = Color.Green,
            labelTextColor = Color.Black,
            label = "POI"
        )
    )
}

DrawableDefaultIcon

マーカーの背景としてドローアブルリソースを使用し、オプションでスタイリングオーバーレイを使用します。

DrawableDefaultIcon(
    backgroundDrawable: Drawable,
    scale: Float = 1.0f,
    strokeColor: Color? = null,
    strokeWidth: Dp = 1.dp
)

パラメータ

backgroundDrawable: マーカーの背景として使用されるドローアブルリソース
scale: アイコンのサイズ倍率
strokeColor: オプションのボーダー色オーバーレイ
strokeWidth: ボーダーオーバーレイの幅

使用例

@Composable
fun DrawableIconExamples() {
    val context = LocalContext.current

    // MapView を GoogleMapView、MapboxMapView などの選択した地図SDKに置き換えてください
    MapView(state = mapViewState) {
        // カスタムドローアブルマーカー
        AppCompatResources.getDrawable(context, R.drawable.custom_marker)?.let { drawable ->
            Marker(
                position = GeoPoint.fromLatLong(37.7749, -122.4194),
                icon = DrawableDefaultIcon(
                    backgroundDrawable = drawable,
                    scale = 1.0f
                )
            )
        }

        // カスタムボーダー付きドローアブル
        AppCompatResources.getDrawable(context, R.drawable.pin_icon)?.let { drawable ->
            Marker(
                position = GeoPoint.fromLatLong(37.7849, -122.4094),
                icon = DrawableDefaultIcon(
                    backgroundDrawable = drawable,
                    scale = 1.5f,
                    strokeColor = Color.Yellow,
                    strokeWidth = 3.dp
                )
            )
        }
    }
}

ImageDefaultIcon

正確なアンカー位置制御を持つカスタム画像ドローアブルを使用します。

ImageDefaultIcon(
    drawable: Drawable,
    anchor: Offset = Offset(0.5f, 0.5f),
    debug: Boolean = false
)

パラメータ

drawable: 表示する画像ドローアブル
anchor: 画像に対する相対的なアンカーポイント（0.0-1.0 の範囲）
- Offset(0.5f, 0.5f): 中心アンカー（デフォルト）
- Offset(0.5f, 1.0f): 下中心アンカー
- Offset(0.0f, 0.0f): 左上アンカー
- Offset(1.0f, 1.0f): 右下アンカー
debug: デバッグアンカー可視化を表示

使用例

@Composable
fun ImageIconExamples() {
    val context = LocalContext.current

    // MapView を GoogleMapView、MapboxMapView などの選択した地図SDKに置き換えてください
    MapView(state = mapViewState) {
        // 下中心アンカーの気象観測所アイコン
        AppCompatResources.getDrawable(context, R.drawable.weather_station)?.let { icon ->
            Marker(
                position = GeoPoint.fromLatLong(37.7749, -122.4194),
                icon = ImageDefaultIcon(
                    drawable = icon,
                    anchor = Offset(0.5f, 1.0f), // Bottom center
                    debug = false
                )
            )
        }

        // 中心アンカーの方向矢印
        AppCompatResources.getDrawable(context, R.drawable.direction_arrow)?.let { icon ->
            Marker(
                position = GeoPoint.fromLatLong(37.7849, -122.4094),
                icon = ImageDefaultIcon(
                    drawable = icon,
                    anchor = Offset(0.5f, 0.5f), // Center
                    debug = true // Shows anchor point
                )
            )
        }
    }
}

高度な使用法

動的アイコン選択

@Composable
fun DynamicIconExample() {
    val iconType by remember { mutableStateOf("default") }
    val context = LocalContext.current

    // MapView を GoogleMapView、MapboxMapView などの選択した地図SDKに置き換えてください
    MapView(state = mapViewState) {
        val icon = when (iconType) {
            "default" -> DefaultIcon(
                fillColor = Color.Blue,
                label = "D"
            )
            "drawable" -> AppCompatResources.getDrawable(context, R.drawable.custom_pin)?.let {
                DrawableDefaultIcon(backgroundDrawable = it)
            }
            "image" -> AppCompatResources.getDrawable(context, R.drawable.location_icon)?.let {
                ImageDefaultIcon(
                    drawable = it,
                    anchor = Offset(0.5f, 1.0f)
                )
            }
            else -> DefaultIcon()
        }

        Marker(
            position = GeoPoint.fromLatLong(37.7749, -122.4194),
            icon = icon
        )
    }
}

アイコンファクトリーパターン

object MarkerIconFactory {
    fun createLocationIcon(color: Color, label: String? = null): MarkerIconInterface {
        return DefaultMarkerIcon(
            fillColor = color,
            strokeColor = Color.White,
            strokeWidth = 2.dp,
            label = label,
            scale = 1.0f
        )
    }

    fun createCustomIcon(context: Context, drawableRes: Int, scale: Float = 1.0f): MarkerIconInterface? {
        return AppCompatResources.getDrawable(context, drawableRes)?.let {
            DrawableDefaultIcon(
                backgroundDrawable = it,
                scale = scale
            )
        }
    }

    fun createDirectionalIcon(context: Context, direction: Float): MarkerIconInterface? {
        return AppCompatResources.getDrawable(context, R.drawable.arrow)?.let { drawable ->
            // Apply rotation to drawable if needed
            val rotatedDrawable = drawable.mutate()
            rotatedDrawable.setColorFilter(null)

            ImageDefaultIcon(
                drawable = rotatedDrawable,
                anchor = Offset(0.5f, 0.5f)
            )
        }
    }
}

ベストプラクティス

パフォーマンスの考慮事項

アイコンインスタンスを再利用: アイコンを一度作成し、複数のマーカーで再利用
ドローアブルリソースを最適化: 適切なサイズのドローアブルリソースを使用
カスタムドローアブルを制限: 一意のドローアブルが多すぎるとメモリ使用量に影響

// Good: Reuse icon instances
val blueIcon = DefaultMarkerIcon(fillColor = Color.Blue)
val redIcon = DefaultMarkerIcon(fillColor = Color.Red)

markers.forEach { markerData ->
    val icon = if (markerData.isSelected) blueIcon else redIcon
    Marker(position = markerData.position, icon = icon)
}

一般的なユースケース

ステータスインジケータ

enum class MarkerStatus { ACTIVE, INACTIVE, WARNING, ERROR }

fun createStatusIcon(status: MarkerStatus): MarkerIconInterface = DefaultMarkerIcon(
    fillColor = when (status) {
        MarkerStatus.ACTIVE -> Color.Green
        MarkerStatus.INACTIVE -> Color.Gray
        MarkerStatus.WARNING -> Color.Yellow
        MarkerStatus.ERROR -> Color.Red
    },
    strokeColor = Color.White,
    strokeWidth = 2.dp,
    scale = 1.0f
)

カテゴリーマーカー

sealed class PoiCategory(val icon: MarkerIconInterface) {
    object Restaurant : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFF4CAF50), label = "🍽️"))
    object Hotel : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFF2196F3), label = "🏨"))
    object GasStation : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFFFF9800), label = "⛽"))
    object Hospital : PoiCategory(DefaultMarkerIcon(fillColor = Color(0xFFF44336), label = "🏥"))
}

トラブルシューティング

一般的な問題

アイコンが表示されない: ドローアブルリソースが存在しアクセス可能であることを確認
位置が正しくない: カスタムアイコンのアンカーポイントを確認
パフォーマンス問題: 一意のアイコンインスタンスの数を削減
スケールの問題: スケール値が正で妥当であることを確認（0.1 - 3.0）

デバッグモード

アンカーポイントとアイコン境界を可視化するためにデバッグモードを有効にします:

Marker(
    position = position,
    icon = ImageDefaultIcon(
        drawable = customDrawable,
        anchor = Offset(0.5f, 1.0f),
        debug = true // Shows anchor point and bounds
    )
)