How to add a feature to the MapLibre Compose map

[amircitoedu]

Firstly I'd like to start off by saying that this is my first time ever starting a discussion on Github, so please be kind. I am also new to MapLibre and using KMP to build Android apps. With that said, I've managed to do the basic which is to display the map. I am trying to learn how to add "features" to the map forgive me if I'm not using the correct terms. Example I'd like to add a point to the map. I know to add the basics like adding CircleLayer to the map. Let's say I'd like to show where I live on the map. What is, oh I don't know, the best practice for doing that? I've read https://maplibre.org/maplibre-compose/ and tried to follow the code from Demo App but I haven't figured it out. So can someone be patient with me and provide me with hints or guide me into the right direction as to how I may achieve this. Thank you.

[sargunv]

Have you had a look at this documentation page?

There's two pieces:

• define the data source using rememberGeoJsonSource
• make it visible on the map (probably with CircleLayer or SymbolLayer)

Something like:

MapLibreMap(...) {
	val source = rememberGeoJsonSource(
		id = "example", 
		data = GeoJsonData.Features(Point(Position(-89.0,17.5)))
	)
	
	CircleLayer(
		id = "example",
		source = source,
		color = const(Color.Blue)
	)
}

It would be helpful to read and understand the MapLibre style spec; our programmatic styling API is directly based off of that, just with some Kotlin sugar on top.

[amircitoedu]

I actually read those pages and I understood it to some extent but wasn't able to apply it. I even searched for other similar examples but IDE kept complaining about Point() and I'm still familiarizing myself with the library and packages. Anyway I managed to implement the solution you shared and got it working after a small modification. See code below that worked. Thank you so much for your assistance. Greatly appreciated.

`
MapLibreMap(...) {
val source = rememberGeoJsonSource(
id = "example",
data = GeoJsonData.Features(Point(Position(-89.0,17.5)))
)

CircleLayer(
	id = "example",
	source = source,
	color = const(Color.Blue)
)

}`