fix loading maplibre css on web under shadow dom (#711)

sargunv · web-flow · commit 727bdef4bf39 · 2025-11-12T01:54:51.000-08:00
diff --git a/demo-app/src/jsMain/resources/index.html b/demo-app/src/jsMain/resources/index.html
@@ -5,10 +5,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MapLibre Compose demo app</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/maplibre-gl@5.12.0/dist/maplibre-gl.css"
-    />
     <style>
       html,
       body {
diff --git a/demo-app/src/jsMain/resources/styles.css b/demo-app/src/jsMain/resources/styles.css
diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md
@@ -164,21 +164,7 @@ androidMain.dependencies {
 
     Web support is not yet at feature parity with Android and iOS. Check the [status table](index.md#status) for more info.
 
-For Web, you'll additionally need to add the MapLibre CSS to your page. The
-easiest way to do this is via the CDN:
-
-```html title="index.html"
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/maplibre-gl@{{ gradle.maplibre_js_version }}/dist/maplibre-gl.css"
-    />
-    <title>Example Map</title>
-  </head>
-</html>
-```
+There are no longer any special steps required to use MapLibre Compose on Web.
 
 ## Set up Desktop (JVM)
 
diff --git a/lib/maplibre-compose/src/jsMain/kotlin/org/maplibre/compose/map/WebMapView.kt b/lib/maplibre-compose/src/jsMain/kotlin/org/maplibre/compose/map/WebMapView.kt
@@ -16,6 +16,7 @@ import co.touchlab.kermit.Logger
 import kotlinx.browser.document
 import org.maplibre.compose.style.BaseStyle
 import org.maplibre.compose.style.SafeStyle
+import org.maplibre.kmp.js.getVersion
 import org.w3c.dom.HTMLElement
 
 @Composable
@@ -55,7 +56,19 @@ internal fun WebMapView(
 
   WebElementView(
     modifier = modifier.onGloballyPositioned { maybeMap?.resize() },
-    factory = { document.createElement("div").unsafeCast<HTMLElement>() },
+    factory = {
+      document.createElement("div").unsafeCast<HTMLElement>().apply {
+        appendChild(
+          document.createElement("link").apply {
+            setAttribute("rel", "stylesheet")
+            setAttribute(
+              "href",
+              "https://unpkg.com/maplibre-gl@${getVersion()}/dist/maplibre-gl.css",
+            )
+          }
+        )
+      }
+    },
     update = { element ->
       val map =
         maybeMap
diff --git a/lib/maplibre-js-bindings/src/commonMain/kotlin/org/maplibre/kmp/js/external.kt b/lib/maplibre-js-bindings/src/commonMain/kotlin/org/maplibre/kmp/js/external.kt
@@ -8,6 +8,9 @@ import org.w3c.dom.TouchEvent
 import org.w3c.dom.events.MouseEvent
 import org.w3c.dom.events.WheelEvent
 
+/** https://maplibre.org/maplibre-gl-js/docs/API/functions/getVersion/ */
+public external fun getVersion(): String
+
 /** [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) */
 public external class Map public constructor(options: MapOptions) {
   public var repaint: Boolean
