feat(map): chip markers, node info sheet, zoom buttons, and pulse animation

- Chip-style node markers displaying short names via SymbolLayer
- Node info bottom sheet on marker tap with details
- Pulse-on-heard ripple animation for recently active nodes
- Zoom in/out buttons overlay

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: jamesarich

core/resources/src/commonMain/composeResources/drawable/ic_remove.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:fillColor="#FFFFFFFF"
+      android:pathData="M240,520Q223,520 211.5,508.5Q200,497 200,480Q200,463 211.5,451.5Q223,440 240,440L720,440Q737,440 748.5,451.5Q760,463 760,480Q760,497 748.5,508.5Q737,520 720,520L240,520Z"/>
+</vector>

core/resources/src/commonMain/composeResources/values/strings.xml

@@ -835,6 +835,9 @@
     <string name="owm_api_key_hint">OpenWeatherMap API Key (global)</string>
     <string name="owm_info_title">Global Weather Radar</string>
     <string name="owm_info_message">Without an API key, weather radar shows US-only NOAA NEXRAD data.\n\nFor global coverage, enter a free OpenWeatherMap API key. Sign up at openweathermap.org/api — the free tier includes 1,000 tile requests per day.</string>
+    <string name="zoom_in">Zoom in</string>
+    <string name="zoom_out">Zoom out</string>
+    <string name="view_details">View Details</string>
     <string name="client_notification">Client Notification</string>
     <string name="key_verification_title">Key Verification</string>
     <string name="key_verification_request_title">Key Verification Request</string>

core/ui/src/commonMain/kotlin/org/meshtastic/core/ui/icon/Actions.kt

@@ -46,6 +46,7 @@ import org.meshtastic.core.resources.ic_qr_code
 import org.meshtastic.core.resources.ic_qr_code_2
 import org.meshtastic.core.resources.ic_qr_code_scanner
 import org.meshtastic.core.resources.ic_refresh
+import org.meshtastic.core.resources.ic_remove
 import org.meshtastic.core.resources.ic_reply
 import org.meshtastic.core.resources.ic_restart_alt
 import org.meshtastic.core.resources.ic_restore
@@ -63,6 +64,8 @@ val MeshtasticIcons.Add: ImageVector
     @Composable get() = vectorResource(Res.drawable.ic_add)
 val MeshtasticIcons.AddReaction: ImageVector
     @Composable get() = vectorResource(Res.drawable.ic_add_reaction)
+val MeshtasticIcons.Remove: ImageVector
+    @Composable get() = vectorResource(Res.drawable.ic_remove)
 val MeshtasticIcons.Close: ImageVector
     @Composable get() = vectorResource(Res.drawable.ic_close)
 val MeshtasticIcons.Copy: ImageVector

feature/map/src/commonMain/kotlin/org/meshtastic/feature/map/MapScreen.kt

@@ -54,6 +54,8 @@ import org.meshtastic.feature.map.component.MapControlsOverlay
 import org.meshtastic.feature.map.component.MapFilterDropdown
 import org.meshtastic.feature.map.component.MapStyleSelector
 import org.meshtastic.feature.map.component.MaplibreMapContent
+import org.meshtastic.feature.map.component.NodeInfoSheet
+import org.meshtastic.feature.map.component.ZoomButtons
 import org.meshtastic.feature.map.model.MapStyle
 import org.meshtastic.feature.map.util.toGeoPositionOrNull
 import org.maplibre.spatialk.geojson.Position as GeoPosition
@@ -93,6 +95,9 @@ fun MapScreen(
 
     var filterMenuExpanded by remember { mutableStateOf(false) }
 
+    // Node info sheet state
+    var selectedNodeNum by remember { mutableStateOf<Int?>(null) }
+
     // Waypoint dialog state
     var showWaypointDialog by remember { mutableStateOf(false) }
     var longPressPosition by remember { mutableStateOf<GeoPosition?>(null) }
@@ -169,7 +174,7 @@ fun MapScreen(
                 showHillshade = selectedMapStyle == MapStyle.Terrain,
                 showWeatherRadar = filterState.showWeatherRadar,
                 owmApiKey = filterState.owmApiKey,
-                onNodeClick = { nodeNum -> navigateToNodeDetails(nodeNum) },
+                onNodeClick = { nodeNum -> selectedNodeNum = nodeNum },
                 onMapLongClick = { position ->
                     longPressPosition = position
                     editingWaypointId = null
@@ -263,6 +268,21 @@ fun MapScreen(
                 },
             )
 
+            // Zoom controls
+            ZoomButtons(
+                onZoomIn = {
+                    scope.launch {
+                        cameraState.animateTo(cameraState.position.copy(zoom = cameraState.position.zoom + 1.0))
+                    }
+                },
+                onZoomOut = {
+                    scope.launch {
+                        cameraState.animateTo(cameraState.position.copy(zoom = cameraState.position.zoom - 1.0))
+                    }
+                },
+                modifier = Modifier.align(Alignment.CenterEnd).padding(MAP_OVERLAY_PADDING),
+            )
+
             // Scale bar — auto-shows on zoom change, hides after 3 seconds
             DisappearingScaleBar(
                 metersPerDp = cameraState.metersPerDpAtTarget,
@@ -310,4 +330,14 @@ fun MapScreen(
             position = longPressPosition,
         )
     }
+
+    // Node info bottom sheet
+    val selectedNode = selectedNodeNum?.let { num -> filteredNodes.find { it.num == num } }
+    if (selectedNode != null) {
+        NodeInfoSheet(
+            node = selectedNode,
+            onDismiss = { selectedNodeNum = null },
+            onViewDetails = { navigateToNodeDetails(selectedNode.num) },
+        )
+    }
 }

feature/map/src/commonMain/kotlin/org/meshtastic/feature/map/component/MapButton.kt

@@ -16,13 +16,24 @@
  */
 package org.meshtastic.feature.map.component
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.resources.stringResource
+import org.meshtastic.core.resources.Res
+import org.meshtastic.core.resources.zoom_in
+import org.meshtastic.core.resources.zoom_out
+import org.meshtastic.core.ui.icon.Add
+import org.meshtastic.core.ui.icon.MeshtasticIcons
+import org.meshtastic.core.ui.icon.Remove
 
 /** A compact icon button used in map control overlays. Uses [FilledIconButton] for a consistent, compact appearance. */
 @Composable
@@ -41,3 +52,21 @@ internal fun MapButton(
         )
     }
 }
+
+/** Vertical zoom in/out button pair for the map overlay. */
+@Composable
+internal fun ZoomButtons(onZoomIn: () -> Unit, onZoomOut: () -> Unit, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        MapButton(
+            icon = MeshtasticIcons.Add,
+            contentDescription = stringResource(Res.string.zoom_in),
+            onClick = onZoomIn,
+        )
+        Spacer(Modifier.height(4.dp))
+        MapButton(
+            icon = MeshtasticIcons.Remove,
+            contentDescription = stringResource(Res.string.zoom_out),
+            onClick = onZoomOut,
+        )
+    }
+}

feature/map/src/commonMain/kotlin/org/meshtastic/feature/map/component/MaplibreMapContent.kt

@@ -16,14 +16,26 @@
  */
 package org.meshtastic.feature.map.component
 
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.maplibre.compose.camera.CameraPosition
 import org.maplibre.compose.camera.CameraState
@@ -61,11 +73,11 @@ import org.maplibre.compose.style.StyleState
 import org.maplibre.compose.style.rememberStyleState
 import org.maplibre.compose.util.ClickResult
 import org.maplibre.spatialk.geojson.Point
+import org.meshtastic.core.common.util.nowSeconds
 import org.meshtastic.core.model.DataPacket
 import org.meshtastic.core.model.Node
 import org.meshtastic.feature.map.model.MapLayerItem
 import org.meshtastic.feature.map.util.MARKER_STROKE_WIDTH
-import org.meshtastic.feature.map.util.NODE_MARKER_RADIUS
 import org.meshtastic.feature.map.util.PRECISION_CIRCLE_STROKE_ALPHA
 import org.meshtastic.feature.map.util.nodesToFeatureCollection
 import org.meshtastic.feature.map.util.waypointsToFeatureCollection
@@ -89,10 +101,21 @@ private const val PRECISION_SCALE_MIN = 1f / EQUATORIAL_METERS_PER_PIXEL_ZOOM0
 @Suppress("MagicNumber")
 private const val PRECISION_SCALE_MAX = 16_777_216f / EQUATORIAL_METERS_PER_PIXEL_ZOOM0 // 2^24
 private const val CLUSTER_OPACITY = 0.85f
-private const val LABEL_OFFSET_EM = 1.5f
 private const val CLUSTER_ZOOM_INCREMENT = 2.0
 private const val HILLSHADE_EXAGGERATION = 0.5f
 
+/** Node chip marker: larger circle with short name text centered inside. */
+private val NODE_CHIP_RADIUS: Dp = 14.dp
+private const val NODE_CHIP_TEXT_SIZE = 0.7f
+private val NODE_CHIP_HALO_WIDTH: Dp = 1.dp
+
+/** Pulse animation: ripple ring triggered when a node is heard. Matches original PulsingNodeChip behavior. */
+private const val PULSE_RECENTLY_HEARD_SECONDS = 5
+private const val PULSE_DURATION_MS = 5000L
+private const val PULSE_CYCLE_MS = 1000
+private const val PULSE_MAX_EXPANSION_DP = 10f
+private const val PULSE_MAX_OPACITY = 0.3f
+
 /** Free Terrain Tiles (Terrarium encoding) hosted on AWS. No API key required. */
 private val TERRAIN_TILES = listOf("https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png")
 
@@ -230,6 +253,60 @@ private fun NodeMarkerLayers(
             GeoJsonOptions(cluster = true, clusterRadius = CLUSTER_RADIUS, clusterMinPoints = CLUSTER_MIN_POINTS),
         )
 
+    // --- Pulse detection: track lastHeard changes to trigger ripple animation ---
+    val prevLastHeard = remember { mutableMapOf<Int, Int>() }
+    var pulsingNodeNums by remember { mutableStateOf(emptySet<Int>()) }
+    val removalJobs = remember { mutableMapOf<Int, Job>() }
+
+    val currentLastHeard = remember(nodes) { nodes.associate { it.num to it.lastHeard } }
+    LaunchedEffect(currentLastHeard) {
+        val now = nowSeconds
+        for ((num, lastHeard) in currentLastHeard) {
+            val prev = prevLastHeard[num]
+            val recentlyHeard = lastHeard > 0 && (now - lastHeard) <= PULSE_RECENTLY_HEARD_SECONDS
+            if (recentlyHeard && (prev == null || prev < lastHeard)) {
+                removalJobs[num]?.cancel()
+                pulsingNodeNums = pulsingNodeNums + num
+                removalJobs[num] =
+                    coroutineScope.launch {
+                        delay(PULSE_DURATION_MS)
+                        pulsingNodeNums = pulsingNodeNums - num
+                        removalJobs.remove(num)
+                    }
+            }
+        }
+        prevLastHeard.clear()
+        prevLastHeard.putAll(currentLastHeard)
+    }
+
+    // Pulse halo layer — expanding ripple ring behind markers for recently-heard nodes
+    if (pulsingNodeNums.isNotEmpty()) {
+        val pulseTransition = rememberInfiniteTransition()
+        val pulseProgress by
+            pulseTransition.animateFloat(
+                initialValue = 0f,
+                targetValue = 1f,
+                animationSpec =
+                infiniteRepeatable(
+                    animation = tween(PULSE_CYCLE_MS, easing = LinearEasing),
+                    repeatMode = RepeatMode.Restart,
+                ),
+            )
+        val pulsingFeatures =
+            remember(nodes, pulsingNodeNums) {
+                val pulsingSet = pulsingNodeNums
+                nodesToFeatureCollection(nodes.filter { it.num in pulsingSet }, myNodeNum)
+            }
+        val pulsingSource = rememberGeoJsonSource(data = GeoJsonData.Features(pulsingFeatures))
+        CircleLayer(
+            id = "node-pulse-halo",
+            source = pulsingSource,
+            radius = const(NODE_CHIP_RADIUS + (pulseProgress * PULSE_MAX_EXPANSION_DP).dp),
+            color = feature["background_color"].convertToColor(const(NodeMarkerColor)),
+            opacity = const((1f - pulseProgress) * PULSE_MAX_OPACITY),
+        )
+    }
+
     // Cluster circles — tap to zoom in toward expansion
     CircleLayer(
         id = "node-clusters",
@@ -265,12 +342,12 @@ private fun NodeMarkerLayers(
         textSize = const(1.2f.em),
     )
 
-    // Individual node markers with per-node background color
+    // Individual node markers — colored chip-style circles with short name
     CircleLayer(
         id = "node-markers",
         source = nodesSource,
         filter = !feature.has("cluster"),
-        radius = const(NODE_MARKER_RADIUS),
+        radius = const(NODE_CHIP_RADIUS),
         color = feature["background_color"].convertToColor(const(NodeMarkerColor)),
         strokeWidth = const(MARKER_STROKE_WIDTH),
         strokeColor = const(Color.White),
@@ -285,15 +362,16 @@ private fun NodeMarkerLayers(
         },
     )
 
-    // Short name labels below node markers
+    // Short name centered on the node marker chip
     SymbolLayer(
         id = "node-labels",
         source = nodesSource,
         filter = !feature.has("cluster"),
         textField = feature["short_name"].asString(),
-        textSize = const(0.9f.em),
-        textOffset = offset(0f.em, LABEL_OFFSET_EM.em),
-        textColor = const(Color.DarkGray),
+        textSize = const(NODE_CHIP_TEXT_SIZE.em),
+        textColor = feature["foreground_color"].convertToColor(const(Color.White)),
+        textHaloColor = feature["background_color"].convertToColor(const(NodeMarkerColor)),
+        textHaloWidth = const(NODE_CHIP_HALO_WIDTH),
         textAllowOverlap = const(true),
         iconAllowOverlap = const(true),
     )