RD-1146: Add MTLineLayer Bridge (#55)

Author: sasaprodribaba

.github/copilot-instructions.md

@@ -300,6 +300,7 @@ MUST wait for `ON_READY` before mutating style or layers. Changing the reference
 - Commands (MUST run):
   - `./gradlew ktlintFormat`
   - `./gradlew ktlintCheck`
+  - `./gradlew test`
 - Add or update unit tests as required (encoding, clamping, `toJS()` contract), but leave full execution to the user/CI.
 - Prefer small, focused tests near the code you change; avoid introducing unrelated tests.
 

Examples/MapTilerMobileDemo/.idea/deploymentTargetSelector.xml

@@ -34,6 +34,7 @@ import com.maptiler.maptilersdk.map.style.MTMapReferenceStyle
 import com.maptiler.maptilersdk.map.style.MTStyleError
 import com.maptiler.maptilersdk.map.style.layer.MTLayerType
 import com.maptiler.maptilersdk.map.style.layer.fill.MTFillLayer
+import com.maptiler.maptilersdk.map.style.layer.line.MTLineLayer
 import com.maptiler.maptilersdk.map.style.layer.symbol.MTSymbolLayer
 import com.maptiler.maptilersdk.map.style.source.MTVectorTileSource
 import com.maptiler.maptilersdk.map.types.MTData
@@ -85,6 +86,15 @@ fun HomeScreen(
                     } catch (error: MTStyleError) {
                         Log.e("MTStyleError", "Fill Layer already exists.")
                     }
+                } else if (type == MTLayerType.LINE) {
+                    try {
+                        val layer = MTLineLayer("lineLayer", "openmapsource")
+                        layer.color = Color.BLUE
+                        layer.sourceLayer = "water"
+                        mapController.controller.style?.addLayer(layer)
+                    } catch (error: MTStyleError) {
+                        Log.e("MTStyleError", "Line Layer already exists.")
+                    }
                 }
             },
             modifier =

Examples/MapTilerMobileDemo/app/src/main/java/com/maptilerdemo/maptilermobiledemo/HomeScreen.kt

@@ -64,10 +64,16 @@ fun LayerControl(
                     text = { Text("Symbol") },
                     onClick = { onSelect(MTLayerType.SYMBOL) },
                 )
+
                 DropdownMenuItem(
                     text = { Text("Fill") },
                     onClick = { onSelect(MTLayerType.FILL) },
                 )
+
+                DropdownMenuItem(
+                    text = { Text("Line") },
+                    onClick = { onSelect(MTLayerType.LINE) },
+                )
             }
         }
     }

Examples/MapTilerMobileDemo/app/src/main/java/com/maptilerdemo/maptilermobiledemo/LayerControl.kt

@@ -49,8 +49,8 @@ object MTConfig {
      * Boolean indicating whether telemetry is enabled.
      *
      * The telemetry is very valuable to the team at MapTiler because it shares information about
-     * where to add the extra effort. It also helps spotting some incompatibility issues that may
-     * arise between the SDK and a specific version of a module. It consist in sending the SDK version,
+     * where to add extra effort. It also helps spot some incompatibility issues that may
+     * arise between the SDK and a specific version of a module. It consists of sending the SDK version,
      * API Key, MapTiler session ID, if tile caching is enabled, if language specified at initialization,
      * if terrain is activated at initialization, if globe projection is activated at initialization.
      * Defaults to true.

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/MTConfig.kt

@@ -11,7 +11,7 @@ package com.maptiler.maptilersdk
  */
 enum class MTUnit {
     /**
-     * Imperical units.
+     * Imperial units.
      */
     IMPERIAL,
 

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/MTUnit.kt

@@ -64,23 +64,31 @@ internal data class AddMarker(
             }
 
         if (marker.icon != null) {
+            val encoded = ImageHelper.encodeImageWithMime(marker.icon!!)
             iconInit = """
             var icon${marker.identifier} = new Image();
-            icon${marker.identifier}.src = 'data:image/png;base64,${ImageHelper.encodeImage(marker.icon!!)}';
+            icon${marker.identifier}.src = 'data:${encoded.mimeType};base64,${encoded.base64}';
         """
 
             iconData = "element: icon${marker.identifier}"
         }
 
+        val markerOptions =
+            buildString {
+                append("color: '$color'")
+                append(",\n                draggable: $draggable")
+                if (iconData.isNotBlank()) {
+                    append(",\n                $iconData")
+                }
+            }
+
         return """
             $popupAttachment
             
             $iconInit
             
             const ${marker.identifier} = new maptilersdk.Marker({
-                color: '$color',
-                draggable: $draggable,
-                $iconData
+                $markerOptions
             });
             
             $popupString

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/commands/annotations/AddMarker.kt

@@ -11,14 +11,22 @@ import com.maptiler.maptilersdk.bridge.MTBridge
 import com.maptiler.maptilersdk.bridge.MTCommand
 import com.maptiler.maptilersdk.helpers.JsonConfig
 import com.maptiler.maptilersdk.map.types.MTPoint
+import kotlinx.serialization.json.Json
 
 internal data class PanBy(
     val offset: MTPoint,
 ) : MTCommand {
     override val isPrimitiveReturnType: Boolean = false
 
     override fun toJS(): String {
-        val offsetString: JSString = JsonConfig.json.encodeToString(offset)
+        // Pretty-printed JSON to match expected JS contract in tests
+        val prettyJson =
+            Json {
+                prettyPrint = true
+                encodeDefaults = JsonConfig.json.configuration.encodeDefaults
+                explicitNulls = JsonConfig.json.configuration.explicitNulls
+            }
+        val offsetString: JSString = prettyJson.encodeToString(offset)
 
         return "${MTBridge.MAP_OBJECT}.panBy($offsetString);"
     }

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/commands/navigation/PanBy.kt

@@ -11,14 +11,22 @@ import com.maptiler.maptilersdk.bridge.MTBridge
 import com.maptiler.maptilersdk.bridge.MTCommand
 import com.maptiler.maptilersdk.helpers.JsonConfig
 import com.maptiler.maptilersdk.map.LngLat
+import kotlinx.serialization.json.Json
 
 internal data class PanTo(
     val coordinates: LngLat,
 ) : MTCommand {
     override val isPrimitiveReturnType: Boolean = false
 
     override fun toJS(): String {
-        val coordinatesString: JSString = JsonConfig.json.encodeToString(coordinates)
+        // Pretty-printed JSON to match expected JS contract in tests
+        val prettyJson =
+            Json {
+                prettyPrint = true
+                encodeDefaults = JsonConfig.json.configuration.encodeDefaults
+                explicitNulls = JsonConfig.json.configuration.explicitNulls
+            }
+        val coordinatesString: JSString = prettyJson.encodeToString(coordinates)
 
         return "${MTBridge.MAP_OBJECT}.panTo($coordinatesString);"
     }

MapTilerSDK/src/main/java/com/maptiler/maptilersdk/commands/navigation/PanTo.kt

@@ -13,6 +13,7 @@ import com.maptiler.maptilersdk.helpers.ImageHelper
 import com.maptiler.maptilersdk.helpers.JsonConfig
 import com.maptiler.maptilersdk.map.style.layer.MTLayer
 import com.maptiler.maptilersdk.map.style.layer.fill.MTFillLayer
+import com.maptiler.maptilersdk.map.style.layer.line.MTLineLayer
 import com.maptiler.maptilersdk.map.style.layer.symbol.MTSymbolLayer
 
 internal data class AddLayer(
@@ -25,19 +26,23 @@ internal data class AddLayer(
             handleSymbolLayer(layer)
         } else if (layer is MTFillLayer) {
             handleFillLayer(layer)
+        } else if (layer is MTLineLayer) {
+            handleLineLayer(layer)
         } else {
-            ""
+            // Fallback to a generic addLayer for any future-supported layer types
+            val layerString: JSString = JsonConfig.json.encodeToString(layer)
+            "${MTBridge.MAP_OBJECT}.addLayer($layerString);"
         }
 
     private fun handleSymbolLayer(layer: MTSymbolLayer): JSString {
         val layerString: JSString = JsonConfig.json.encodeToString(layer)
 
         if (layer.icon != null) {
-            val encodedImageString = ImageHelper.encodeImage(layer.icon!!)
+            val encoded = ImageHelper.encodeImageWithMime(layer.icon!!)
 
             val iconString = """
             var icon${layer.identifier} = new Image();
-                icon${layer.identifier}.src = 'data:image/png;base64,$encodedImageString';
+                icon${layer.identifier}.src = 'data:${encoded.mimeType};base64,${encoded.base64}';
                 icon${layer.identifier}.onload = function() {
                     map.addImage('icon${layer.identifier}', icon${layer.identifier})
         """
@@ -50,13 +55,20 @@ internal data class AddLayer(
                 
                 """.trimIndent()
         } else {
-            return ""
+            // No icon to register; add the layer directly
+            return "${MTBridge.MAP_OBJECT}.addLayer($layerString);"
         }
     }
 
     private fun handleFillLayer(layer: MTFillLayer): JSString {
         val layerString: JSString = JsonConfig.json.encodeToString(layer)
 
-        return "${MTBridge.MAP_OBJECT}.addLayer($layerString)"
+        return "${MTBridge.MAP_OBJECT}.addLayer($layerString);"
+    }
+
+    private fun handleLineLayer(layer: MTLineLayer): JSString {
+        val layerString: JSString = JsonConfig.json.encodeToString(layer)
+
+        return "${MTBridge.MAP_OBJECT}.addLayer($layerString);"
     }
 }