ComposeMap – Intro

Hi!

My name is Amir Hammad, I live in the Netherlands, but originally I’m from Slovakia.

Currently, my focus is on android and iOS app development using Kotlin Compose and SwiftUI. I use kotlin multiplatform extensively and wanted to dive into compose multiplatform.

Since my projects involve heavy map usage, I decided to look out for compose multiplatform maps. I wanted to find a library that uses kotlin compose’s declarative approach.

I realised that if I wanted to use a map library for my project I would need to do some ugly hacks and have a half-native, half-multiplatform project.
For example: apple maps , google maps, maplibre or mapbox. They all work on both platforms separately, but you need to write the code for the map logic twice. It isn’t so attractive since there is an option to write only compose multiplatform code once. Well, not yet..

So next idea came up my mind: let’s create a library that connects iOS and android map libraries together.

The library

I studied the internals of kotlin compose to learn how to create a custom composition. After a bit of tinkering I managed to make some progress. It was easier than expected.

Underneath maplibre-native is being used.

Using the native iOS and native Android map and linking it to composables was, however, not so easy. Especially iOS, where the Objective C support in kotlin is not straight forward. But knowing some background of C and Objective C programming I pushed through and managed to make some nice progress.

I’m aiming for the library to provide a composable function “ComposeMap” that can be used like this.

Declarative syntax for multiplatform maps

Demo time!

And for today I’m finishing this post with a little demo of the new kotlin multiplatform ComposeMap library I’m baking.
It is just a circle annotation that is being controlled from compose. Excluding the library, the same app code (99%) is being used for iOS and Android.

On the left side you can see the application running on iOS and on the right the same application running on Android.

In my next post I will go further, exploring the limits of this beautiful multi-color dynamic circle and perhaps drag him around Nitra.

UPDATE: Next post you can find here


Stay up to date to these developments!

I will be posting some progress of my journey.


Connect

If you have some questions, suggestions, requests or want to test out this library yourself, get in touch with me using the contact form.

Get in touch