On a slightly related note, is there any examples ...
# kobweb
b
On a slightly related note, is there any examples of using an npm library like ol (openlayers map https://openlayers.org/doc/quickstart.html) in kobweb?
d
Not offhand (maybe someone else knows?) but I can reach out later with more information. Away from the computer at the moment.
b
Cool, no rush, this is just a side learning project
this type of js library interop would probably be a good add to the kobweb website :)
l
Not quite the same thing, but I have a kobweb site that integrates a chess ui library. Most dom-based ui libraries work in a very similar way: you create a container div for the ui element, pass that div into a function/constructor provided by the library to initialize the ui, and finally add the styles that the library requires. In my case that is done here. I converted the styles to kotlin using css2kobweb, but you could also include the original css file from the library. The main inconvenience comes from writing external declarations for the library, though you could use
dynamic
to escape some of that. This is mostly just using kotlin/js functionality, not anything kobweb-specific, and the documentation for that is here, but it's certainly light on examples.
thank you color 1
d
So, if I were trying to integrate openlayers, I would start with this link: https://www.npmjs.com/package/ol
In your Gradle build script, you would add
implementation(npm("ol", "10.6.1"))
After that point comes the trickier part, where you start wrapping external code (as Letter mentioned in their comment)
The good news about wrapping external code is you can usually wrap just what you need and ignore the rest of the API. The bad news is the first time you do it, it feels kind of tricky as you play around trying to get things just right.
For a talk I did two years ago, I wrapped reveal.js, a slide presentation js library. (f you watched my kotlinconf talk from earlier this year, I actually rewrote reveal.js from scratch in Kobweb, which was more fun, but I digress :) After getting the code downloaded and embedded into my site, here is the code I used to wrap just the concepts that I cared about: https://github.com/bitspittle/droidcon-sf-24/tree/main/site/src/jsMain/kotlin/dev/bitspittle/droidconSf24/bindings/revealjs
b
thanks guys, these links are really helpful, this is my first time using kotlin/js so this interop stuff is all new to me
👍 1