I'm trying to integrate maplibre-gl in a kotlin-js...

# javascript

[Jilles van Gurp]

I'm trying to integrate maplibre-gl in a kotlin-js project and I'm struggling a bit with adapting the broken type definitions generated by generateExternals. I have 3 variants of the same code that initializes the map. The only one that works is the one where everything happens in a js(...) call. I'm trying to figure out why. The other two fail with an "object is not iterable" somewhere deep in the maplibre libraries. It seems to expect a javascript object that is iterable and whatever kotlin-js does with this, seems to not meet the expectations when dealing these options. Also, the only way I can get the library to initialize is via index.html; if I load it via implementation(npm("..."
)) instead I get a maplibre-gl not found error with the working variant and the same error for non-iterable objects with the other two.

Here's my code. I would appreciate any suggestions for getting some working type definitions for this as messing with js() is a bit ugly. The init gets called after the dom tree with the container is created. Only variant 3 renders the map.

external interface MapboxOptions {
    var container: String
    var style: String
    var center: Array<Double>
    var zoom: Int
}

external open class Map(options: dynamic)

class MapManager() {
    var map: dynamic = null
    fun init() {
        // variant 1, fails with "Object is not Iterable" in map.js on the line that works with the options
//        val options = object : MapboxOptions {
//            override var container = "maplibre-container"
//            override var style = "<https://demotiles.maplibre.org/style.json>"
//            override var center = arrayOf(13.0, 52.0)
//            override var zoom = 4
//        }
//        println(options)
//        map = Map(options)

        // variant 2, same failure
//        val options = js("""
//            {
//                container: "maplibre-container",
//                style: "<https://demotiles.maplibre.org/style.json>",
//                center: [13.0,52.0],
//                zoom: 3,
//            }
//        """)
//        map=Map(options)

        // variant 3, works?!?!
        map = js(
            """
            var map = new maplibregl.Map({
                container: "maplibre-container",
                style: "<https://demotiles.maplibre.org/style.json>",
                center: [13.0,52.0],
                zoom: 3,
            });
            console.log("created map ");
            console.log(map);
            return map;
            """
        )

        console.log(map)
        return map
    }
}

[turansky]

1. Map require additional @JsModule annotation (separate file required)

[turansky]

2. To construct MapOptions you can use jsObject builder (from kotlin-wrappers)