Merge pull request #37 from Rallista/feat/symbol-offset

Rallista · Aug 7, 2024 · 74f9755 · 74f9755
2 parents c4277e8 + 3a3b08d
commit 74f9755
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git a/app/src/main/java/com/maplibre/example/examples/SymbolExample.kt b/app/src/main/java/com/maplibre/example/examples/SymbolExample.kt
@@ -12,9 +12,11 @@ import com.mapbox.mapboxsdk.style.layers.Property.TEXT_ANCHOR_BOTTOM_RIGHT
 import com.maplibre.compose.MapView
 import com.maplibre.compose.camera.MapViewCamera
 import com.maplibre.compose.rememberSaveableMapViewCamera
+import com.maplibre.compose.symbols.Circle
 import com.maplibre.compose.symbols.CircleWithItem
 import com.maplibre.compose.symbols.Symbol
 import com.maplibre.compose.symbols.builder.SymbolText
+import com.maplibre.compose.symbols.models.SymbolOffset
 import com.maplibre.example.R
 
 @Composable
@@ -40,10 +42,12 @@ fun SymbolExample() {
                 onTap = { Log.d("SymbolExample", "Tapped red star") },
                 onLongPress = { Log.d("SymbolExample", "Long pressed red star") })
 
+            Circle(center = LatLng(1.253, 104.019), radius = 2f, color = "Blue")
+
             Symbol(
                 center = LatLng(1.253, 104.019),
                 imageId = R.drawable.vector,
-                imageRotation = 40f,
+                imageOffset = SymbolOffset(-20f, 20f),
                 onTap = { Log.d("SymbolExample", "Tapped blue star") },
                 onLongPress = { Log.d("SymbolExample", "Long pressed blue star") })
 

diff --git a/compose/src/main/java/com/maplibre/compose/symbols/CircleWithItem.kt b/compose/src/main/java/com/maplibre/compose/symbols/CircleWithItem.kt
@@ -14,8 +14,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import com.mapbox.mapboxsdk.geometry.LatLng
-import com.mapbox.mapboxsdk.plugins.annotation.Symbol
+import com.mapbox.mapboxsdk.style.layers.Property.ICON_ANCHOR_CENTER
 import com.maplibre.compose.symbols.builder.SymbolText
+import com.maplibre.compose.symbols.models.SymbolOffset
 
 @Composable
 fun UpdateCenter(coord: LatLng, centerUpdated: (LatLng) -> Unit) {
@@ -34,6 +35,9 @@ fun CircleWithItem(
     opacity: Float = 1.0f,
     zIndex: Int = 0,
     imageId: Int? = null,
+    imageRotation: Float? = null,
+    imageAnchor: String = ICON_ANCHOR_CENTER,
+    imageOffset: SymbolOffset = SymbolOffset(),
     itemSize: Float = 0.0f,
     text: SymbolText? = null,
     onCenterChanged: (LatLng) -> Unit = {},
@@ -80,6 +84,9 @@ fun CircleWithItem(
         color = "Black",
         isDraggable = false,
         imageId = imageId,
+        imageRotation = imageRotation,
+        imageAnchor = imageAnchor,
+        imageOffset = imageOffset,
         size = itemSize,
         zIndex = zIndex + 1,
     )

diff --git a/compose/src/main/java/com/maplibre/compose/symbols/Symbol.kt b/compose/src/main/java/com/maplibre/compose/symbols/Symbol.kt
@@ -20,10 +20,13 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.imageResource
 import com.mapbox.mapboxsdk.geometry.LatLng
 import com.mapbox.mapboxsdk.plugins.annotation.SymbolOptions
+import com.mapbox.mapboxsdk.style.layers.Property.ICON_ANCHOR_CENTER
 import com.maplibre.compose.ramani.MapApplier
 import com.maplibre.compose.ramani.MapLibreComposable
 import com.maplibre.compose.ramani.SymbolNode
 import com.maplibre.compose.symbols.builder.SymbolText
+import com.maplibre.compose.symbols.models.SymbolOffset
+import com.maplibre.compose.symbols.models.toMaplibreOffset
 
 @Composable
 @MapLibreComposable
@@ -35,6 +38,8 @@ fun Symbol(
     zIndex: Int = 0,
     imageId: Int? = null,
     imageRotation: Float? = null,
+    imageAnchor: String = ICON_ANCHOR_CENTER,
+    imageOffset: SymbolOffset = SymbolOffset(),
     text: SymbolText? = null,
     onTap: () -> Unit = {},
     onLongPress: () -> Unit = {}
@@ -65,6 +70,8 @@ fun Symbol(
                   .withIconColor(color)
                   .withIconSize(size)
                   .withIconRotate(imageRotation)
+                  .withIconAnchor(imageAnchor)
+                  .withIconOffset(imageOffset.toMaplibreOffset())
         }
 
         text?.let {
@@ -75,6 +82,7 @@ fun Symbol(
                   .withTextSize(text.size)
                   .withTextJustify(text.justify)
                   .withTextAnchor(text.anchor)
+                  .withTextOffset(text.offset.toMaplibreOffset())
         }
 
         val symbol = symbolManager.create(symbolOptions)

diff --git a/compose/src/main/java/com/maplibre/compose/symbols/builder/SymbolText.kt b/compose/src/main/java/com/maplibre/compose/symbols/builder/SymbolText.kt
@@ -2,20 +2,23 @@ package com.maplibre.compose.symbols.builder
 
 import com.mapbox.mapboxsdk.style.layers.Property.TEXT_ANCHOR_CENTER
 import com.mapbox.mapboxsdk.style.layers.Property.TEXT_JUSTIFY_AUTO
+import com.maplibre.compose.symbols.models.SymbolOffset
 
 data class SymbolText(
     var text: String,
     var size: Float?,
     var color: String = "Black",
     var justify: String = TEXT_JUSTIFY_AUTO,
     var anchor: String = TEXT_ANCHOR_CENTER,
+    var offset: SymbolOffset = SymbolOffset()
 ) {
   class Builder {
     private var text: String = ""
     private var size: Float? = null
     private var color: String = "Black"
     private var justify: String = TEXT_JUSTIFY_AUTO
     private var anchor: String = TEXT_ANCHOR_CENTER
+    private var offset: SymbolOffset = SymbolOffset()
 
     fun text(text: String) = apply { this.text = text }
 
@@ -27,6 +30,8 @@ data class SymbolText(
 
     fun textAnchor(anchor: String) = apply { this.anchor = anchor }
 
+    fun textOffset(offset: SymbolOffset) = apply { this.offset = offset }
+
     fun build() =
         SymbolText(text = text, size = size, color = color, justify = justify, anchor = anchor)
   }

diff --git a/compose/src/main/java/com/maplibre/compose/symbols/models/SymbolOffset.kt b/compose/src/main/java/com/maplibre/compose/symbols/models/SymbolOffset.kt
@@ -0,0 +1,13 @@
+package com.maplibre.compose.symbols.models
+
+/**
+ * The offset of a symbol.
+ *
+ * @param x The x offset. Positive values indicate right, while negative values indicate left.
+ * @param y The y offset. Positive values indicate up, while negative values indicate down.
+ */
+data class SymbolOffset(val x: Float = 0.0f, val y: Float = 0.0f)
+
+internal fun SymbolOffset.toMaplibreOffset(): Array<Float> {
+  return arrayOf(x, y)
+}