How to add a Marker Symbol ?

[AmmarOnah]

Hello, thanks for this clean library,

I'm Trying to add a Marker Symbol wherever the user clicks it show,

this is my impl:

MaplibreMap(
modifier = Modifier.fillMaxSize(),
cameraState = cameraState,
baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"),
onMapClick = { position, _ ->
userLocation = Point.fromLngLat(position.longitude, position.latitude)
ClickResult.Consume
},
options = MapOptions(
gestureOptions = GestureOptions(
isTiltEnabled = false,
isZoomEnabled = true,
isRotateEnabled = false,
isScrollEnabled = true
),
ornamentOptions = OrnamentOptions.AllDisabled
)

        ) 

[sargunv]

What have you tried? What was the outcome?

You can start with the docs here: https://maplibre.org/maplibre-compose/layers/

[AmmarOnah]

Thanks a lot, I read the docs and reviewed the demoapp and saw how layers of circles and so on can get placed on top of the map, But I couldn't figure out how to make a normal marker sign to be placed in a specific coordinates, I hope if someone has it premade to share it,

…

On Fri, Oct 24, 2025, 12:25 AM Sargun Vohra ***@***.***> wrote: What have you tried? What was the outcome? You can start with the docs here: https://maplibre.org/maplibre-compose/layers/ — Reply to this email directly, view it on GitHub <#647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBVNLPVAE2KNNVVKK3LSNIL3ZFBVTAVCNFSM6AAAAACKBLWURWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINZWGY3DIOA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[sargunv]

You can use a SymbolLayer with the desired image of your "marker".

See the sample here: https://github.com/maplibre/maplibre-compose/blob/main/demo-app%2Fsrc%2FcommonMain%2Fkotlin%2Forg%2Fmaplibre%2Fcompose%2Fdemoapp%2Fdemos%2FMarkersDemo.kt#L44-L71

[AmmarOnah]

Thank you sou much, after this and after i sent chat gpt my code and your code + i explained for him the parameters since he was using old maplibre parameters version, i got this and it works lets gooooooooooo val markerIcon = painterResource(R.drawable.catkoty) val markerJson = """ { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [${userLocation.longitude()}, ${userLocation.latitude()}] }, "properties": {} } ] } """.trimIndent() val markerSource = rememberGeoJsonSource( GeoJsonData.JsonString(markerJson) ) // Add a symbol layer to display the icon at that location SymbolLayer( id = "marker-layer", source = markerSource, iconImage = image(markerIcon), iconAnchor = const(SymbolAnchor.Bottom), iconAllowOverlap = const(true), ) } ‫في الجمعة، 24 أكتوبر 2025 في 3:07 ص تمت كتابة ما يلي بواسطة ‪Sargun Vohra‬‏ ***@***.***‬‏>:‬

…

You can use a SymbolLayer with the desired image of your "marker". See the sample here: https://github.com/maplibre/maplibre-compose/blob/main/demo-app%2Fsrc%2FcommonMain%2Fkotlin%2Forg%2Fmaplibre%2Fcompose%2Fdemoapp%2Fdemos%2FMarkersDemo.kt#L44-L71 — Reply to this email directly, view it on GitHub <#647 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBVNLPRSLHZVAPM2OTA5FOL3ZFUVVAVCNFSM6AAAAACKBLWURWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTINZWG4ZTOMA> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>