diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 3573815a..dcfd99ef 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -48,7 +48,10 @@ "Bash(xcodebuild -scheme \"ios-sdk-core\" -destination \"generic/platform=iOS Simulator\" build)", "Bash(xcodebuild -list)", "Bash(xcodebuild -scheme MapConductorSampleApp -destination \"generic/platform=iOS Simulator\" build)", - "Bash(xcodebuild -workspace MapConductorSampleApp.xcworkspace -scheme MapConductorSampleApp -destination 'generic/platform=iOS Simulator' build)" + "Bash(xcodebuild -workspace MapConductorSampleApp.xcworkspace -scheme MapConductorSampleApp -destination 'generic/platform=iOS Simulator' build)", + "Bash(git -C /Users/masashi/android-sdk/android-geojson-layer log --oneline bfa194c07a..e75c70bae)", + "Bash(git -C /Users/masashi/android-sdk/android-geojson-layer log --oneline e75c70bae..bfa194c07a)", + "Bash(git *)" ], "deny": [], "ask": [] diff --git a/android-for-arcgis b/android-for-arcgis index 89496f9f..cfd6143c 160000 --- a/android-for-arcgis +++ b/android-for-arcgis @@ -1 +1 @@ -Subproject commit 89496f9f4502025b38baedfba1cd2818face8fc2 +Subproject commit cfd6143cb339f7f61dd4cd27e4e8a080596e6716 diff --git a/android-for-googlemaps b/android-for-googlemaps index 3791a7be..557108ce 160000 --- a/android-for-googlemaps +++ b/android-for-googlemaps @@ -1 +1 @@ -Subproject commit 3791a7bed76d981252b8d988a698486a090d8a4d +Subproject commit 557108ceda2a604185875378f0dc924d842469b7 diff --git a/android-for-here b/android-for-here index efbbee9a..4dea3d7f 160000 --- a/android-for-here +++ b/android-for-here @@ -1 +1 @@ -Subproject commit efbbee9ab5a0cad79f034247ae247019e4ee4eeb +Subproject commit 4dea3d7f2b1f231818af1a0a0fed766b2db7958c diff --git a/android-for-mapbox b/android-for-mapbox index ae4d80c4..eaa70434 160000 --- a/android-for-mapbox +++ b/android-for-mapbox @@ -1 +1 @@ -Subproject commit ae4d80c4ca5d8766accc79df9cc2ef1bedfcc864 +Subproject commit eaa704344acbe3772ed99f9a279624768dff9f5c diff --git a/android-geojson-layer b/android-geojson-layer index e75c70ba..bfa194c0 160000 --- a/android-geojson-layer +++ b/android-geojson-layer @@ -1 +1 @@ -Subproject commit e75c70bae64ad828384fa2de6aa5ff6189107af4 +Subproject commit bfa194c07a0f37f4a6f8f16bee04e61b9dece291 diff --git a/android-heatmap b/android-heatmap index 8da0aa6a..33e4b230 160000 --- a/android-heatmap +++ b/android-heatmap @@ -1 +1 @@ -Subproject commit 8da0aa6aceb7849b396d1c415c7c60b8bb3a04cf +Subproject commit 33e4b23003f7db4e7e75f8cf8f0d006827af2811 diff --git a/android-icons b/android-icons index 376149ed..67cb4b1d 160000 --- a/android-icons +++ b/android-icons @@ -1 +1 @@ -Subproject commit 376149ed016e2a583943397da65abc5a95ef8013 +Subproject commit 67cb4b1d46d26174378dd3342ab615e4bb94055b diff --git a/android-marker-clustering b/android-marker-clustering index 4d922f8b..11e9b7f9 160000 --- a/android-marker-clustering +++ b/android-marker-clustering @@ -1 +1 @@ -Subproject commit 4d922f8b0afadf0935d6adac7494029010a7a27b +Subproject commit 11e9b7f933e2fad36adbed692543eeed08dc33b9 diff --git a/android-sdk-core b/android-sdk-core index 7b97f149..651c56c1 160000 --- a/android-sdk-core +++ b/android-sdk-core @@ -1 +1 @@ -Subproject commit 7b97f149e26d6663aacca140b215805dadf0d35a +Subproject commit 651c56c10adc3b1e6cb8b347394ea374cbcd86c4 diff --git a/docs/astro.config.ts b/docs/astro.config.ts index bd8aba83..fcf3710b 100644 --- a/docs/astro.config.ts +++ b/docs/astro.config.ts @@ -13,11 +13,7 @@ export default defineConfig({ integrations: [ postBuildIntegration(), starlight({ - title: { - en: "MapConductor — a unified Android maps SDK that lets you work with multiple map providers through a single API", - ja: "MapConductor(マップコンダクター) ♪ 複数の地図プロバイダを単一のAPIで扱えるAndroid向け統一地図SDK", - "es-419": "MapConductor — Un SDK de mapas unificado para Android que ofrece una API común para múltiples proveedores de mapas", - }, + title: "MapConductor", markdown: { headingLinks: false, }, @@ -114,18 +110,15 @@ export default defineConfig({ { slug: 'states/groundimage-state' }, ], }, - // { - // label: 'Events', - // translations: { - // ja: 'イベント', - // }, - // items: [ - // { slug: 'event/onMapLoaded' }, - // // { slug: 'event/onCameraMoveStart' }, - // // { slug: 'event/onCameraMove' }, - // // { slug: 'event/onCameraMoveEnd' }, - // ], - // }, + { + label: 'Events', + translations: { + ja: 'イベント', + }, + items: [ + { slug: 'event/event-handlers' }, + ], + }, { label: 'MapViewHolder', items: [ @@ -134,6 +127,7 @@ export default defineConfig({ { slug: 'mapviewholder/mapbox' }, { slug: 'mapviewholder/here-maps' }, { slug: 'mapviewholder/arcgis' }, + { slug: 'mapviewholder/arcgis-2d' }, { slug: 'mapviewholder/maplibre' }, ], }, @@ -163,6 +157,7 @@ export default defineConfig({ ja: '実験的機能', }, items: [ + { slug: 'experimental/geojson-layer' }, { slug: 'experimental/heatmap' }, { slug: 'experimental/marker-clustering' }, { slug: 'experimental/icons' }, diff --git a/docs/scripts/translate-specific.mjs b/docs/scripts/translate-specific.mjs new file mode 100644 index 00000000..442d6b5a --- /dev/null +++ b/docs/scripts/translate-specific.mjs @@ -0,0 +1,68 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; +import OpenAI from 'openai'; + +const JA_ROOT = path.join('src', 'content', 'docs', 'ja'); +const EN_ROOT = path.join('src', 'content', 'docs'); +const ES_ROOT = path.join('src', 'content', 'docs', 'es-419'); + +const FILES = [ + 'event/event-handlers.mdx', + 'components/infobubble.mdx', + 'core/mapcameraposition.mdx', + 'experimental/geojson-layer.mdx', + 'mapviewholder/arcgis-2d.mdx', +]; + +const apiKey = process.env.OPENAI_API_KEY; +if (!apiKey) { console.error('OPENAI_API_KEY not set'); process.exit(1); } +const model = process.env.DOCS_TRANSLATION_MODEL || 'gpt-4.1-mini'; +const client = new OpenAI({ apiKey }); + +async function translate(content, lang, filePath) { + const langName = lang === 'en' ? 'English' : 'Latin American Spanish'; + const res = await client.chat.completions.create({ + model, + temperature: 0.2, + messages: [ + { + role: 'system', + content: + 'You are a professional technical translator for developer documentation. ' + + 'Translate Japanese Markdown/MDX documentation into the target language. ' + + 'Preserve all Markdown/MDX syntax, code blocks, inline code, links, and frontmatter keys. ' + + 'Translate human-readable text and frontmatter string values, but do not change file structure.', + }, + { + role: 'user', + content: + `Translate the following Japanese documentation into ${langName}.\n` + + 'Keep the overall structure and formatting exactly the same.\n\n' + + '--- BEGIN FILE ---\n' + content + '\n--- END FILE ---\n', + }, + ], + }); + const translated = res.choices[0]?.message?.content?.trim(); + if (!translated) throw new Error(`Empty translation for ${filePath} (${lang})`); + return translated; +} + +for (const rel of FILES) { + const jaPath = path.join(JA_ROOT, rel); + const enPath = path.join(EN_ROOT, rel); + const esPath = path.join(ES_ROOT, rel); + + const jaContent = await fs.readFile(jaPath, 'utf8'); + + console.log(`[EN] ${rel}`); + const enContent = await translate(jaContent, 'en', rel); + await fs.mkdir(path.dirname(enPath), { recursive: true }); + await fs.writeFile(enPath, enContent, 'utf8'); + + console.log(`[ES] ${rel}`); + const esContent = await translate(jaContent, 'es-419', rel); + await fs.mkdir(path.dirname(esPath), { recursive: true }); + await fs.writeFile(esPath, esContent, 'utf8'); +} + +console.log('Done.'); diff --git a/docs/src/assets/introduction/basic-googlemaps-example.png b/docs/src/assets/introduction/basic-googlemaps-example.png index 84ad4bd9..0d134bd1 100644 Binary files a/docs/src/assets/introduction/basic-googlemaps-example.png and b/docs/src/assets/introduction/basic-googlemaps-example.png differ diff --git a/docs/src/assets/introduction/basic-mapbox-example.png b/docs/src/assets/introduction/basic-mapbox-example.png index a8636748..7e1f3796 100644 Binary files a/docs/src/assets/introduction/basic-mapbox-example.png and b/docs/src/assets/introduction/basic-mapbox-example.png differ diff --git a/docs/src/components/api/event-handlers/MapViewEventHandlersSignature.astro b/docs/src/components/api/event-handlers/MapViewEventHandlersSignature.astro index ce2b943c..e9a8bc13 100644 --- a/docs/src/components/api/event-handlers/MapViewEventHandlersSignature.astro +++ b/docs/src/components/api/event-handlers/MapViewEventHandlersSignature.astro @@ -5,6 +5,7 @@ const code = `MapView( ..., onMapLoaded: OnMapLoadedHandler? = null, onMapClick: OnMapEventHandler? = null, + onMapLongClick: OnMapEventHandler? = null, onCameraMoveStart: OnCameraMoveHandler? = null, onCameraMove: OnCameraMoveHandler? = null, onCameraMoveEnd: OnCameraMoveHandler? = null, diff --git a/docs/src/components/api/event-handlers/OnMapLongClickExample.astro b/docs/src/components/api/event-handlers/OnMapLongClickExample.astro new file mode 100644 index 00000000..db276772 --- /dev/null +++ b/docs/src/components/api/event-handlers/OnMapLongClickExample.astro @@ -0,0 +1,21 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + commentForPrint?: string; +} + +const { + commentForPrint = "Map long-clicked at:" +} = Astro.props; + +const code = `MapView( + onMapLongClick = { geoPoint -> + println("${commentForPrint} \${geoPoint.latitude}, \${geoPoint.longitude}") + } +) { + // ... +}`; +--- + + diff --git a/docs/src/components/api/event-handlers/OnMapLongClickSignature.astro b/docs/src/components/api/event-handlers/OnMapLongClickSignature.astro new file mode 100644 index 00000000..2c7aabac --- /dev/null +++ b/docs/src/components/api/event-handlers/OnMapLongClickSignature.astro @@ -0,0 +1,7 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `onMapLongClick: OnMapEventHandler? = null`; +--- + + diff --git a/docs/src/components/api/mapviewholder/ArcGISMapView2DBasicExample.astro b/docs/src/components/api/mapviewholder/ArcGISMapView2DBasicExample.astro new file mode 100644 index 00000000..85c09787 --- /dev/null +++ b/docs/src/components/api/mapviewholder/ArcGISMapView2DBasicExample.astro @@ -0,0 +1,26 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `val state = rememberArcGISMapViewState( + mapDesign = ArcGISDesign.Streets, + cameraPosition = MapCameraPosition( + position = GeoPoint(35.68, 139.76), + zoom = 12.0, + ) +) + +ArcGISMapView2D( + state = state, + modifier = Modifier.fillMaxSize(), + onMapLoaded = { + println("2D マップ読み込み完了") + }, + onMapClick = { geoPoint -> + println("タップ: \${geoPoint.latitude}, \${geoPoint.longitude}") + } +) { + // マーカーや他のオーバーレイを配置できます +}`; +--- + + diff --git a/docs/src/components/api/mapviewholder/ArcGISMapView2DSignature.astro b/docs/src/components/api/mapviewholder/ArcGISMapView2DSignature.astro new file mode 100644 index 00000000..bcef5de9 --- /dev/null +++ b/docs/src/components/api/mapviewholder/ArcGISMapView2DSignature.astro @@ -0,0 +1,20 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `@Composable +fun ArcGISMapView2D( + state: ArcGISMapViewState, + modifier: Modifier = Modifier, + markerTiling: MarkerTilingOptions? = null, + sdkInitialize: (suspend (android.content.Context) -> Boolean)? = null, + onMapLoaded: OnMapLoadedHandler? = null, + onCameraMoveStart: OnCameraMoveHandler? = null, + onCameraMove: OnCameraMoveHandler? = null, + onCameraMoveEnd: OnCameraMoveHandler? = null, + onMapClick: OnMapEventHandler? = null, + onMapLongClick: OnMapEventHandler? = null, + content: (@Composable ArcGISMapViewScope.() -> Unit)? = null, +)`; +--- + + diff --git a/docs/src/components/api/mapviewholder/ArcGISMapView2DVsArcGISMapView.astro b/docs/src/components/api/mapviewholder/ArcGISMapView2DVsArcGISMapView.astro new file mode 100644 index 00000000..f820edcf --- /dev/null +++ b/docs/src/components/api/mapviewholder/ArcGISMapView2DVsArcGISMapView.astro @@ -0,0 +1,17 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `// 3D ビュー（デフォルト ArcGISMapView） +ArcGISMapView( + state = state, + modifier = Modifier.fillMaxSize(), +) { } + +// 2D フラットビュー（ArcGISMapView2D） +ArcGISMapView2D( + state = state, + modifier = Modifier.fillMaxSize(), +) { }`; +--- + + diff --git a/docs/src/components/components/circle/CircleInteractiveDetailedExample.astro b/docs/src/components/components/circle/CircleInteractiveDetailedExample.astro index a570c810..8a3bd6c8 100644 --- a/docs/src/components/components/circle/CircleInteractiveDetailedExample.astro +++ b/docs/src/components/components/circle/CircleInteractiveDetailedExample.astro @@ -17,7 +17,7 @@ fun InteractiveCircleExample() { val edgeMarkerState = MarkerState( id = "edge_marker", position = edgeMarkerPosition, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Green, strokeColor = Color.White, label = "Drag me", diff --git a/docs/src/components/components/circle/DynamicCircleExample.astro b/docs/src/components/components/circle/DynamicCircleExample.astro index fe1f73ff..d8b8d2c8 100644 --- a/docs/src/components/components/circle/DynamicCircleExample.astro +++ b/docs/src/components/components/circle/DynamicCircleExample.astro @@ -48,7 +48,7 @@ fun DynamicCircleExample() { // Center marker Marker( position = GeoPoint.fromLatLong(37.7749, -122.4194), - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = circleColor, label = "${'${'}circleRadius.toInt()}m" ) diff --git a/docs/src/components/components/circle/InteractiveCircleExample.astro b/docs/src/components/components/circle/InteractiveCircleExample.astro index 93b39123..6bd179af 100644 --- a/docs/src/components/components/circle/InteractiveCircleExample.astro +++ b/docs/src/components/components/circle/InteractiveCircleExample.astro @@ -42,7 +42,7 @@ fun InteractiveCircleExample() { val centerMarker = MarkerState( position = centerPosition, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Blue, label = "C" ), @@ -51,7 +51,7 @@ fun InteractiveCircleExample() { val edgeMarker = MarkerState( position = edgePosition, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Green, label = "E" ), diff --git a/docs/src/components/components/groundimage/DynamicGroundImageExample.astro b/docs/src/components/components/groundimage/DynamicGroundImageExample.astro index d5a3a1f1..6b754725 100644 --- a/docs/src/components/components/groundimage/DynamicGroundImageExample.astro +++ b/docs/src/components/components/groundimage/DynamicGroundImageExample.astro @@ -45,11 +45,11 @@ fun DynamicGroundImageExample() { Marker( position = bounds.southwest, - icon = DefaultIcon(fillColor = Color.Green, label = "SW", scale = 0.6f) + icon = ColorDefaultIcon(fillColor = Color.Green, label = "SW", scale = 0.6f) ) Marker( position = bounds.northeast, - icon = DefaultIcon(fillColor = Color.Red, label = "NE", scale = 0.6f) + icon = ColorDefaultIcon(fillColor = Color.Red, label = "NE", scale = 0.6f) ) } } diff --git a/docs/src/components/components/infobubble/CustomPositioningExample.astro b/docs/src/components/components/infobubble/CustomPositioningExample.astro index f87909e0..9f230a7a 100644 --- a/docs/src/components/components/infobubble/CustomPositioningExample.astro +++ b/docs/src/components/components/infobubble/CustomPositioningExample.astro @@ -26,7 +26,7 @@ const { const code = `// ${commentForBottomAnchorIntro} val markerWithBottomAnchor = MarkerState( position = position, - icon = ImageDefaultIcon( + icon = ImageColorDefaultIcon( drawable = customIcon, anchor = Offset(${bottomAnchorX}f, ${bottomAnchorY}f) // ${commentForBottomAnchorAnchor} ) @@ -35,7 +35,7 @@ val markerWithBottomAnchor = MarkerState( // ${commentForCenterAnchorIntro} val markerWithCenterAnchor = MarkerState( position = position, - icon = ImageDefaultIcon( + icon = ImageColorDefaultIcon( drawable = customIcon, anchor = Offset(${centerAnchorX}f, ${centerAnchorY}f) // ${commentForCenterAnchorAnchor} ) diff --git a/docs/src/components/components/infobubble/InfoBubbleCustomExample.astro b/docs/src/components/components/infobubble/InfoBubbleCustomExample.astro new file mode 100644 index 00000000..0ed6c8d5 --- /dev/null +++ b/docs/src/components/components/infobubble/InfoBubbleCustomExample.astro @@ -0,0 +1,29 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + commentForTailOffset?: string; + commentForMarker?: string; +} + +const { + commentForTailOffset = "右側中央を接続点にする", + commentForMarker = "マーカー" +} = Astro.props; + +const code = `InfoBubbleCustom( + marker = markerState, // ${commentForMarker} + tailOffset = Offset(1f, 0.5f), // ${commentForTailOffset} +) { + // カスタム形状の吹き出しを描画 + Box( + modifier = Modifier + .background(Color.Yellow, RoundedCornerShape(8.dp)) + .padding(8.dp) + ) { + Text("カスタムバブル") + } +}`; +--- + + diff --git a/docs/src/components/components/infobubble/InfoBubbleCustomSignature.astro b/docs/src/components/components/infobubble/InfoBubbleCustomSignature.astro new file mode 100644 index 00000000..9ce82f1c --- /dev/null +++ b/docs/src/components/components/infobubble/InfoBubbleCustomSignature.astro @@ -0,0 +1,12 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `@Composable +fun MapViewScope.InfoBubbleCustom( + marker: MarkerState, + tailOffset: Offset, + content: @Composable () -> Unit, +)`; +--- + + diff --git a/docs/src/components/components/infobubble/InteractiveBubbleExample.astro b/docs/src/components/components/infobubble/InteractiveBubbleExample.astro index ebfd0530..3338cbfa 100644 --- a/docs/src/components/components/infobubble/InteractiveBubbleExample.astro +++ b/docs/src/components/components/infobubble/InteractiveBubbleExample.astro @@ -64,7 +64,7 @@ fun InteractiveBubbleExample(modifier: Modifier = Modifier) { val markerState = MarkerState( position = GeoPoint.fromLatLong(${markerLatitude}, ${markerLongitude}), - icon = DefaultIcon(fillColor = Color(${markerColor}), label = "${markerLabel}"), + icon = ColorDefaultIcon(fillColor = Color(${markerColor}), label = "${markerLabel}"), extra = storeInfo, id = "${markerId}", onClick = onMarkerClick diff --git a/docs/src/components/components/infobubble/MultipleBubblesExample.astro b/docs/src/components/components/infobubble/MultipleBubblesExample.astro index 61732a05..aec601f6 100644 --- a/docs/src/components/components/infobubble/MultipleBubblesExample.astro +++ b/docs/src/components/components/infobubble/MultipleBubblesExample.astro @@ -72,7 +72,7 @@ fun MultipleBubblesExample() { MarkerState( id = "marker_\$index", position = position, - icon = DefaultIcon(fillColor = color, label = "\${index + 1}"), + icon = ColorDefaultIcon(fillColor = color, label = "\${index + 1}"), extra = name, onClick = onMarkerClick ) diff --git a/docs/src/components/components/infobubble/RichContentInfoBubbleExample.astro b/docs/src/components/components/infobubble/RichContentInfoBubbleExample.astro index dd68df44..ec56c19f 100644 --- a/docs/src/components/components/infobubble/RichContentInfoBubbleExample.astro +++ b/docs/src/components/components/infobubble/RichContentInfoBubbleExample.astro @@ -56,7 +56,7 @@ fun RichContentBubbleExample() { val markerState = MarkerState( position = GeoPoint.fromLatLong(${latitude}, ${longitude}), - icon = DefaultIcon(fillColor = ${markerFillColorExpr}, label = "${markerLabel}"), + icon = ColorDefaultIcon(fillColor = ${markerFillColorExpr}, label = "${markerLabel}"), extra = locationInfo, id = "${markerId}", onClick = onMarkerClick diff --git a/docs/src/components/components/infobubble/RightInfoBubbleMapExample.astro b/docs/src/components/components/infobubble/RightInfoBubbleMapExample.astro index 99247ce0..5741b0b9 100644 --- a/docs/src/components/components/infobubble/RightInfoBubbleMapExample.astro +++ b/docs/src/components/components/infobubble/RightInfoBubbleMapExample.astro @@ -68,7 +68,7 @@ fun RightInfoBubbleMapExample(modifier: Modifier = Modifier) { id = "marker1", position = GeoPoint.fromLatLong(${marker1Latitude}, ${marker1Longitude}), icon = - DefaultIcon( + ColorDefaultIcon( fillColor = Color.Blue, infoAnchor = Offset(0.5f, 0.25f), label = "1", @@ -87,7 +87,7 @@ fun RightInfoBubbleMapExample(modifier: Modifier = Modifier) { id = "marker2", position = GeoPoint.fromLatLong(${marker2Latitude}, ${marker2Longitude}), icon = - DefaultIcon( + ColorDefaultIcon( fillColor = Color.Red, infoAnchor = Offset(0.5f, 0.25f), label = "2", diff --git a/docs/src/components/components/infobubble/SimpleInfoBubbleExample.astro b/docs/src/components/components/infobubble/SimpleInfoBubbleExample.astro index c661e885..a1205905 100644 --- a/docs/src/components/components/infobubble/SimpleInfoBubbleExample.astro +++ b/docs/src/components/components/infobubble/SimpleInfoBubbleExample.astro @@ -50,7 +50,7 @@ fun SimpleInfoBubbleExample() { ) { val markerState = MarkerState( position = center, - icon = DefaultIcon(fillColor = ${markerFillColorExpr}, label = "${markerLabel}"), + icon = ColorDefaultIcon(fillColor = ${markerFillColorExpr}, label = "${markerLabel}"), extra = "${markerExtra}", id = "${markerId}", onClick = onMarkerClick diff --git a/docs/src/components/components/infobubble/StandaloneInfoBubbleExample.astro b/docs/src/components/components/infobubble/StandaloneInfoBubbleExample.astro new file mode 100644 index 00000000..db08beff --- /dev/null +++ b/docs/src/components/components/infobubble/StandaloneInfoBubbleExample.astro @@ -0,0 +1,27 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + latitude?: number; + longitude?: number; + commentForLabel?: string; +} + +const { + latitude = 35.6812, + longitude = 139.7671, + commentForLabel = "ここに吹き出し" +} = Astro.props; + +const code = `MapView(...) { + InfoBubble( + position = GeoPoint(${latitude}, ${longitude}), + bubbleColor = Color.White, + borderColor = Color.Blue, + ) { + Text("${commentForLabel}") + } +}`; +--- + + diff --git a/docs/src/components/components/infobubble/StandaloneInfoBubbleSignature.astro b/docs/src/components/components/infobubble/StandaloneInfoBubbleSignature.astro new file mode 100644 index 00000000..b494ea3b --- /dev/null +++ b/docs/src/components/components/infobubble/StandaloneInfoBubbleSignature.astro @@ -0,0 +1,16 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `@Composable +fun MapViewScope.InfoBubble( + position: GeoPoint, + bubbleColor: Color = Color.White, + borderColor: Color = Color.Black, + contentPadding: Dp = 8.dp, + cornerRadius: Dp = 4.dp, + tailSize: Dp = 8.dp, + content: @Composable () -> Unit, +)`; +--- + + diff --git a/docs/src/components/components/mapviewcomponent/AdvancedMapEventHandlingExample.astro b/docs/src/components/components/mapviewcomponent/AdvancedMapEventHandlingExample.astro index ed2b72e5..91d36894 100644 --- a/docs/src/components/components/mapviewcomponent/AdvancedMapEventHandlingExample.astro +++ b/docs/src/components/components/mapviewcomponent/AdvancedMapEventHandlingExample.astro @@ -81,7 +81,7 @@ fun AdvancedMapExample() { // ${commentForCenterMarkerAndCircle} Marker( position = center, - icon = DefaultIcon(label = "${centerMarkerLabel}", fillColor = ${centerMarkerFillColorExpr}), + icon = ColorDefaultIcon(label = "${centerMarkerLabel}", fillColor = ${centerMarkerFillColorExpr}), extra = "${centerMarkerExtra}", onClick = onMarkerClick ) @@ -97,7 +97,7 @@ fun AdvancedMapExample() { clickedPoint?.let { point -> Marker( position = point, - icon = DefaultIcon(label = "${clickedMarkerLabel}", fillColor = ${clickedMarkerFillColorExpr}), + icon = ColorDefaultIcon(label = "${clickedMarkerLabel}", fillColor = ${clickedMarkerFillColorExpr}), extra = "${clickedMarkerExtra}", onClick = onMarkerClick ) diff --git a/docs/src/components/components/mapviewcomponent/GoogleMapsExample.astro b/docs/src/components/components/mapviewcomponent/GoogleMapsExample.astro index 85c16633..1ed51da1 100644 --- a/docs/src/components/components/mapviewcomponent/GoogleMapsExample.astro +++ b/docs/src/components/components/mapviewcomponent/GoogleMapsExample.astro @@ -4,11 +4,12 @@ import { Code } from '@astrojs/starlight/components'; interface Props { centerLatitude?: number; centerLongitude?: number; + zoomLevel?: number; mapClickPrefix?: string; markerClickPrefix?: string; markerLabel?: string; markerExtra?: string; - circleRadiusMeters?: number; + circleRadiusMeters?: string; circleStrokeColorExpr?: string; circleFillColorExpr?: string; } @@ -16,19 +17,25 @@ interface Props { const { centerLatitude = 37.7749, centerLongitude = -122.4194, + zoomLevel = 13.0, mapClickPrefix = 'Map clicked at', markerClickPrefix = 'Marker clicked', markerLabel = 'SF', markerExtra = 'San Francisco', - circleRadiusMeters = 1000.0, + circleRadiusMeters = '1000.0', circleStrokeColorExpr = 'Color.Blue', circleFillColorExpr = 'Color.Blue.copy(alpha = 0.3f)', } = Astro.props; const code = `@Composable fun GoogleMapsExample() { - val mapViewState = rememberGoogleMapViewState() + val center = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}) + val camera = MapCameraPosition(position = center, zoom = ${zoomLevel}) + // ↓↓↓ Use rememberGoogleMapViewState for Google Maps + val mapViewState = rememberGoogleMapViewState(cameraPosition = camera) + + // ↓↓↓ Use GoogleMapView for Google Maps GoogleMapView( state = mapViewState, onMapClick = { geoPoint -> @@ -37,7 +44,7 @@ fun GoogleMapsExample() { ) { Marker( position = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}), - icon = DefaultIcon(label = "${markerLabel}"), + icon = ColorDefaultIcon(label = "${markerLabel}"), extra = "${markerExtra}", onClick = { markerState -> println("${markerClickPrefix}: \${markerState.extra}") diff --git a/docs/src/components/components/mapviewcomponent/MapViewComponentSignaturesTabs.astro b/docs/src/components/components/mapviewcomponent/MapViewComponentSignaturesTabs.astro index 50508a8b..6435097e 100644 --- a/docs/src/components/components/mapviewcomponent/MapViewComponentSignaturesTabs.astro +++ b/docs/src/components/components/mapviewcomponent/MapViewComponentSignaturesTabs.astro @@ -72,7 +72,7 @@ const arcGISMapCode = `ArcGISMapView( - + diff --git a/docs/src/components/components/mapviewcomponent/MapboxExample.astro b/docs/src/components/components/mapviewcomponent/MapboxExample.astro index 09a9f305..338af9d0 100644 --- a/docs/src/components/components/mapviewcomponent/MapboxExample.astro +++ b/docs/src/components/components/mapviewcomponent/MapboxExample.astro @@ -6,18 +6,12 @@ interface Props { centerLongitude?: number; zoomLevel?: number; mapClickPrefix?: string; + markerClickPrefix?: string; markerLabel?: string; markerExtra?: string; - markerLatitude?: number; - markerLongitude?: number; - polylinePoint1Latitude?: number; - polylinePoint1Longitude?: number; - polylinePoint2Latitude?: number; - polylinePoint2Longitude?: number; - polylinePoint3Latitude?: number; - polylinePoint3Longitude?: number; - polylineStrokeColorExpr?: string; - polylineStrokeWidthDp?: number; + circleRadiusMeters?: string; + circleStrokeColorExpr?: string; + circleFillColorExpr?: string; } const { @@ -25,26 +19,23 @@ const { centerLongitude = -122.4194, zoomLevel = 13.0, mapClickPrefix = 'Map clicked at', - markerLabel = 'MB', - markerExtra = 'Mapbox marker', - markerLatitude = 37.7749, - markerLongitude = -122.4194, - polylinePoint1Latitude = 37.7749, - polylinePoint1Longitude = -122.4194, - polylinePoint2Latitude = 37.7849, - polylinePoint2Longitude = -122.4094, - polylinePoint3Latitude = 37.7949, - polylinePoint3Longitude = -122.3994, - polylineStrokeColorExpr = 'Color.Red', - polylineStrokeWidthDp = 3, + markerClickPrefix = 'Marker clicked', + markerLabel = 'SF', + markerExtra = 'San Francisco', + circleRadiusMeters = '1000.0', + circleStrokeColorExpr = 'Color.Blue', + circleFillColorExpr = 'Color.Blue.copy(alpha = 0.3f)', } = Astro.props; const code = `@Composable fun MapboxExample() { val center = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}) val camera = MapCameraPosition(position = center, zoom = ${zoomLevel}) + + // ↓↓↓ Use rememberMapboxMapViewState for MapBox val mapViewState = rememberMapboxMapViewState(cameraPosition = camera) + // ↓↓↓ Use MapboxMapView for MapBox MapboxMapView( state = mapViewState, onMapClick = { geoPoint -> @@ -52,19 +43,19 @@ fun MapboxExample() { } ) { Marker( - position = GeoPoint.fromLatLong(${markerLatitude}, ${markerLongitude}), - icon = DefaultIcon(label = "${markerLabel}"), - extra = "${markerExtra}" + position = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}), + icon = ColorDefaultIcon(label = "${markerLabel}"), + extra = "${markerExtra}", + onClick = { markerState -> + println("${markerClickPrefix}: \${markerState.extra}") + } ) - Polyline( - points = listOf( - GeoPoint.fromLatLong(${polylinePoint1Latitude}, ${polylinePoint1Longitude}), - GeoPoint.fromLatLong(${polylinePoint2Latitude}, ${polylinePoint2Longitude}), - GeoPoint.fromLatLong(${polylinePoint3Latitude}, ${polylinePoint3Longitude}) - ), - strokeColor = ${polylineStrokeColorExpr}, - strokeWidth = ${polylineStrokeWidthDp}.dp + Circle( + center = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}), + radiusMeters = ${circleRadiusMeters}, + strokeColor = ${circleStrokeColorExpr}, + fillColor = ${circleFillColorExpr} ) } }`; diff --git a/docs/src/components/components/mapviewcomponent/ProviderIndependentMapContentExample.astro b/docs/src/components/components/mapviewcomponent/ProviderIndependentMapContentExample.astro index 8efd4ae1..96bdfa58 100644 --- a/docs/src/components/components/mapviewcomponent/ProviderIndependentMapContentExample.astro +++ b/docs/src/components/components/mapviewcomponent/ProviderIndependentMapContentExample.astro @@ -29,7 +29,7 @@ const code = `@Composable fun MapContent() { Marker( position = GeoPoint.fromLatLong(${markerLatitude}, ${markerLongitude}), - icon = DefaultIcon(label = "${markerLabel}"), + icon = ColorDefaultIcon(label = "${markerLabel}"), extra = "${markerExtra}" ) diff --git a/docs/src/components/components/marker/DefaultIconSignature.astro b/docs/src/components/components/marker/ColorDefaultIconSignature.astro similarity index 91% rename from docs/src/components/components/marker/DefaultIconSignature.astro rename to docs/src/components/components/marker/ColorDefaultIconSignature.astro index 684f8424..94176e9b 100644 --- a/docs/src/components/components/marker/DefaultIconSignature.astro +++ b/docs/src/components/components/marker/ColorDefaultIconSignature.astro @@ -1,7 +1,7 @@ --- import { Code } from '@astrojs/starlight/components'; -const code = `DefaultIcon( +const code = `ColorDefaultIcon( scale: Float = 1.0f, label: String? = null, fillColor: Color = Color.Red, diff --git a/docs/src/components/components/marker/CustomIconMarkerExample.astro b/docs/src/components/components/marker/CustomIconMarkerExample.astro index 8c7ebaa9..938d54ec 100644 --- a/docs/src/components/components/marker/CustomIconMarkerExample.astro +++ b/docs/src/components/components/marker/CustomIconMarkerExample.astro @@ -13,7 +13,7 @@ const code = `${commentForMapViewUsage.startsWith("Replace") ? "// " + commentFo MapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(37.7749, -122.4194), - icon = DefaultIcon( + icon = ColorDefaultIcon( scale = 1.5f, label = "SF", fillColor = Color.Blue, diff --git a/docs/src/components/components/marker/DraggableMarkerExample.astro b/docs/src/components/components/marker/DraggableMarkerExample.astro index 54dde7ee..02c84622 100644 --- a/docs/src/components/components/marker/DraggableMarkerExample.astro +++ b/docs/src/components/components/marker/DraggableMarkerExample.astro @@ -22,7 +22,7 @@ fun DraggableMarkerExample() { Marker( position = markerPosition, draggable = true, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "Drag me", fillColor = Color.Green ), diff --git a/docs/src/components/components/marker/DraggableMarkerWithStateExample.astro b/docs/src/components/components/marker/DraggableMarkerWithStateExample.astro index a2c45f55..54a67b29 100644 --- a/docs/src/components/components/marker/DraggableMarkerWithStateExample.astro +++ b/docs/src/components/components/marker/DraggableMarkerWithStateExample.astro @@ -14,7 +14,7 @@ fun DraggableMarkerExample() { val markerState = MarkerState( position = GeoPoint.fromLatLong(37.7749, -122.4194), draggable = true, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "Drag me", fillColor = Color.Green ), diff --git a/docs/src/components/components/marker/MultipleMarkersExample.astro b/docs/src/components/components/marker/MultipleMarkersExample.astro index b115b9cc..25963168 100644 --- a/docs/src/components/components/marker/MultipleMarkersExample.astro +++ b/docs/src/components/components/marker/MultipleMarkersExample.astro @@ -14,23 +14,23 @@ MapView(state = mapViewState) { // Default icon with different scales Marker( position = GeoPoint.fromLatLong(37.7749, -122.4194), - icon = DefaultIcon(scale = 0.7f, label = "Small") + icon = ColorDefaultIcon(scale = 0.7f, label = "Small") ) Marker( position = GeoPoint.fromLatLong(37.7849, -122.4094), - icon = DefaultIcon(scale = 1.0f, label = "Normal") + icon = ColorDefaultIcon(scale = 1.0f, label = "Normal") ) Marker( position = GeoPoint.fromLatLong(37.7949, -122.3994), - icon = DefaultIcon(scale = 1.4f, label = "Large") + icon = ColorDefaultIcon(scale = 1.4f, label = "Large") ) // Custom colored marker Marker( position = GeoPoint.fromLatLong(37.7649, -122.4294), - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Yellow, strokeColor = Color.Black, strokeWidth = 2.dp, diff --git a/docs/src/components/components/polygon/ComplexPolygonExample.astro b/docs/src/components/components/polygon/ComplexPolygonExample.astro index d54f75c0..3515f88e 100644 --- a/docs/src/components/components/polygon/ComplexPolygonExample.astro +++ b/docs/src/components/components/polygon/ComplexPolygonExample.astro @@ -53,7 +53,7 @@ fun ComplexPolygonExample() { Marker( position = GeoPoint.fromLatLong(${centerLatitude}, ${centerLongitude}), - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Magenta, label = "${markerLabel}" ) diff --git a/docs/src/components/components/polygon/DynamicPolygonExample.astro b/docs/src/components/components/polygon/DynamicPolygonExample.astro index 3ce8cedc..d061f2b4 100644 --- a/docs/src/components/components/polygon/DynamicPolygonExample.astro +++ b/docs/src/components/components/polygon/DynamicPolygonExample.astro @@ -49,7 +49,7 @@ fun DynamicPolygonExample() { polygonPoints.forEachIndexed { index, point -> Marker( position = point, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = if (index == 0) Color.Green else if (index == polygonPoints.size - 1 && !isCreating) Color.Red else Color.Blue, diff --git a/docs/src/components/components/polygon/GeodesicPolygonComparisonExample.astro b/docs/src/components/components/polygon/GeodesicPolygonComparisonExample.astro index e3384ab7..d0dbff9b 100644 --- a/docs/src/components/components/polygon/GeodesicPolygonComparisonExample.astro +++ b/docs/src/components/components/polygon/GeodesicPolygonComparisonExample.astro @@ -78,7 +78,7 @@ fun MapView(modifier: Modifier = Modifier) { val onPolygonClick: OnPolygonEventHandler = { event -> marker = MarkerState( position = event.clicked, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = event.state.fillColor, strokeColor = Color.Red, ), diff --git a/docs/src/components/components/polygon/InteractivePolygonExample.astro b/docs/src/components/components/polygon/InteractivePolygonExample.astro index c7c72d02..2d1ae018 100644 --- a/docs/src/components/components/polygon/InteractivePolygonExample.astro +++ b/docs/src/components/components/polygon/InteractivePolygonExample.astro @@ -59,7 +59,7 @@ fun InteractivePolygonExample() { MarkerState( id = "marker-\${index + 1}", // important position = point, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Red, strokeColor = Color.White, label = "\${index + 1}", diff --git a/docs/src/components/components/polyline/DynamicPolylineExample.astro b/docs/src/components/components/polyline/DynamicPolylineExample.astro index b9d3553a..d949662e 100644 --- a/docs/src/components/components/polyline/DynamicPolylineExample.astro +++ b/docs/src/components/components/polyline/DynamicPolylineExample.astro @@ -39,7 +39,7 @@ fun DynamicPolylineExample() { points.forEachIndexed { index, point -> Marker( position = point, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = if (index == 0) Color.Green else if (index == points.size - 1) Color.Red else Color.Blue, diff --git a/docs/src/components/components/polyline/GeodesicPolylineExample.astro b/docs/src/components/components/polyline/GeodesicPolylineExample.astro index 4cbbc398..775e44bb 100644 --- a/docs/src/components/components/polyline/GeodesicPolylineExample.astro +++ b/docs/src/components/components/polyline/GeodesicPolylineExample.astro @@ -10,7 +10,7 @@ fun GeodesicPolylineExample(modifier: Modifier = Modifier) { var markers by remember { mutableStateOf>(emptyList()) } val onPolylineClick: OnPolylineEventHandler = { polylineEvent -> markers = markers + MarkerState( - icon = DefaultIcon(fillColor = polylineEvent.state.strokeColor), + icon = ColorDefaultIcon(fillColor = polylineEvent.state.strokeColor), position = polylineEvent.clicked ) } diff --git a/docs/src/components/components/polyline/InteractivePolylineExample.astro b/docs/src/components/components/polyline/InteractivePolylineExample.astro index 0a6c23a4..46ca6c1e 100644 --- a/docs/src/components/components/polyline/InteractivePolylineExample.astro +++ b/docs/src/components/components/polyline/InteractivePolylineExample.astro @@ -46,7 +46,7 @@ fun InteractivePolylineExample() { MarkerState( id = "marker-\${index}", position = point, - icon = DefaultIcon(label = "\${index + 1}", scale = 0.7f), + icon = ColorDefaultIcon(label = "\${index + 1}", scale = 0.7f), draggable = true, extra = index, onDrag = onWaypointDrag diff --git a/docs/src/components/core/geopoint/BasicMarkerExample.astro b/docs/src/components/core/geopoint/BasicMarkerExample.astro index ff4ee93e..feaf3db8 100644 --- a/docs/src/components/core/geopoint/BasicMarkerExample.astro +++ b/docs/src/components/core/geopoint/BasicMarkerExample.astro @@ -24,7 +24,7 @@ val sanFrancisco = GeoPoint.fromLatLong(${latitude}, ${longitude}) MapViewContainer(state = mapViewState) { Marker( position = sanFrancisco, - icon = DefaultIcon(label = "${label}") + icon = ColorDefaultIcon(label = "${label}") ) }`; --- diff --git a/docs/src/components/core/georectbounds/BoundsBasedLoadingExample.astro b/docs/src/components/core/georectbounds/BoundsBasedLoadingExample.astro index 4fe8bc45..f474abb5 100644 --- a/docs/src/components/core/georectbounds/BoundsBasedLoadingExample.astro +++ b/docs/src/components/core/georectbounds/BoundsBasedLoadingExample.astro @@ -78,7 +78,7 @@ fun BoundsBasedLoadingExample() { markersInBounds.forEach { position -> Marker( position = position, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Green, scale = 0.8f ) diff --git a/docs/src/components/core/georectbounds/BoundsEditorExample.astro b/docs/src/components/core/georectbounds/BoundsEditorExample.astro index 498c2bfd..08120acf 100644 --- a/docs/src/components/core/georectbounds/BoundsEditorExample.astro +++ b/docs/src/components/core/georectbounds/BoundsEditorExample.astro @@ -71,7 +71,7 @@ fun BoundsEditorExample() { // Corner markers Marker( position = sw, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Green, label = "SW" ), @@ -82,7 +82,7 @@ fun BoundsEditorExample() { Marker( position = ne, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Red, label = "NE" ), diff --git a/docs/src/components/core/georectbounds/ViewportBoundsExample.astro b/docs/src/components/core/georectbounds/ViewportBoundsExample.astro index 53ad9f74..fccec454 100644 --- a/docs/src/components/core/georectbounds/ViewportBoundsExample.astro +++ b/docs/src/components/core/georectbounds/ViewportBoundsExample.astro @@ -55,7 +55,7 @@ fun ViewportBoundsExample() { markers.forEach { position -> Marker( position = position, - icon = DefaultIcon(fillColor = Color.Blue) + icon = ColorDefaultIcon(fillColor = Color.Blue) ) } diff --git a/docs/src/components/core/mapcameraposition/AnimatedCameraExample.astro b/docs/src/components/core/mapcameraposition/AnimatedCameraExample.astro index a1b8f97a..0c5f9ba2 100644 --- a/docs/src/components/core/mapcameraposition/AnimatedCameraExample.astro +++ b/docs/src/components/core/mapcameraposition/AnimatedCameraExample.astro @@ -58,7 +58,7 @@ fun AnimatedCameraExample() { locations.forEachIndexed { index, location -> Marker( position = location, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = if (index == currentIndex) Color.Red else Color.Gray, label = when (index) { 0 -> "SF" diff --git a/docs/src/components/core/mapcameraposition/CameraControlExample.astro b/docs/src/components/core/mapcameraposition/CameraControlExample.astro index fedb84a7..3363fc7d 100644 --- a/docs/src/components/core/mapcameraposition/CameraControlExample.astro +++ b/docs/src/components/core/mapcameraposition/CameraControlExample.astro @@ -81,7 +81,7 @@ fun CameraControlExample(modifier: Modifier = Modifier) { ) { Marker( position = mapViewState.cameraPosition.position, - icon = DefaultIcon(fillColor = Color.Red) + icon = ColorDefaultIcon(fillColor = Color.Red) ) } } diff --git a/docs/src/components/core/mapcameraposition/NegativeTiltExample.astro b/docs/src/components/core/mapcameraposition/NegativeTiltExample.astro new file mode 100644 index 00000000..01ae0b87 --- /dev/null +++ b/docs/src/components/core/mapcameraposition/NegativeTiltExample.astro @@ -0,0 +1,38 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + latitude?: number; + longitude?: number; + commentForLookUp?: string; + commentForNormal?: string; + commentForArcGISNote?: string; +} + +const { + latitude = 35.68, + longitude = 139.76, + commentForLookUp = "前方（水平線上方）を見る", + commentForNormal = "通常の俯瞰ビュー", + commentForArcGISNote = "ArcGIS はネイティブ対応" +} = Astro.props; + +const code = `// ${commentForNormal}（従来の動作） +MapCameraPosition( + position = GeoPoint(${latitude}, ${longitude}), + zoom = 15.0, + tilt = 60.0, // 地面を60度の角度で見下ろす +) + +// ${commentForLookUp} +MapCameraPosition( + position = GeoPoint(${latitude}, ${longitude}), + zoom = 15.0, + tilt = -30.0, // 水平線より30度上方を見る + bearing = 45.0, +) + +// ${commentForArcGISNote}`; +--- + + diff --git a/docs/src/components/core/mapcameraposition/NegativeTiltSdkNote.astro b/docs/src/components/core/mapcameraposition/NegativeTiltSdkNote.astro new file mode 100644 index 00000000..7adb1228 --- /dev/null +++ b/docs/src/components/core/mapcameraposition/NegativeTiltSdkNote.astro @@ -0,0 +1,4 @@ +
    +
  • ArcGIS: ArcGIS のカメラ仕様と同じく、負の tilt にネイティブ対応します。
    • +
  • Google Maps / Mapbox / MapLibre / HERE: 上向きピッチを直接表現できないため、カメラ位置を固定し、bearing 方向の前方へターゲットを移動してシミュレーションします。ネイティブの仰角ビューと完全に同一にはなりません。
    • +
diff --git a/docs/src/components/core/marker-icons/DefaultIconSignature.astro b/docs/src/components/core/marker-icons/ColorDefaultIconSignature.astro similarity index 100% rename from docs/src/components/core/marker-icons/DefaultIconSignature.astro rename to docs/src/components/core/marker-icons/ColorDefaultIconSignature.astro diff --git a/docs/src/components/core/marker-icons/DefaultIconUsageExamples.astro b/docs/src/components/core/marker-icons/ColorDefaultIconUsageExamples.astro similarity index 94% rename from docs/src/components/core/marker-icons/DefaultIconUsageExamples.astro rename to docs/src/components/core/marker-icons/ColorDefaultIconUsageExamples.astro index d804f170..9b8f09a8 100644 --- a/docs/src/components/core/marker-icons/DefaultIconUsageExamples.astro +++ b/docs/src/components/core/marker-icons/ColorDefaultIconUsageExamples.astro @@ -20,7 +20,7 @@ MapView(state = mapViewState) { // Custom colored marker with label Marker( position = GeoPoint.fromLatLong(37.7849, -122.4094), - icon = DefaultIcon( + icon = ColorDefaultIcon( scale = 1.2f, label = "SF", fillColor = Color.Blue, @@ -32,7 +32,7 @@ MapView(state = mapViewState) { // Small marker with custom styling Marker( position = GeoPoint.fromLatLong(37.7649, -122.4294), - icon = DefaultIcon( + icon = ColorDefaultIcon( scale = 0.8f, fillColor = Color.Green, labelTextColor = Color.Black, diff --git a/docs/src/components/core/marker-icons/DebugImageIconExample.astro b/docs/src/components/core/marker-icons/DebugImageIconExample.astro index 65ce627e..e8613ba9 100644 --- a/docs/src/components/core/marker-icons/DebugImageIconExample.astro +++ b/docs/src/components/core/marker-icons/DebugImageIconExample.astro @@ -3,7 +3,7 @@ import { Code } from '@astrojs/starlight/components'; const code = `Marker( position = position, - icon = ImageDefaultIcon( + icon = ImageColorDefaultIcon( drawable = customDrawable, anchor = Offset(0.5f, 1.0f), debug = true // Shows anchor point and bounds diff --git a/docs/src/components/core/marker-icons/DynamicIconExample.astro b/docs/src/components/core/marker-icons/DynamicIconExample.astro index d8f396b6..106cee64 100644 --- a/docs/src/components/core/marker-icons/DynamicIconExample.astro +++ b/docs/src/components/core/marker-icons/DynamicIconExample.astro @@ -17,7 +17,7 @@ fun DynamicIconExample() { // ${commentForMapViewUsage} MapView(state = mapViewState) { val icon = when (iconType) { - "default" -> DefaultIcon( + "default" -> ColorDefaultIcon( fillColor = Color.Blue, label = "D" ) @@ -25,12 +25,12 @@ fun DynamicIconExample() { DrawableDefaultIcon(backgroundDrawable = it) } "image" -> AppCompatResources.getDrawable(context, R.drawable.location_icon)?.let { - ImageDefaultIcon( + ImageColorDefaultIcon( drawable = it, anchor = Offset(0.5f, 1.0f) ) } - else -> DefaultIcon() + else -> ColorDefaultIcon() } Marker( diff --git a/docs/src/components/core/marker-icons/ImageDefaultIconSignature.astro b/docs/src/components/core/marker-icons/ImageDefaultIconSignature.astro index fd1b4abf..2cd91701 100644 --- a/docs/src/components/core/marker-icons/ImageDefaultIconSignature.astro +++ b/docs/src/components/core/marker-icons/ImageDefaultIconSignature.astro @@ -1,7 +1,7 @@ --- import { Code } from '@astrojs/starlight/components'; -const code = `ImageDefaultIcon( +const code = `ImageColorDefaultIcon( drawable: Drawable, anchor: Offset = Offset(0.5f, 0.5f), debug: Boolean = false diff --git a/docs/src/components/core/marker-icons/ImageIconExamples.astro b/docs/src/components/core/marker-icons/ImageIconExamples.astro index a2a91db2..25977044 100644 --- a/docs/src/components/core/marker-icons/ImageIconExamples.astro +++ b/docs/src/components/core/marker-icons/ImageIconExamples.astro @@ -23,7 +23,7 @@ fun ImageIconExamples() { AppCompatResources.getDrawable(context, R.drawable.weather_station)?.let { icon -> Marker( position = GeoPoint.fromLatLong(37.7749, -122.4194), - icon = ImageDefaultIcon( + icon = ImageColorDefaultIcon( drawable = icon, anchor = Offset(0.5f, 1.0f), // Bottom center debug = false @@ -35,7 +35,7 @@ fun ImageIconExamples() { AppCompatResources.getDrawable(context, R.drawable.direction_arrow)?.let { icon -> Marker( position = GeoPoint.fromLatLong(37.7849, -122.4094), - icon = ImageDefaultIcon( + icon = ImageColorDefaultIcon( drawable = icon, anchor = Offset(0.5f, 0.5f), // Center debug = true // Shows anchor point diff --git a/docs/src/components/core/marker-icons/MarkerIconFactoryExample.astro b/docs/src/components/core/marker-icons/MarkerIconFactoryExample.astro index 2c33b942..eb337dc8 100644 --- a/docs/src/components/core/marker-icons/MarkerIconFactoryExample.astro +++ b/docs/src/components/core/marker-icons/MarkerIconFactoryExample.astro @@ -27,7 +27,7 @@ const code = `object MarkerIconFactory { val rotatedDrawable = drawable.mutate() rotatedDrawable.setColorFilter(null) - ImageDefaultIcon( + ImageColorDefaultIcon( drawable = rotatedDrawable, anchor = Offset(0.5f, 0.5f) ) diff --git a/docs/src/components/core/spherical-utilities/GeofenceExample.astro b/docs/src/components/core/spherical-utilities/GeofenceExample.astro index dedf2650..c5e50d9f 100644 --- a/docs/src/components/core/spherical-utilities/GeofenceExample.astro +++ b/docs/src/components/core/spherical-utilities/GeofenceExample.astro @@ -45,7 +45,7 @@ fun GeofenceExample() { userLocation?.let { location -> Marker( position = location, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = if (insideGeofence) Color.Green else Color.Red, label = if (insideGeofence) "${labelInside}" else "${labelOutside}" ) diff --git a/docs/src/components/core/spherical-utilities/InterpolateExample.astro b/docs/src/components/core/spherical-utilities/InterpolateExample.astro index 0b5eba47..e3d641c6 100644 --- a/docs/src/components/core/spherical-utilities/InterpolateExample.astro +++ b/docs/src/components/core/spherical-utilities/InterpolateExample.astro @@ -45,7 +45,7 @@ fun AnimatedRoute() { if (currentWaypoint < waypoints.size) { Marker( position = waypoints[currentWaypoint], - icon = DefaultIcon(fillColor = Color.Red) + icon = ColorDefaultIcon(fillColor = Color.Red) ) } } diff --git a/docs/src/components/core/spherical-utilities/ProximityAlertExample.astro b/docs/src/components/core/spherical-utilities/ProximityAlertExample.astro index 1c087ca5..81f91165 100644 --- a/docs/src/components/core/spherical-utilities/ProximityAlertExample.astro +++ b/docs/src/components/core/spherical-utilities/ProximityAlertExample.astro @@ -36,7 +36,7 @@ fun ProximityAlert() { // Target location Marker( position = targetLocation, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = if (isNearTarget) Color.Green else Color.Red, label = "Target" ) @@ -54,7 +54,7 @@ fun ProximityAlert() { userLocation?.let { location -> Marker( position = location, - icon = DefaultIcon(fillColor = Color.Blue, label = "You") + icon = ColorDefaultIcon(fillColor = Color.Blue, label = "You") ) } } diff --git a/docs/src/components/core/spherical-utilities/RouteProgressExample.astro b/docs/src/components/core/spherical-utilities/RouteProgressExample.astro index 3173223c..e1a64d05 100644 --- a/docs/src/components/core/spherical-utilities/RouteProgressExample.astro +++ b/docs/src/components/core/spherical-utilities/RouteProgressExample.astro @@ -76,7 +76,7 @@ fun RouteProgress() { // Current position Marker( position = currentPosition, - icon = DefaultIcon(fillColor = Color.Red, label = "Current") + icon = ColorDefaultIcon(fillColor = Color.Red, label = "Current") ) } } diff --git a/docs/src/components/core/zoom-levels/ContextAwareZoomExample.astro b/docs/src/components/core/zoom-levels/ContextAwareZoomExample.astro index fb693dff..f61419c5 100644 --- a/docs/src/components/core/zoom-levels/ContextAwareZoomExample.astro +++ b/docs/src/components/core/zoom-levels/ContextAwareZoomExample.astro @@ -49,7 +49,7 @@ fun ContextAwareZoom() { searchResults.forEach { result -> Marker( position = result.location, - icon = DefaultIcon(fillColor = Color.Red) + icon = ColorDefaultIcon(fillColor = Color.Red) ) } } diff --git a/docs/src/components/examples/advanced-usage/AdvancedMapExample.astro b/docs/src/components/examples/advanced-usage/AdvancedMapExample.astro index 8368f7bb..a577fd63 100644 --- a/docs/src/components/examples/advanced-usage/AdvancedMapExample.astro +++ b/docs/src/components/examples/advanced-usage/AdvancedMapExample.astro @@ -60,7 +60,7 @@ fun AdvancedMapScreen() { // ${commentMarker} Marker( position = GeoPoint.fromLatLong(${centerLat}, ${centerLong}), - icon = DefaultIcon(label = "${markerLabel}"), + icon = ColorDefaultIcon(label = "${markerLabel}"), onClick = { markerState -> println("${commentForMarkerClick}") } diff --git a/docs/src/components/examples/basic-usage/ClickToAddMarkersExample.astro b/docs/src/components/examples/basic-usage/ClickToAddMarkersExample.astro index 6bedeb93..c39da275 100644 --- a/docs/src/components/examples/basic-usage/ClickToAddMarkersExample.astro +++ b/docs/src/components/examples/basic-usage/ClickToAddMarkersExample.astro @@ -25,7 +25,7 @@ fun ClickToAddMarkersExample() { onMapClick = { geoPoint -> val newMarker = MarkerState( position = geoPoint, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "\${markers.size + 1}", fillColor = ${fillColor} ), diff --git a/docs/src/components/examples/basic-usage/SimpleMapExampleTabs.astro b/docs/src/components/examples/basic-usage/SimpleMapExampleTabs.astro index 4078004b..c87953c3 100644 --- a/docs/src/components/examples/basic-usage/SimpleMapExampleTabs.astro +++ b/docs/src/components/examples/basic-usage/SimpleMapExampleTabs.astro @@ -64,7 +64,7 @@ fun SimpleMapExample() { GoogleMapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(${googleMapsLat}, ${googleMapsLong}), - icon = DefaultIcon(label = "${googleMapsLabel}"), + icon = ColorDefaultIcon(label = "${googleMapsLabel}"), extra = "${googleMapsExtra}" ) } @@ -77,7 +77,7 @@ fun SimpleMapExample() { MapboxMapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(${mapboxLat}, ${mapboxLong}), - icon = DefaultIcon(label = "${mapboxLabel}"), + icon = ColorDefaultIcon(label = "${mapboxLabel}"), extra = "${mapboxExtra}" ) } @@ -90,7 +90,7 @@ fun SimpleMapExample() { HereMapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(${hereLat}, ${hereLong}), - icon = DefaultIcon(label = "${hereLabel}"), + icon = ColorDefaultIcon(label = "${hereLabel}"), extra = "${hereExtra}" ) } @@ -103,7 +103,7 @@ fun SimpleMapExample() { ArcGISMapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(${arcgisLat}, ${arcgisLong}), - icon = DefaultIcon(label = "${arcgisLabel}"), + icon = ColorDefaultIcon(label = "${arcgisLabel}"), extra = "${arcgisExtra}" ) } @@ -116,7 +116,7 @@ fun SimpleMapExample() { MapLibreMapView(state = mapViewState) { Marker( position = GeoPoint.fromLatLong(${maplibreLat}, ${maplibreLong}), - icon = DefaultIcon(label = "${maplibreLabel}"), + icon = ColorDefaultIcon(label = "${maplibreLabel}"), extra = "${maplibreExtra}" ) } diff --git a/docs/src/components/experimental/geojson/GeoJSONBasicExample.astro b/docs/src/components/experimental/geojson/GeoJSONBasicExample.astro new file mode 100644 index 00000000..3a9a48b0 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONBasicExample.astro @@ -0,0 +1,43 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `val layerState = remember { GeoJSONLayerState() } +val features = remember { + listOf( + GeoJSONFeature( + geometry = GeoJSONGeometry.Point(longitude = 139.76, latitude = 35.68), + properties = mapOf("name" to "東京駅"), + ), + GeoJSONFeature( + geometry = GeoJSONGeometry.LineString( + coordinates = listOf( + LonLat(139.76, 35.68), + LonLat(139.77, 35.69), + ) + ), + ), + GeoJSONFeature( + geometry = GeoJSONGeometry.Polygon( + rings = listOf( + listOf( + LonLat(139.75, 35.67), + LonLat(139.77, 35.67), + LonLat(139.77, 35.69), + LonLat(139.75, 35.69), + LonLat(139.75, 35.67), // 始点と終点を同じにする + ) + ) + ), + ), + ) +} + +MapView(...) { + GeoJSONLayer( + state = layerState, + features = features, + ) +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONClickExample.astro b/docs/src/components/experimental/geojson/GeoJSONClickExample.astro new file mode 100644 index 00000000..29fcf191 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONClickExample.astro @@ -0,0 +1,35 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + commentForHitTest?: string; + commentForResult?: string; +} + +const { + commentForHitTest = "タップ位置のフィーチャを検索", + commentForResult = "フィーチャが見つかった場合" +} = Astro.props; + +const code = `val layerState = remember { + GeoJSONLayerState( + onClick = { feature, position -> + println("${commentForResult}: \${feature.properties["name"]}") + } + ) +} + +MapView( + onMapClick = { geoPoint -> + // ${commentForHitTest} + val handled = layerState.processClick(geoPoint) + if (!handled) { + // GeoJSON フィーチャ以外のタップ処理 + } + } +) { + GeoJSONLayer(state = layerState, features = features) +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONFeatureSignature.astro b/docs/src/components/experimental/geojson/GeoJSONFeatureSignature.astro new file mode 100644 index 00000000..9414a1ca --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONFeatureSignature.astro @@ -0,0 +1,16 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `data class GeoJSONFeature( + val id: String? = null, + val geometry: GeoJSONGeometry, + val properties: Map = emptyMap(), + val strokeColor: Int? = null, // nullの場合は GeoJSONLayerState のデフォルトを使用 + val fillColor: Int? = null, + val strokeWidth: Float? = null, + val pointRadius: Float? = null, + val visible: Boolean = true, +)`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONFeatureStateExample.astro b/docs/src/components/experimental/geojson/GeoJSONFeatureStateExample.astro new file mode 100644 index 00000000..108d6fce --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONFeatureStateExample.astro @@ -0,0 +1,37 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + commentForDynamic?: string; + commentForContent?: string; +} + +const { + commentForDynamic = "動的に変化するフィーチャ（Compose state）", + commentForContent = "content ブロック内に GeoJSONFeatureState を配置" +} = Astro.props; + +const code = `val featureState = remember { + GeoJSONFeatureState( + geometry = GeoJSONGeometry.Point(longitude = 139.76, latitude = 35.68), + properties = mapOf("name" to "動的ポイント"), + ) +} + +// ${commentForDynamic} +LaunchedEffect(userLocation) { + featureState.geometry = GeoJSONGeometry.Point( + longitude = userLocation.longitude, + latitude = userLocation.latitude, + ) +} + +MapView(...) { + GeoJSONLayer(state = layerState) { + // ${commentForContent} + GeoJSONFeatureCompose(state = featureState) + } +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONGeometryTypes.astro b/docs/src/components/experimental/geojson/GeoJSONGeometryTypes.astro new file mode 100644 index 00000000..5e4944d3 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONGeometryTypes.astro @@ -0,0 +1,18 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `sealed class GeoJSONGeometry { + data class Point(val longitude: Double, val latitude: Double) + data class MultiPoint(val points: List) + data class LineString(val coordinates: List) + data class MultiLineString(val lines: List>) + data class Polygon(val rings: List>) // rings[0]=外周, rings[1..]=穴 + data class MultiPolygon(val polygons: List>>) + data class GeometryCollection(val geometries: List) + object Empty +} + +data class LonLat(val longitude: Double, val latitude: Double)`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONLayerInstall.astro b/docs/src/components/experimental/geojson/GeoJSONLayerInstall.astro new file mode 100644 index 00000000..7649eb99 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONLayerInstall.astro @@ -0,0 +1,14 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `dependencies { + implementation(platform("com.mapconductor:mapconductor-bom:{BOM_MODULE_VERSION}")) + implementation("com.mapconductor:core") + implementation("com.mapconductor:geojson-layer") + + // 使用する地図 SDK を選択 + implementation("com.mapconductor:for-googlemaps") +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONLayerSignature.astro b/docs/src/components/experimental/geojson/GeoJSONLayerSignature.astro new file mode 100644 index 00000000..14a161ac --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONLayerSignature.astro @@ -0,0 +1,14 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `@Composable +fun MapViewScope.GeoJSONLayer( + state: GeoJSONLayerState = remember { GeoJSONLayerState() }, + features: List = emptyList(), + tileSize: Int = 512, + disableTileServerCache: Boolean = false, + content: @Composable () -> Unit = {}, +)`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONLayerStateSignature.astro b/docs/src/components/experimental/geojson/GeoJSONLayerStateSignature.astro new file mode 100644 index 00000000..b4332bd5 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONLayerStateSignature.astro @@ -0,0 +1,19 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `class GeoJSONLayerState( + opacity: Float = 1.0f, + strokeColor: Int = Color.argb(255, 30, 136, 229), // 青系 + fillColor: Int = Color.argb(128, 30, 136, 229), // 半透明青系 + strokeWidth: Float = 2f, + pointRadius: Float = 8f, + visible: Boolean = true, + minZoom: Int = 0, + maxZoom: Int = 22, + val onClick: ((feature: GeoJSONFeature, position: GeoPoint) -> Unit)? = null, +) { + fun processClick(geoPoint: GeoPoint): Boolean +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONParserExample.astro b/docs/src/components/experimental/geojson/GeoJSONParserExample.astro new file mode 100644 index 00000000..9eef8ed3 --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONParserExample.astro @@ -0,0 +1,23 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +interface Props { + commentForLargeFile?: string; + commentForStream?: string; +} + +const { + commentForLargeFile = "大容量 GeoJSON ファイルのパース", + commentForStream = "1フィーチャずつ処理（メモリ効率が良い）" +} = Astro.props; + +const code = `// ${commentForLargeFile} +val features = GeoJSONParser.parseStream(assets.open("data.geojson")) + +// ${commentForStream} +GeoJSONParser.streamParse(assets.open("large-data.geojson")) { feature -> + // 1件ずつ処理 +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONParserSignature.astro b/docs/src/components/experimental/geojson/GeoJSONParserSignature.astro new file mode 100644 index 00000000..4b3b9d9d --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONParserSignature.astro @@ -0,0 +1,13 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `object GeoJSONParser { + // InputStream 全体をパースして List を返す + fun parseStream(inputStream: InputStream): List + + // 1フィーチャずつコールバック — 大容量ファイル（10MB+）向け + fun streamParse(inputStream: InputStream, onFeature: (GeoJSONFeature) -> Unit) +}`; +--- + + diff --git a/docs/src/components/experimental/geojson/GeoJSONStyleExample.astro b/docs/src/components/experimental/geojson/GeoJSONStyleExample.astro new file mode 100644 index 00000000..802cccbb --- /dev/null +++ b/docs/src/components/experimental/geojson/GeoJSONStyleExample.astro @@ -0,0 +1,15 @@ +--- +import { Code } from '@astrojs/starlight/components'; + +const code = `val layerState = remember { + GeoJSONLayerState( + strokeColor = Color.rgb(255, 87, 34), // オレンジ + fillColor = Color.argb(100, 255, 87, 34), // 半透明オレンジ + strokeWidth = 3f, + pointRadius = 12f, + opacity = 0.9f, + ) +}`; +--- + + diff --git a/docs/src/components/experimental/marker-native-strategy/BasicNativeExampleComposable.astro b/docs/src/components/experimental/marker-native-strategy/BasicNativeExampleComposable.astro index 18519761..88eef6ab 100644 --- a/docs/src/components/experimental/marker-native-strategy/BasicNativeExampleComposable.astro +++ b/docs/src/components/experimental/marker-native-strategy/BasicNativeExampleComposable.astro @@ -28,7 +28,7 @@ fun BasicNativeExample() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon() + icon = ColorDefaultIcon() ) ) nativeManager.registerEntity(entity) diff --git a/docs/src/components/experimental/marker-native-strategy/NativeBatchOperationsExample.astro b/docs/src/components/experimental/marker-native-strategy/NativeBatchOperationsExample.astro index 2612d3c5..23885910 100644 --- a/docs/src/components/experimental/marker-native-strategy/NativeBatchOperationsExample.astro +++ b/docs/src/components/experimental/marker-native-strategy/NativeBatchOperationsExample.astro @@ -11,7 +11,7 @@ const code = `suspend fun batchNativeOperations(nativeManager: NativeMarkerManag state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon() + icon = ColorDefaultIcon() ) ) nativeManager.registerEntity(entity) diff --git a/docs/src/components/experimental/marker-native-strategy/NativeClusteringExampleComposable.astro b/docs/src/components/experimental/marker-native-strategy/NativeClusteringExampleComposable.astro index 63c71448..88e6d043 100644 --- a/docs/src/components/experimental/marker-native-strategy/NativeClusteringExampleComposable.astro +++ b/docs/src/components/experimental/marker-native-strategy/NativeClusteringExampleComposable.astro @@ -39,7 +39,7 @@ fun NativeClusteringExample() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon(fillColor = Color.Blue, scale = 0.8f) + icon = ColorDefaultIcon(fillColor = Color.Blue, scale = 0.8f) ) ) nativeManager.registerEntity(entity) diff --git a/docs/src/components/experimental/marker-strategy/ClusteringStrategyExampleComposable.astro b/docs/src/components/experimental/marker-strategy/ClusteringStrategyExampleComposable.astro index e3638821..a7e62359 100644 --- a/docs/src/components/experimental/marker-strategy/ClusteringStrategyExampleComposable.astro +++ b/docs/src/components/experimental/marker-strategy/ClusteringStrategyExampleComposable.astro @@ -36,7 +36,7 @@ fun ClusteringStrategyExample() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = markerData.category.color, scale = 0.8f ) diff --git a/docs/src/components/experimental/marker-strategy/CustomMarkerStrategyExample.astro b/docs/src/components/experimental/marker-strategy/CustomMarkerStrategyExample.astro index bee9ed71..b2ab250e 100644 --- a/docs/src/components/experimental/marker-strategy/CustomMarkerStrategyExample.astro +++ b/docs/src/components/experimental/marker-strategy/CustomMarkerStrategyExample.astro @@ -43,7 +43,7 @@ const code = `class CustomMarkerStrategy( val addParams = markersToShow.map { entity -> object : MarkerOverlayRendererInterface.AddParamsInterface { override val state: MarkerState = entity.state - override val bitmapIcon: BitmapIcon = entity.state.icon?.toBitmapIcon() ?: defaultIcon + override val bitmapIcon: BitmapIcon = entity.state.icon?.toBitmapIcon() ?: ColorDefaultIcon } } renderer.onAdd(addParams) diff --git a/docs/src/components/experimental/marker-strategy/DynamicLoadingExampleComposable.astro b/docs/src/components/experimental/marker-strategy/DynamicLoadingExampleComposable.astro index ad249fcf..93247978 100644 --- a/docs/src/components/experimental/marker-strategy/DynamicLoadingExampleComposable.astro +++ b/docs/src/components/experimental/marker-strategy/DynamicLoadingExampleComposable.astro @@ -32,7 +32,7 @@ fun DynamicLoadingExample() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon() + icon = ColorDefaultIcon() ) ) diff --git a/docs/src/components/experimental/marker-strategy/MigrationBasicToStrategyComposable.astro b/docs/src/components/experimental/marker-strategy/MigrationBasicToStrategyComposable.astro index 28c629f3..9f1ed0dc 100644 --- a/docs/src/components/experimental/marker-strategy/MigrationBasicToStrategyComposable.astro +++ b/docs/src/components/experimental/marker-strategy/MigrationBasicToStrategyComposable.astro @@ -16,7 +16,7 @@ fun BasicMarkers() { markers.forEach { markerData -> Marker( position = markerData.position, - icon = DefaultIcon() + icon = ColorDefaultIcon() ) } } @@ -33,7 +33,7 @@ fun StrategyMarkers() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon() + icon = ColorDefaultIcon() ) ) strategy.markerManager.registerEntity(entity) diff --git a/docs/src/components/experimental/marker-strategy/StrategyMarkerManagementComposable.astro b/docs/src/components/experimental/marker-strategy/StrategyMarkerManagementComposable.astro index a33fadc4..ebe2a464 100644 --- a/docs/src/components/experimental/marker-strategy/StrategyMarkerManagementComposable.astro +++ b/docs/src/components/experimental/marker-strategy/StrategyMarkerManagementComposable.astro @@ -24,7 +24,7 @@ fun StrategyMarkerManagement() { state = MarkerState( id = markerData.id, position = markerData.position, - icon = DefaultIcon(fillColor = markerData.color) + icon = ColorDefaultIcon(fillColor = markerData.color) ) ) diff --git a/docs/src/components/get-started/CircleExample.astro b/docs/src/components/get-started/CircleExample.astro index ce986844..759fc276 100644 --- a/docs/src/components/get-started/CircleExample.astro +++ b/docs/src/components/get-started/CircleExample.astro @@ -34,7 +34,7 @@ GoogleMapView( // ${commentMarker} Marker( position = GeoPoint.fromLatLong(${markerLat}, ${markerLong}), - icon = DefaultIcon(label = "${markerLabel}"), + icon = ColorDefaultIcon(label = "${markerLabel}"), extra = "tokyo_tower" ) diff --git a/docs/src/components/get-started/CompleteSample.astro b/docs/src/components/get-started/CompleteSample.astro index 91132e43..a72bfbf6 100644 --- a/docs/src/components/get-started/CompleteSample.astro +++ b/docs/src/components/get-started/CompleteSample.astro @@ -125,7 +125,7 @@ fun CompleteSample(modifier: Modifier = Modifier) { // ${commentMarkers} Marker( position = marker1, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "${marker1Label}", fillColor = Color.Red, ), @@ -135,7 +135,7 @@ fun CompleteSample(modifier: Modifier = Modifier) { Marker( position = marker2, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "${marker2Label}", fillColor = Color.Blue ), @@ -147,7 +147,7 @@ fun CompleteSample(modifier: Modifier = Modifier) { clickedPosition?.let { position -> Marker( position = position, - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "!", fillColor = Color.Green ), diff --git a/docs/src/components/get-started/InteractiveMap.astro b/docs/src/components/get-started/InteractiveMap.astro index cf6abc50..3a9805ef 100644 --- a/docs/src/components/get-started/InteractiveMap.astro +++ b/docs/src/components/get-started/InteractiveMap.astro @@ -49,7 +49,7 @@ fun InteractiveMap(modifier: Modifier = Modifier) { clickedPosition?.let { position -> Marker( position = position, - icon = DefaultIcon(label = "${clickLabelIcon}"), + icon = ColorDefaultIcon(label = "${clickLabelIcon}"), extra = "clicked_marker" ) } diff --git a/docs/src/components/get-started/MapWithCameraControl.astro b/docs/src/components/get-started/MapWithCameraControl.astro index 1ff8ae8e..8ef0d2c4 100644 --- a/docs/src/components/get-started/MapWithCameraControl.astro +++ b/docs/src/components/get-started/MapWithCameraControl.astro @@ -91,8 +91,8 @@ fun MapWithCameraControl(modifier: Modifier = Modifier) { modifier = Modifier.fillMaxSize(), state = mapViewState ) { - Marker(position = marker1, icon = DefaultIcon(label = "${marker1Label}")) - Marker(position = marker2, icon = DefaultIcon(label = "${marker2Label}")) + Marker(position = marker1, icon = ColorDefaultIcon(label = "${marker1Label}")) + Marker(position = marker2, icon = ColorDefaultIcon(label = "${marker2Label}")) } } }`; diff --git a/docs/src/components/get-started/MapWithMarkers.astro b/docs/src/components/get-started/MapWithMarkers.astro index 6faca652..a69be6a4 100644 --- a/docs/src/components/get-started/MapWithMarkers.astro +++ b/docs/src/components/get-started/MapWithMarkers.astro @@ -66,14 +66,14 @@ fun MapWithMarkers(modifier: Modifier = Modifier) { // ${commentAddMarkers} Marker( position = marker1, - icon = DefaultIcon(label = "${marker1Label}"), + icon = ColorDefaultIcon(label = "${marker1Label}"), extra = "marker1", onClick = onMarkerClick ) Marker( position = marker2, - icon = DefaultIcon(label = "${marker2Label}"), + icon = ColorDefaultIcon(label = "${marker2Label}"), extra = "marker2", onClick = onMarkerClick ) diff --git a/docs/src/components/get-started/MarkerClickInteraction.astro b/docs/src/components/get-started/MarkerClickInteraction.astro index 412799ca..d0a57efc 100644 --- a/docs/src/components/get-started/MarkerClickInteraction.astro +++ b/docs/src/components/get-started/MarkerClickInteraction.astro @@ -30,7 +30,7 @@ GoogleMapView( ) { Marker( position = marker1, - icon = DefaultIcon(label = "${marker1Label}"), + icon = ColorDefaultIcon(label = "${marker1Label}"), extra = "marker1", onClick = { markerState -> // ${commentMarkerClicked} @@ -39,7 +39,7 @@ GoogleMapView( ) Marker( position = marker2, - icon = DefaultIcon(label = "${marker2Label}"), + icon = ColorDefaultIcon(label = "${marker2Label}"), extra = "marker2", onClick = { markerState -> // ${commentMarkerClicked} diff --git a/docs/src/components/get-started/MarkerCustomization.astro b/docs/src/components/get-started/MarkerCustomization.astro index df5dd7f6..a96d1970 100644 --- a/docs/src/components/get-started/MarkerCustomization.astro +++ b/docs/src/components/get-started/MarkerCustomization.astro @@ -17,7 +17,7 @@ const { const code = `Marker( position = GeoPoint.fromLatLong(${lat}, ${long}), - icon = DefaultIcon( + icon = ColorDefaultIcon( label = "${label}", backgroundColor = Color.Red, textColor = Color.White diff --git a/docs/src/components/get-started/PolylineExample.astro b/docs/src/components/get-started/PolylineExample.astro index e0c00b0e..992ab72a 100644 --- a/docs/src/components/get-started/PolylineExample.astro +++ b/docs/src/components/get-started/PolylineExample.astro @@ -30,8 +30,8 @@ const code = `GoogleMapView( state = mapViewState ) { // ${commentMarker} - Marker(position = GeoPoint.fromLatLong(${marker1Lat}, ${marker1Long}), icon = DefaultIcon(label = "${marker1Label}")) - Marker(position = GeoPoint.fromLatLong(${marker2Lat}, ${marker2Long}), icon = DefaultIcon(label = "${marker2Label}")) + Marker(position = GeoPoint.fromLatLong(${marker1Lat}, ${marker1Long}), icon = ColorDefaultIcon(label = "${marker1Label}")) + Marker(position = GeoPoint.fromLatLong(${marker2Lat}, ${marker2Long}), icon = ColorDefaultIcon(label = "${marker2Label}")) // ${commentDrawLine} Polyline( diff --git a/docs/src/components/index/QuickExampleTabs.astro b/docs/src/components/index/QuickExampleTabs.astro index 8235436e..3214ae05 100644 --- a/docs/src/components/index/QuickExampleTabs.astro +++ b/docs/src/components/index/QuickExampleTabs.astro @@ -43,7 +43,7 @@ fun MyMap() { ) { Marker( position = targetPosition, - icon = DefaultIcon(label = "SF") + icon = ColorDefaultIcon(label = "SF") ) } }`; @@ -69,7 +69,7 @@ fun MyMap() { ) { Marker( position = targetPosition, - icon = DefaultIcon(label = "WA") + icon = ColorDefaultIcon(label = "WA") ) } }`; @@ -96,7 +96,7 @@ fun MyMap() { ) { Marker( position = targetPosition, - icon = DefaultIcon(label = "EIN") + icon = ColorDefaultIcon(label = "EIN") ) } }`; diff --git a/docs/src/components/introduction/BasicMapExample.astro b/docs/src/components/introduction/BasicMapExample.astro index 98f119cf..ef242852 100644 --- a/docs/src/components/introduction/BasicMapExample.astro +++ b/docs/src/components/introduction/BasicMapExample.astro @@ -53,7 +53,7 @@ fun BasicMapExample(modifier: Modifier = Modifier) { ${markerComment} Marker( position = sanFrancisco, - icon = DefaultIcon(label = "SF"), + icon = ColorDefaultIcon(label = "SF"), extra = "San Francisco marker", onClick = { markerState -> println("Marker clicked: \${markerState.extra}") diff --git a/docs/src/components/provider-compatibility/CompatibilityAwareMapExample.astro b/docs/src/components/provider-compatibility/CompatibilityAwareMapExample.astro index fca86b33..2033255c 100644 --- a/docs/src/components/provider-compatibility/CompatibilityAwareMapExample.astro +++ b/docs/src/components/provider-compatibility/CompatibilityAwareMapExample.astro @@ -29,7 +29,7 @@ fun CompatibilityAwareMap() { // ${alwaysSupportedComment} Marker( position = GeoPoint.fromLatLong(${lat}, ${long}), - icon = DefaultIcon() + icon = ColorDefaultIcon() ) Circle( diff --git a/docs/src/components/states/groundimage/DynamicBoundsExampleComposable.astro b/docs/src/components/states/groundimage/DynamicBoundsExampleComposable.astro index 2575723e..ef98e145 100644 --- a/docs/src/components/states/groundimage/DynamicBoundsExampleComposable.astro +++ b/docs/src/components/states/groundimage/DynamicBoundsExampleComposable.astro @@ -60,7 +60,7 @@ fun DynamicBoundsExample() { // ${commentForCornerMarkers} Marker( position = southwest, - icon = DefaultIcon(fillColor = Color.Green, label = "${southwestLabel}"), + icon = ColorDefaultIcon(fillColor = Color.Green, label = "${southwestLabel}"), draggable = true, extra = "${southwestLabel}", onDrag = onCornerMarkerDrag @@ -68,7 +68,7 @@ fun DynamicBoundsExample() { Marker( position = northeast, - icon = DefaultIcon(fillColor = Color.Red, label = "${northeastLabel}"), + icon = ColorDefaultIcon(fillColor = Color.Red, label = "${northeastLabel}"), draggable = true, extra = "${northeastLabel}", onDrag = onCornerMarkerDrag diff --git a/docs/src/components/states/marker/AnimatedMarkerExampleComposable.astro b/docs/src/components/states/marker/AnimatedMarkerExampleComposable.astro index f3b50245..62caa196 100644 --- a/docs/src/components/states/marker/AnimatedMarkerExampleComposable.astro +++ b/docs/src/components/states/marker/AnimatedMarkerExampleComposable.astro @@ -24,7 +24,7 @@ fun AnimatedMarkerExample() { mutableStateOf( MarkerState( position = startPosition, - icon = DefaultIcon(fillColor = Color.Green, label = "${markerLabel}"), + icon = ColorDefaultIcon(fillColor = Color.Green, label = "${markerLabel}"), extra = "${extraLabel}" ) ) diff --git a/docs/src/components/states/marker/DynamicMarkerExampleComposable.astro b/docs/src/components/states/marker/DynamicMarkerExampleComposable.astro index 4493e15b..34c6d088 100644 --- a/docs/src/components/states/marker/DynamicMarkerExampleComposable.astro +++ b/docs/src/components/states/marker/DynamicMarkerExampleComposable.astro @@ -34,7 +34,7 @@ fun DynamicMarkerExample() { mutableStateOf( MarkerState( position = GeoPoint.fromLatLong(${initialLatitude}, ${initialLongitude}), - icon = DefaultIcon(fillColor = Color.Red, label = "${initialLabel}"), + icon = ColorDefaultIcon(fillColor = Color.Red, label = "${initialLabel}"), extra = "${initialExtra}" ) ) @@ -47,7 +47,7 @@ fun DynamicMarkerExample() { onClick = { counter++ markerState = markerState.copy( - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = colors[counter % colors.size], label = counter.toString() ), diff --git a/docs/src/components/states/marker/MarkerStateAdvancedExamplesComposable.astro b/docs/src/components/states/marker/MarkerStateAdvancedExamplesComposable.astro index 3b1a33c5..f0e7111e 100644 --- a/docs/src/components/states/marker/MarkerStateAdvancedExamplesComposable.astro +++ b/docs/src/components/states/marker/MarkerStateAdvancedExamplesComposable.astro @@ -125,7 +125,7 @@ fun CustomIconMarkerExample() { listOf( MarkerState( position = GeoPoint.fromLatLong(${customMarkerLatitude}, ${customMarkerLongitude}), - icon = DefaultIcon( + icon = ColorDefaultIcon( scale = 1.5f, fillColor = Color.Red, strokeColor = Color.White, diff --git a/docs/src/components/states/marker/MarkerStateCustomExample.astro b/docs/src/components/states/marker/MarkerStateCustomExample.astro index da7a1cd2..204cb9a1 100644 --- a/docs/src/components/states/marker/MarkerStateCustomExample.astro +++ b/docs/src/components/states/marker/MarkerStateCustomExample.astro @@ -21,7 +21,7 @@ const { const code = `val customMarkerState = MarkerState( position = GeoPoint.fromLatLong(${latitude}, ${longitude}), - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Blue, label = "${markerLabel}", scale = 1.2f diff --git a/docs/src/components/states/polygon/EditablePolygonExampleComposable.astro b/docs/src/components/states/polygon/EditablePolygonExampleComposable.astro index 2a0326b6..29e788c4 100644 --- a/docs/src/components/states/polygon/EditablePolygonExampleComposable.astro +++ b/docs/src/components/states/polygon/EditablePolygonExampleComposable.astro @@ -54,7 +54,7 @@ fun EditablePolygonExample() { polygonState.points.dropLast(1).forEachIndexed { index, point -> Marker( position = point, - icon = DefaultIcon( + icon = ColorDefaultIcon( fillColor = Color.Red, label = "\${index + 1}", scale = 0.8f diff --git a/docs/src/config.ts b/docs/src/config.ts index 61f3fe63..cd00510f 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -1,23 +1,23 @@ -export const BOM_MODULE_VERSION = '1.1.3'; -export const CORE_MODULE_VERSION = '1.1.3'; -export const ARCGIS_MODULE_VERSION = '1.1.3'; -export const GOOGLEMAPS_MODULE_VERSION = '1.1.3'; -export const HERE_MODULE_VERSION = '1.1.3'; -export const MAPBOX_MODULE_VERSION = '1.1.3'; -export const MAPLIBRE_MODULE_VERSION = '1.1.3'; +export const BOM_MODULE_VERSION = '1.1.7'; +export const CORE_MODULE_VERSION = '1.1.7'; +export const ARCGIS_MODULE_VERSION = '1.1.7'; +export const GOOGLEMAPS_MODULE_VERSION = '1.1.7'; +export const HERE_MODULE_VERSION = '1.1.7'; +export const MAPBOX_MODULE_VERSION = '1.1.7'; +export const MAPLIBRE_MODULE_VERSION = '1.1.7'; export const ICON_MODULE_VERSION = '1.1.0'; export const MARKER_NATIVE_STRATEGY_MODULE_VERSION = '1.1.0'; export const MARKER_STRATEGY_MODULE_VERSION = '1.1.0'; -export const HEATMAP_MODULE_VERSION = '1.1.0'; -export const MARKER_CLUSTERING_MODULE_VERSION = '1.1.0'; -export const GOOGLE_MAPS_SDK_VERSION = '19.2.0'; -export const MAPBOX_SDK_VERSION = '11.14.3'; +export const HEATMAP_MODULE_VERSION = '1.0.0'; +export const MARKER_CLUSTERING_MODULE_VERSION = '1.0.0'; +export const GOOGLE_MAPS_SDK_VERSION = '20.0.0'; +export const MAPBOX_SDK_VERSION = '11.24.3'; export const HERE_EXPLORER_SDK_VERSION = '4.23.2.0.210004'; export const ARCGIS_SDK_VERSION = '200.7.0'; -export const MAPLBRE_SDK_VERSION = '12.0.0'; -export const KOTLIN_VERSION = '1.9.25'; +export const MAPLBRE_SDK_VERSION = '13.1.0'; +export const KOTLIN_VERSION = '2.4.0'; export const ANDROID_MIN_SDK_VERSION = '26'; -export const ANDROID_TARGET_SDK_VERSION = '35'; -export const JETPACK_COMPOSE_BOM_VERSION = '2025.05.00'; +export const ANDROID_TARGET_SDK_VERSION = '37'; +export const JETPACK_COMPOSE_BOM_VERSION = '2026.05.01'; export const JAVA_VERSION = '17'; export const SECRETS_GRADLE_PLUGIN_VERSION = "2.0.1"; diff --git a/docs/src/content/docs/components/infobubble.mdx b/docs/src/content/docs/components/infobubble.mdx index 3ce27070..a76699a0 100644 --- a/docs/src/content/docs/components/infobubble.mdx +++ b/docs/src/content/docs/components/infobubble.mdx @@ -4,13 +4,17 @@ head: - tag: meta attrs: name: description - content: Display custom info windows anchored to markers using InfoBubble in MapConductor Android SDK. + content: MapConductor Android SDK InfoBubble - how to display custom information windows attached to markers --- import SimpleInfoBubbleExample from '~/components/components/infobubble/SimpleInfoBubbleExample.astro'; import RichContentInfoBubbleExample from '~/components/components/infobubble/RichContentInfoBubbleExample.astro'; import InteractiveBubbleExample from '~/components/components/infobubble/InteractiveBubbleExample.astro'; import InfoBubbleSignature from '~/components/components/infobubble/InfoBubbleSignature.astro'; +import StandaloneInfoBubbleSignature from '~/components/components/infobubble/StandaloneInfoBubbleSignature.astro'; +import StandaloneInfoBubbleExample from '~/components/components/infobubble/StandaloneInfoBubbleExample.astro'; +import InfoBubbleCustomSignature from '~/components/components/infobubble/InfoBubbleCustomSignature.astro'; +import InfoBubbleCustomExample from '~/components/components/infobubble/InfoBubbleCustomExample.astro'; import MultipleBubblesExample from '~/components/components/infobubble/MultipleBubblesExample.astro'; import CustomPositioningExample from '~/components/components/infobubble/CustomPositioningExample.astro'; import LifecycleManagementExample from '~/components/components/infobubble/LifecycleManagementExample.astro'; @@ -23,25 +27,37 @@ import ImplementationTipsExample from '~/components/components/infobubble/Implem import DebugModeExample from '~/components/components/infobubble/DebugModeExample.astro'; import RightInfoBubbleMapExample from '~/components/components/infobubble/RightInfoBubbleMapExample.astro'; -InfoBubble is a component that displays custom content in a speech bubble attached to a marker on the map. It provides a way to show detailed information about markers without cluttering the map interface. +InfoBubble is a component that displays custom content in a callout-style bubble attached to a marker on the map. It provides a way to show detailed information about a marker. ## Overview -InfoBubble appears above a specific marker. Because the content inside InfoBubble is provided as a composable, you can design the bubble freely to match your app’s UI. +InfoBubble is displayed above a specific marker. Because the content shown inside an InfoBubble can be provided as a Composable, you can implement any design you need. -## Composable Function +## Composable Functions ## Parameters -- **`marker`**: The `MarkerState` to which the bubble is attached. -- **`bubbleColor`**: Background color of the bubble (default: White). -- **`borderColor`**: Border color of the bubble (default: Black). -- **`contentPadding`**: Internal padding around the content (default: 8dp). -- **`cornerRadius`**: Radius of the bubble's rounded corners (default: 4dp). -- **`tailSize`**: Size of the speech bubble tail pointing to the marker (default: 8dp). -- **`content`**: Composable content to display inside the bubble. +- **`marker`**: The `MarkerState` that the bubble is attached to +- **`bubbleColor`**: The bubble background color (default: White) +- **`borderColor`**: The bubble border color (default: Black) +- **`contentPadding`**: Inner padding around the content (default: 8dp) +- **`cornerRadius`**: The bubble corner radius (default: 4dp) +- **`tailSize`**: The size of the bubble tail that points to the marker (default: 8dp) +- **`content`**: Composable content to display inside the bubble + +## Marker-Free Placement + +`InfoBubble` can also be placed directly at any `GeoPoint` on the map without being tied to a `MarkerState`. When `position` changes, the bubble moves as well, and it follows map panning and zooming. + + + + ## Basic Usage @@ -81,6 +97,7 @@ InfoBubble appears above a specific marker. Because the content inside InfoBubbl markerId="coffee-shop-marker" zoomLevel={16.0} /> + -### Custom Designs -To implement a custom design, you can build your own InfoBubble-based component. The following video shows an example of a bubble with a tail on the right side. +### Custom Design + +To implement a custom design, you can create your own InfoBubble-derived component. The following is a detailed implementation example of a custom bubble with a tail on the right side. -## Positioning and Behavior -### Automatic Positioning +## Placement and Behavior -InfoBubble automatically handles its positioning: +### Automatic Placement -- The bubble tail points to the center of the marker. -- The bubble is kept visible within the map viewport as much as possible. -- When the map is panned or zoomed, the bubble follows the marker. +InfoBubble is automatically positioned above the associated marker: -### Custom Positioning +- The bubble tail points to the center of the marker +- The bubble adjusts its position to stay visible within the map viewport +- When the map is panned or zoomed, the bubble follows the marker -InfoBubble handles most positioning automatically, but you can influence the result by adjusting the marker icon’s anchor: +### Custom Placement + +InfoBubble handles placement automatically, but you can influence it through the marker icon anchor: @@ -163,13 +182,13 @@ InfoBubble automatically manages its lifecycle: -## Styling and Theming +## Styles and Themes ### Dark Mode Support -### Custom Themes +### Custom Theme @@ -183,21 +202,35 @@ InfoBubble automatically manages its lifecycle: +## InfoBubbleCustom + +With `InfoBubbleCustom`, you can freely draw the entire bubble, including its tail, as a Composable. `tailOffset` specifies which point inside the bubble is used as the connection point to the marker with `Offset(0f..1f, 0f..1f)`. + +- `Offset(1f, 0.5f)`: Use the right center as the connection point +- `Offset(0.5f, 1f)`: Use the bottom center as the connection point + + + + + ## Best Practices ### Design Guidelines -1. **Keep content concise**: InfoBubbles should provide essential information without overwhelming users. -2. **Use appropriate sizing**: Limit bubble width to maintain readability on mobile devices. -3. **Provide clear actions**: If you include buttons, make their purpose obvious. -4. **Consider touch targets**: Ensure interactive elements meet minimum touch target sizes. +1. **Concise content**: InfoBubble should provide essential information without overwhelming the user +2. **Appropriate size**: Limit the bubble width to maintain readability on mobile devices +3. **Clear actions**: If you include buttons, make their purpose clear +4. **Touch targets**: Make sure interactive elements meet the minimum touch target size ### User Experience -1. **Dismiss behavior**: Allow users to dismiss bubbles by tapping the map or marker. -2. **Loading states**: Show loading indicators for content that requires network requests. -3. **Error handling**: Gracefully handle missing or invalid data. -4. **Accessibility**: Provide content descriptions for screen readers. +1. **Dismissal behavior**: Let users close the bubble by tapping the map or a marker +2. **Loading states**: Show a loading indicator for content that requires network requests +3. **Error handling**: Handle missing or invalid data appropriately +4. **Accessibility**: Provide content descriptions for screen readers ### Implementation Tips @@ -207,7 +240,7 @@ InfoBubble automatically manages its lifecycle: ### Common Issues -1. **Bubble not appearing**: Verify the marker is properly configured and InfoBubble is inside `MapViewScope`. -2. **Bubble not dismissing**: Check that conditional rendering properly responds to state changes. -3. **Poor performance**: Limit the number of simultaneous bubbles and optimize content composition. -4. **Layout issues**: Use appropriate sizing constraints and test on different screen sizes. +1. **Bubble does not appear**: Make sure the marker is configured correctly and the InfoBubble is inside the MapViewScope +2. **Bubble does not close**: Check that conditional rendering responds correctly to state changes +3. **Poor performance**: Limit the number of bubbles displayed at the same time and optimize content composition +4. **Layout issues**: Use appropriate size constraints and test with different screen sizes diff --git a/docs/src/content/docs/components/marker.mdx b/docs/src/content/docs/components/marker.mdx index cb8a3f6f..2a4baf30 100644 --- a/docs/src/content/docs/components/marker.mdx +++ b/docs/src/content/docs/components/marker.mdx @@ -14,7 +14,7 @@ import BasicMarkerExample from '~/components/components/marker/BasicMarkerExampl import CustomIconMarkerExample from '~/components/components/marker/CustomIconMarkerExample.astro'; import DraggableMarkerExample from '~/components/components/marker/DraggableMarkerExample.astro'; import MultipleMarkersExample from '~/components/components/marker/MultipleMarkersExample.astro'; -import DefaultIconSignature from '~/components/components/marker/DefaultIconSignature.astro'; +import ColorDefaultIconSignature from '~/components/components/marker/ColorDefaultIconSignature.astro'; import DrawableDefaultIconSignature from '~/components/components/marker/DrawableDefaultIconSignature.astro'; import ImageIconSignature from '~/components/components/marker/ImageIconSignature.astro'; import MarkerAnimation from '~/components/components/marker/MarkerAnimation.astro'; @@ -63,7 +63,7 @@ For a large number of markers or when moving markers, using state is recommended Standard marker with customizable appearance: - + ### DrawableDefaultMarkerIcon diff --git a/docs/src/content/docs/core/mapcameraposition.mdx b/docs/src/content/docs/core/mapcameraposition.mdx index 25450ef9..7e12bb99 100644 --- a/docs/src/content/docs/core/mapcameraposition.mdx +++ b/docs/src/content/docs/core/mapcameraposition.mdx @@ -1,10 +1,10 @@ --- -title: MapCameraPositionInterface +title: MapCameraPositionInterface (Camera Position) head: - tag: meta attrs: name: description - content: MapCameraPosition — configure map center, zoom, tilt, and bearing in MapConductor Android SDK. + content: MapCameraPosition - how to set the map center, zoom, tilt, and bearing in MapConductor Android SDK --- import MapCameraPositionInterface from '~/components/core/mapcameraposition/MapCameraPositionInterface.astro'; @@ -14,6 +14,8 @@ import CustomCameraPositionsExample from '~/components/core/mapcameraposition/Cu import ZoomLevelsExample from '~/components/core/mapcameraposition/ZoomLevelsExample.astro'; import BearingExamples from '~/components/core/mapcameraposition/BearingExamples.astro'; import TiltExamples from '~/components/core/mapcameraposition/TiltExamples.astro'; +import NegativeTiltExample from '~/components/core/mapcameraposition/NegativeTiltExample.astro'; +import NegativeTiltSdkNote from '~/components/core/mapcameraposition/NegativeTiltSdkNote.astro'; import VisibleRegionDataClass from '~/components/core/mapcameraposition/VisibleRegionDataClass.astro'; import VisibleRegionExample from '~/components/core/mapcameraposition/VisibleRegionExample.astro'; import AnimatedCameraExample from '~/components/core/mapcameraposition/AnimatedCameraExample.astro'; @@ -22,7 +24,7 @@ import UserLocationCameraExample from '~/components/core/mapcameraposition/UserL import ShowMultiplePointsExample from '~/components/core/mapcameraposition/ShowMultiplePointsExample.astro'; import NavigationCameraExample from '~/components/core/mapcameraposition/NavigationCameraExample.astro'; -`MapCameraPositionInterface` represents the camera's viewing position, orientation, and visible area on the map. It defines where the camera is looking, how much of the map is visible, and the perspective from which the map is viewed. +`MapCameraPositionInterface` represents the camera's view position, orientation, and visible region on the map. It defines where the camera is looking, how much of the map is visible, and the viewpoint used to display the map. ## Interface and Implementation @@ -38,23 +40,23 @@ The main implementation provides immutable camera position data: ## Properties -### Camera Location +### Camera Position -- **`position: GeoPointInterface`**: Geographic center point of the camera's view -- **`zoom: Double`**: Zoom level (approximately follows Google Maps scale) -- **`bearing: Double`**: Compass direction in degrees (0 = North, 90 = East) -- **`tilt: Double`**: Camera tilt angle in degrees (0 = top-down, 90 = horizontal) +- **`position: GeoPointInterface`**: The geographic center point of the camera view +- **`zoom: Double`**: The zoom level (approximately follows the Google Maps scale) +- **`bearing: Double`**: The compass direction in degrees (0 = north, 90 = east) +- **`tilt: Double`**: The camera tilt angle in degrees (0 = straight down, 90 = horizontal) ### View Configuration - **`paddings: MapPaddingsInterface?`**: Viewport padding that affects the visible region -- **`visibleRegion: VisibleRegion?`**: `(Readonly)` The actual geographic bounds visible on screen. **Note: this property does not work in v{BOM_MODULE_VERSION} yet**. +- **`visibleRegion: VisibleRegion?`**: `(read-only)` The geographic bounds actually displayed on screen ## Creation Methods ### Default Position - + ### Custom Position @@ -72,9 +74,9 @@ The main implementation provides immutable camera position data: ## Zoom Levels -MapConductor zoom levels approximately follow Google Maps scale but may vary slightly between providers: +MapConductor zoom levels approximately follow the Google Maps scale, but they may vary slightly between map SDKs: -- **0-2**: World view, continents visible +- **0-2**: World view, continents are visible - **3-5**: Country level - **6-9**: State/region level - **10-12**: City level @@ -90,7 +92,7 @@ MapConductor zoom levels approximately follow Google Maps scale but may vary sli cityLatitude={37.7749} cityLongitude={-122.4194} cityZoom={12.0} - cityComment="Show entire city" + cityComment="Show the entire city" streetLatitude={37.7749} streetLongitude={-122.4194} streetZoom={17.0} @@ -109,15 +111,15 @@ Bearing rotates the map around the center point: bearingNorth={0.0} bearingEast={90.0} bearingRoute={135.0} - northUpComment="North-up (default)" - eastUpComment="East-up" - followingBearingComment="Following route bearing" + northUpComment="North up (default)" + eastUpComment="East up" + followingBearingComment="Follow the route bearing" routeComment="Southeast" /> -### Tilt (3D Perspective) +### Tilt (3D Viewpoint) -Tilt provides 3D viewing angles: +Tilt provides a 3D viewing angle: +#### Negative `tilt` Values - Looking Forward + +When `tilt` is set to a negative value, the camera uses an upward-looking elevation view above the horizon. Positive tilt is treated as a view looking down at the ground, while negative tilt is treated as a view looking forward in the `bearing` direction. + + + + + ## Visible Region -The visible region describes the actual geographic area shown on screen after considering camera position, zoom level, bearing, tilt, and viewport padding. +The visible region describes the actual geographic area displayed on screen after accounting for the camera position, zoom level, bearing, tilt, and viewport padding. ### VisibleRegion Class - - ### Properties -- **`bounds: GeoRectBounds`**: The rectangular geographic bounds that encompass the entire visible area. This is the minimum bounding rectangle that contains all visible content. -- **`nearLeft: GeoPointInterface?`**: The geographic coordinate of the bottom-left corner of the visible region. "Near" refers to the side closest to the camera position. -- **`nearRight: GeoPointInterface?`**: The geographic coordinate of the bottom-right corner of the visible region. -- **`farLeft: GeoPointInterface?`**: The geographic coordinate of the top-left corner of the visible region. "Far" refers to the side furthest from the camera position. -- **`farRight: GeoPointInterface?`**: The geographic coordinate of the top-right corner of the visible region. +- **`bounds: GeoRectBounds`**: Geographic bounds of the rectangle that contains the entire visible region. This is the smallest bounding rectangle that contains all visible content. +- **`nearLeft: GeoPointInterface?`**: Geographic coordinates of the lower-left corner of the visible region. "near" refers to the side closest to the camera position. +- **`nearRight: GeoPointInterface?`**: Geographic coordinates of the lower-right corner of the visible region. +- **`farLeft: GeoPointInterface?`**: Geographic coordinates of the upper-left corner of the visible region. "far" refers to the side farthest from the camera position. +- **`farRight: GeoPointInterface?`**: Geographic coordinates of the upper-right corner of the visible region. -### Using Visible Region +### Using VisibleRegion -## Animation and Transitions + + +## Animations and Transitions ### Smooth Camera Movement @@ -186,7 +196,9 @@ The visible region describes the actual geographic area shown on screen after co ### Interactive Camera Control - + -### Diseños Personalizados -Para implementar un diseño personalizado, puede crear su propio componente basado en InfoBubble. El siguiente código y video muestran un ejemplo de una burbuja con una cola en el lado derecho. +### Diseño personalizado + +Para implementar un diseño personalizado, puedes crear tu propio componente derivado de InfoBubble. El siguiente es un ejemplo de implementación detallado de una burbuja personalizada con una cola en el lado derecho. -## Posicionamiento y Comportamiento -### Posicionamiento Automático +## Ubicación y comportamiento -La InfoBubble se posiciona automáticamente encima de su marcador asociado: +### Ubicación automática + +InfoBubble se coloca automáticamente sobre el marcador asociado: - La cola de la burbuja apunta al centro del marcador -- La burbuja ajusta su posición para permanecer visible en el viewport del mapa -- La burbuja sigue al marcador mientras se realiza pan o zoom en el mapa +- La burbuja ajusta su posición para mantenerse visible dentro del viewport del mapa +- Cuando se panea o se aplica zoom al mapa, la burbuja sigue al marcador -### Posicionamiento Personalizado +### Ubicación personalizada -Aunque InfoBubble maneja el posicionamiento automáticamente, puede influir en él a través del ancla del icono del marcador: +InfoBubble maneja la ubicación automáticamente, pero puedes influir en ella mediante el anclaje del icono del marcador: -## Gestión del Ciclo de Vida +## Administración del ciclo de vida -La InfoBubble gestiona automáticamente su ciclo de vida: +InfoBubble administra automáticamente su ciclo de vida: -### Control Manual del Ciclo de Vida +### Control manual del ciclo de vida -## Estilo y Temas +## Estilos y temas -### Soporte de Modo Oscuro +### Compatibilidad con modo oscuro -### Tema Personalizado +### Tema personalizado -## Consideraciones de Rendimiento +## Consideraciones de rendimiento -### Actualizaciones Eficientes +### Actualizaciones eficientes -### Gestión de Memoria +### Administración de memoria -## Mejores Prácticas +## InfoBubbleCustom + +Con `InfoBubbleCustom`, puedes dibujar libremente toda la burbuja, incluida su cola, como un Composable. `tailOffset` especifica qué punto dentro de la burbuja se usa como punto de conexión con el marcador mediante `Offset(0f..1f, 0f..1f)`. + +- `Offset(1f, 0.5f)`: Usar el centro derecho como punto de conexión +- `Offset(0.5f, 1f)`: Usar el centro inferior como punto de conexión + + + + + +## Mejores prácticas -### Directrices de Diseño +### Guías de diseño -1. **Contenido Conciso**: La InfoBubble debe proporcionar información esencial sin abrumar al usuario -2. **Tamaño Apropiado**: Limitar el ancho de la burbuja para mantener la legibilidad en dispositivos móviles -3. **Acciones Claras**: Si se incluyen botones, aclarar su propósito -4. **Objetivos táctiles**: Asegurar que los elementos interactivos cumplan con los tamaños mínimos de objetivo táctil +1. **Contenido conciso**: InfoBubble debe proporcionar información esencial sin abrumar al usuario +2. **Tamaño adecuado**: Limita el ancho de la burbuja para mantener la legibilidad en dispositivos móviles +3. **Acciones claras**: Si incluyes botones, deja claro su propósito +4. **Objetivos táctiles**: Asegúrate de que los elementos interactivos cumplan con el tamaño mínimo de objetivo táctil -### Experiencia del Usuario +### Experiencia de usuario -1. **Comportamiento de Cierre**: Permitir que los usuarios cierren la burbuja tocando el mapa o marcadores -2. **Estado de Carga**: Mostrar un indicador de carga para contenido que requiere solicitudes de red -3. **Manejo de Errores**: Manejar datos faltantes o inválidos apropiadamente -4. **Accesibilidad**: Proporcionar descripciones de contenido para lectores de pantalla +1. **Comportamiento de cierre**: Permite que los usuarios cierren la burbuja tocando el mapa o un marcador +2. **Estados de carga**: Muestra un indicador de carga para el contenido que requiere solicitudes de red +3. **Manejo de errores**: Maneja adecuadamente los datos faltantes o no válidos +4. **Accesibilidad**: Proporciona descripciones del contenido para lectores de pantalla -### Consejos de Implementación +### Consejos de implementación -## Solución de Problemas +## Solución de problemas -### Problemas Comunes +### Problemas comunes -1. **La burbuja no aparece**: Verificar que el marcador esté configurado correctamente y que la InfoBubble esté dentro de un MapViewScope -2. **La burbuja no se cierra**: Verificar que el renderizado condicional responda adecuadamente a los cambios de estado -3. **Degradación del rendimiento**: Limitar el número de burbujas mostradas simultáneamente y optimizar la composición del contenido -4. **Problemas de diseño**: Usar restricciones de tamaño apropiadas y probar en diversos tamaños de pantalla +1. **La burbuja no aparece**: Asegúrate de que el marcador esté configurado correctamente y de que InfoBubble esté dentro de MapViewScope +2. **La burbuja no se cierra**: Verifica que el renderizado condicional responda correctamente a los cambios de estado +3. **Bajo rendimiento**: Limita la cantidad de burbujas que se muestran al mismo tiempo y optimiza la composición del contenido +4. **Problemas de layout**: Usa restricciones de tamaño adecuadas y prueba con distintos tamaños de pantalla diff --git a/docs/src/content/docs/es-419/components/marker.mdx b/docs/src/content/docs/es-419/components/marker.mdx index eb553f6e..a253f865 100644 --- a/docs/src/content/docs/es-419/components/marker.mdx +++ b/docs/src/content/docs/es-419/components/marker.mdx @@ -15,7 +15,7 @@ import CustomIconMarkerExample from '~/components/components/marker/CustomIconMa import DraggableMarkerExample from '~/components/components/marker/DraggableMarkerExample.astro'; import DraggableMarkerWithStateExample from '~/components/components/marker/DraggableMarkerWithStateExample.astro'; import MultipleMarkersExample from '~/components/components/marker/MultipleMarkersExample.astro'; -import DefaultIconSignature from '~/components/components/marker/DefaultIconSignature.astro'; +import ColorDefaultIconSignature from '~/components/components/marker/ColorDefaultIconSignature.astro'; import DrawableDefaultIconSignature from '~/components/components/marker/DrawableDefaultIconSignature.astro'; import ImageIconSignature from '~/components/components/marker/ImageIconSignature.astro'; import MarkerAnimation from '~/components/components/marker/MarkerAnimation.astro'; @@ -67,7 +67,7 @@ Especificar `id` puede reducir Recomposiciones innecesarias. Icono de marcador estándar con apariencia personalizable: - + ### DrawableDefaultIcon diff --git a/docs/src/content/docs/es-419/core/mapcameraposition.mdx b/docs/src/content/docs/es-419/core/mapcameraposition.mdx index 7d203e52..12c0586a 100644 --- a/docs/src/content/docs/es-419/core/mapcameraposition.mdx +++ b/docs/src/content/docs/es-419/core/mapcameraposition.mdx @@ -1,10 +1,10 @@ --- -title: MapCameraPositionInterface +title: MapCameraPositionInterface (posición de cámara) head: - tag: meta attrs: name: description - content: MapCameraPosition — configura centro, zoom, inclinación y orientación del mapa en MapConductor Android SDK. + content: MapCameraPosition - cómo configurar el centro, zoom, inclinación y orientación del mapa en MapConductor Android SDK --- import MapCameraPositionInterface from '~/components/core/mapcameraposition/MapCameraPositionInterface.astro'; @@ -14,6 +14,8 @@ import CustomCameraPositionsExample from '~/components/core/mapcameraposition/Cu import ZoomLevelsExample from '~/components/core/mapcameraposition/ZoomLevelsExample.astro'; import BearingExamples from '~/components/core/mapcameraposition/BearingExamples.astro'; import TiltExamples from '~/components/core/mapcameraposition/TiltExamples.astro'; +import NegativeTiltExample from '~/components/core/mapcameraposition/NegativeTiltExample.astro'; +import NegativeTiltSdkNote from '~/components/core/mapcameraposition/NegativeTiltSdkNote.astro'; import VisibleRegionDataClass from '~/components/core/mapcameraposition/VisibleRegionDataClass.astro'; import VisibleRegionExample from '~/components/core/mapcameraposition/VisibleRegionExample.astro'; import AnimatedCameraExample from '~/components/core/mapcameraposition/AnimatedCameraExample.astro'; @@ -22,7 +24,7 @@ import UserLocationCameraExample from '~/components/core/mapcameraposition/UserL import ShowMultiplePointsExample from '~/components/core/mapcameraposition/ShowMultiplePointsExample.astro'; import NavigationCameraExample from '~/components/core/mapcameraposition/NavigationCameraExample.astro'; -`MapCameraPositionInterface` representa la posición, orientación y área visible de la cámara en el mapa. Define hacia dónde mira la cámara, cuánto mapa se ve y desde qué perspectiva. +`MapCameraPositionInterface` representa la posición de vista de la cámara, su orientación y la región visible en el mapa. Define hacia dónde mira la cámara, qué parte del mapa se muestra y el punto de vista usado para mostrar el mapa. ## Interfaz e implementación @@ -32,36 +34,36 @@ import NavigationCameraExample from '~/components/core/mapcameraposition/Navigat ### MapCameraPosition -La implementación principal proporciona datos inmutables de la posición de la cámara: +La implementación principal proporciona datos inmutables de posición de cámara: ## Propiedades -### Posición de la cámara +### Posición de cámara -- **`position: GeoPointInterface`**: Punto geográfico central de la vista de la cámara. -- **`zoom: Double`**: Nivel de zoom (aproximadamente alineado con la escala de Google Maps). -- **`bearing: Double`**: Rumbo en grados (0 = norte, 90 = este). -- **`tilt: Double`**: Ángulo de inclinación en grados (0 = vista cenital, 90 = horizontal). +- **`position: GeoPointInterface`**: El punto central geográfico de la vista de la cámara +- **`zoom: Double`**: El nivel de zoom (sigue aproximadamente la escala de Google Maps) +- **`bearing: Double`**: La orientación de brújula en grados (0 = norte, 90 = este) +- **`tilt: Double`**: El ángulo de inclinación de la cámara en grados (0 = vista vertical hacia abajo, 90 = horizontal) -### Configuración de la vista +### Configuración de vista -- **`paddings: MapPaddingsInterface?`**: Márgenes del viewport que afectan a la región visible. **Nota: esta propiedad aún no funciona en v{BOM_MODULE_VERSION}**. -- **`visibleRegion: VisibleRegion?`**: `(Solo lectura)` Límites geográficos que realmente se ven en pantalla. +- **`paddings: MapPaddingsInterface?`**: Padding del viewport que afecta la región visible +- **`visibleRegion: VisibleRegion?`**: `(solo lectura)` Los límites geográficos que realmente se muestran en pantalla -## Formas de creación +## Métodos de creación -### Posición por defecto +### Posición predeterminada - + ### Posición personalizada -## Rumbo e inclinación +## Orientación e inclinación -### Rumbo (rotación) +### Orientación (rotación) -El rumbo rota el mapa alrededor del punto central: +La orientación rota el mapa alrededor del punto central: -### Inclinación (perspectiva 3D) +### Inclinación (vista 3D) -La inclinación proporciona ángulos de vista en 3D: +La inclinación proporciona un ángulo de visualización 3D: +#### Valores negativos de `tilt` - mirar hacia adelante + +Cuando `tilt` se establece en un valor negativo, la cámara usa una vista elevada que mira hacia arriba por encima del horizonte. Un tilt positivo se trata como una vista que mira hacia abajo al suelo, mientras que un tilt negativo se trata como una vista que mira hacia adelante en la dirección de `bearing`. + + + + + ## Región visible -La región visible describe el área geográfica real mostrada en pantalla teniendo en cuenta la posición de la cámara, el nivel de zoom, el rumbo, la inclinación y los márgenes del viewport. +La región visible describe el área geográfica real que se muestra en pantalla después de considerar la posición de cámara, el nivel de zoom, la orientación, la inclinación y el padding del viewport. ### Clase VisibleRegion ### Propiedades -- **`bounds: GeoRectBounds`**: Límites geográficos rectangulares que abarcan toda el área visible. -- **`nearLeft: GeoPointInterface?`**: Coordenada geográfica de la esquina inferior izquierda de la región visible. -- **`nearRight: GeoPointInterface?`**: Coordenada geográfica de la esquina inferior derecha. -- **`farLeft: GeoPointInterface?`**: Coordenada geográfica de la esquina superior izquierda. -- **`farRight: GeoPointInterface?`**: Coordenada geográfica de la esquina superior derecha. +- **`bounds: GeoRectBounds`**: Límites geográficos del rectángulo que contiene toda la región visible. Este es el rectángulo delimitador más pequeño que contiene todo el contenido visible. +- **`nearLeft: GeoPointInterface?`**: Coordenadas geográficas de la esquina inferior izquierda de la región visible. "near" se refiere al lado más cercano a la posición de la cámara. +- **`nearRight: GeoPointInterface?`**: Coordenadas geográficas de la esquina inferior derecha de la región visible. +- **`farLeft: GeoPointInterface?`**: Coordenadas geográficas de la esquina superior izquierda de la región visible. "far" se refiere al lado más lejano a la posición de la cámara. +- **`farRight: GeoPointInterface?`**: Coordenadas geográficas de la esquina superior derecha de la región visible. -### Uso de la región visible +### Uso de VisibleRegion -## Animación y transiciones +## Animaciones y transiciones ### Movimiento suave de cámara +