I am trying to include a map view with Mapbox npm ...

# compose-web

[Tobias]

I am trying to include a map view with Mapbox npm module into my Compose Web application. As far as I understood I need to create a module with JsModule-Annotation to be able to use mapbox JS library. The point where I am unable to wrap my head around is, how I would then include the map with Compose web. First, can anyone recommend a good tutorial on how to use JsModule and second is there another tutorial on how to use it then with Compose Web?

Coming from Android and iOS I have declared my expected fun MapView() in my common code and have implemented them in iOS with using UIKitView . How is this generally done with ComposeWeb? I have found some solutions that use an third-party HtmlView for example, but not sure if this is the current way to go.

[Frank Bouwens]

You could consider looking at the example apps from MapLibre.
(MapLibre is a fork of MapBox)

[Tobias]

Thank you @Frank Bouwens Let’s take their basic code snippet for example

<div id="map"></div>
<script>
    var map = new maplibregl.Map({
        container: 'map', // container id
        style: '<https://demotiles.maplibre.org/style.json>', // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1 // starting zoom
    });
</script>

So far, this is clear. My problem is rather how I would use or “translate” this for my Compose Web application? Do I need to create a JsModule or somehow use js(…). I am confused and grateful for any pointers on how to proceed. There is lots of code out there, but a lot seems to be legacy.

[Konstantin Tskhovrebov]

here you can see a map integration into the compose web app
https://github.com/ShreyashKore/wonderous_compose/tree/main/composeApp/src/wasmJsMain/kotlin/openlayersmap

[Tobias]

Thanks @Konstantin Tskhovrebov This is the example I meant when mentioning HtmlView . So there is no other way of using HtmlView when integrating JS map library?