add js bindings for sources and layers

demo-app/demo_app.podspec

@@ -50,5 +50,5 @@ Pod::Spec.new do |spec|
             SCRIPT
         }
     ]
-    spec.resources = ['build/compose/cocoapods/compose-resources']
+    spec.resources = ['build\compose\cocoapods\compose-resources']
 end

demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/util.kt

@@ -85,7 +85,7 @@ expect object Platform {
 }
 
 val Platform.supportsLayers: Boolean
-  get() = isAndroid || isIos
+  get() = isAndroid || isIos || isWeb
 
 val Platform.supportsBlending: Boolean
   get() = isAndroid || isIos

lib/kotlin-maplibre-js/src/commonMain/kotlin/dev/sargunv/maplibrejs/external.kt

@@ -96,6 +96,135 @@ public external class Map public constructor(options: MapOptions) {
   ): Array<Any>
 
   public fun getBounds(): LngLatBounds
+
+  public fun addLayer(layer: LayerSpecification, beforeId: String? = definedExternally)
+
+  public fun removeLayer(id: String)
+
+  public fun getLayer(id: String): StyleLayer?
+
+  public fun getLayersOrder(): Array<String>
+
+  public fun addSource(id: String, source: SourceSpecification)
+
+  public fun removeSource(id: String)
+
+  public fun getSource(id: String): Source?
+
+  public fun setLayoutProperty(layerId: String, name: String, value: Expression)
+
+  public fun setPaintProperty(layerId: String, name: String, value: Expression)
+
+  public fun setFilter(layerId: String, filter: Expression)
+}
+
+/** [Source](https://maplibre.org/maplibre-gl-js/docs/API/interfaces/Source/) */
+public sealed external interface Source {
+  public val type: String
+
+  public val id: String
+
+  public var minzoom: Number
+  public var maxzoom: Number
+  public var tileSize: Number
+  public var attribution: String?
+}
+
+/** https://maplibre.org/maplibre-style-spec/sources/ */
+public sealed external interface SourceSpecification {
+  public var type: String
+}
+
+public sealed external interface VectorSourceSpecification : SourceSpecification {
+  public var url: String?
+  public var tiles: Array<String>?
+  public var bounds: Array<Double>?
+  public var scheme: String?
+  public var minzoom: Int?
+  public var maxzoom: Int?
+  public var attribution: String?
+  public var promoteId: dynamic // string or object
+  public var volatile: Boolean?
+}
+
+public sealed external interface RasterSourceSpecification : SourceSpecification {
+  public var url: String?
+  public var tiles: Array<String>?
+  public var bounds: Array<Double>?
+  public var minzoom: Int?
+  public var maxzoom: Int?
+  public var tileSize: Int?
+  public var scheme: String?
+  public var attribution: String?
+  public var volatile: Boolean?
+}
+
+public sealed external interface GeoJsonSourceSpecification : SourceSpecification {
+  public var data: dynamic // string url or geojson object
+  public var maxzoom: Int?
+  public var attribution: String?
+  public var buffer: Int?
+  public var filter: Expression?
+  public var tolerance: Double?
+  public var cluster: Boolean?
+  public var clusterRadius: Int?
+  public var clusterMaxZoom: Int?
+  public var clusterMinPoints: Int?
+  public var clusterProperties: dynamic
+  public var lineMetrics: Boolean?
+  public var generateId: Boolean?
+  public var progression: dynamic // string or object
+  public var volatile: Boolean?
+}
+
+/** [StyleLayer](https://maplibre.org/maplibre-gl-js/docs/API/classes/StyleLayer/) */
+public sealed external class StyleLayer {
+  public val id: String
+  public val type: String
+  public var source: String
+  public var sourceLayer: String?
+  public var minzoom: Int?
+  public var maxzoom: Int?
+  public var filter: Expression?
+  public var visibility: String?
+
+  public fun getLayoutProperty(key: String): dynamic
+
+  public fun setLayoutProperty(key: String, value: dynamic)
+
+  public fun getPaintProperty(key: String): dynamic
+
+  public fun setPaintProperty(key: String, value: dynamic)
+}
+
+public external class FillStyleLayer private constructor() : StyleLayer
+
+public external class BackgroundStyleLayer private constructor() : StyleLayer
+
+public external class CircleStyleLayer private constructor() : StyleLayer
+
+public external class FillExtrusionStyleLayer private constructor() : StyleLayer
+
+public external class HeatmapStyleLayer private constructor() : StyleLayer
+
+public external class HillshadeStyleLayer private constructor() : StyleLayer
+
+public external class LineStyleLayer private constructor() : StyleLayer
+
+public external class RasterStyleLayer private constructor() : StyleLayer
+
+public external class SymbolStyleLayer private constructor() : StyleLayer
+
+public external interface LayerSpecification {
+  public var id: String?
+  public var source: String?
+  public var sourceLayer: String?
+  public var type: String?
+  public var minzoom: Int?
+  public var maxzoom: Int?
+  public var filter: Expression?
+  public var layout: dynamic
+  public var paint: dynamic
 }
 
 /**

lib/kotlin-maplibre-js/src/commonMain/kotlin/dev/sargunv/maplibrejs/util.kt

@@ -126,4 +126,107 @@ public fun QueryRenderedFeaturesOptions(
   validate?.let { this.validate = it }
 }
 
+public fun LayerSpecification(
+  id: String,
+  type: String,
+  source: String? = null,
+  sourceLayer: String? = null,
+  minzoom: Int? = null,
+  maxzoom: Int? = null,
+  filter: Expression? = null,
+  layout: Any,
+  paint: Any,
+): LayerSpecification = jso {
+  this.id = id
+  this.type = type
+  source?.let { this.source = it }
+  sourceLayer?.let { this.sourceLayer = it }
+  minzoom?.let { this.minzoom = it }
+  maxzoom?.let { this.maxzoom = it }
+  filter?.let { this.filter = it }
+  this.layout = layout
+  this.paint = paint
+}
+
+public fun VectorSourceSpecification(
+  url: String? = null,
+  tiles: Array<String>? = null,
+  bounds: Array<Double>? = null,
+  scheme: String? = null,
+  minzoom: Int? = null,
+  maxzoom: Int? = null,
+  attribution: String? = null,
+  promoteId: Any? = null, // string or object
+  volatile: Boolean? = null,
+): VectorSourceSpecification = jso {
+  this.type = "vector"
+  url?.let { this.url = it }
+  tiles?.let { this.tiles = it }
+  bounds?.let { this.bounds = it }
+  scheme?.let { this.scheme = it }
+  minzoom?.let { this.minzoom = it }
+  maxzoom?.let { this.maxzoom = it }
+  attribution?.let { this.attribution = it }
+  promoteId?.let { this.promoteId = it }
+  volatile?.let { this.volatile = it }
+}
+
+public fun RasterSourceSpecification(
+  url: String? = null,
+  tiles: Array<String>? = null,
+  bounds: Array<Double>? = null,
+  minzoom: Int? = null,
+  maxzoom: Int? = null,
+  tileSize: Int? = null,
+  scheme: String? = null,
+  attribution: String? = null,
+  volatile: Boolean? = null,
+): RasterSourceSpecification = jso {
+  this.type = "raster"
+  url?.let { this.url = it }
+  tiles?.let { this.tiles = it }
+  bounds?.let { this.bounds = it }
+  minzoom?.let { this.minzoom = it }
+  maxzoom?.let { this.maxzoom = it }
+  tileSize?.let { this.tileSize = it }
+  scheme?.let { this.scheme = it }
+  attribution?.let { this.attribution = it }
+  volatile?.let { this.volatile = it }
+}
+
+public fun GeoJsonSourceSpecification(
+  data: Any?, // string URL or GeoJSON object
+  maxzoom: Int? = null,
+  attribution: String? = null,
+  buffer: Int? = null,
+  filter: Expression? = null,
+  tolerance: Double? = null,
+  cluster: Boolean? = null,
+  clusterRadius: Int? = null,
+  clusterMaxZoom: Int? = null,
+  clusterMinPoints: Int? = null,
+  clusterProperties: Any? = null,
+  lineMetrics: Boolean? = null,
+  generateId: Boolean? = null,
+  progression: Any? = null, // string or object
+  volatile: Boolean? = null,
+): GeoJsonSourceSpecification = jso {
+  this.type = "geojson"
+  data?.let { this.data = it }
+  maxzoom?.let { this.maxzoom = it }
+  attribution?.let { this.attribution = it }
+  buffer?.let { this.buffer = it }
+  filter?.let { this.filter = it }
+  tolerance?.let { this.tolerance = it }
+  cluster?.let { this.cluster = it }
+  clusterRadius?.let { this.clusterRadius = it }
+  clusterMaxZoom?.let { this.clusterMaxZoom = it }
+  clusterMinPoints?.let { this.clusterMinPoints = it }
+  clusterProperties?.let { this.clusterProperties = it }
+  lineMetrics?.let { this.lineMetrics = it }
+  generateId?.let { this.generateId = it }
+  progression?.let { this.progression = it }
+  volatile?.let { this.volatile = it }
+}
+
 public typealias Expression = Array<*>