feat: add class and classList props

README.md

@@ -15,4 +15,26 @@ You might want to check out [solid-map-gl](https://github.com/GIShub4/solid-map-
 
 ## Usage
 
-See [examples](examples).
+Don't forget to import MapLibre GL JS CSS styles:
+
+```tsx
+import "maplibre-gl/dist/maplibre-gl.css";
+```
+
+Add map component and ensure to specify container size in `style`, `class` or `classList` attributes:
+
+```tsx
+<Map
+  style={{
+    width: "100%",
+    "aspect-ratio": "calc(16/9)",
+  }}
+  options={{
+    center: [11.40416, 47.26475],
+    style: "https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json",
+    zoom: 10,
+  }}
+/>
+```
+
+See more [usage examples](examples).

examples/complete.css

@@ -0,0 +1,7 @@
+.map {
+  aspect-ratio: calc(16 / 9);
+}
+
+.w-half {
+  width: 50%;
+}

examples/complete.tsx

@@ -1,20 +1,14 @@
+import "maplibre-gl/dist/maplibre-gl.css";
+import "./complete.css";
 import { Layer, Map, Marker, Popup, Source } from "../src";
 import { NavigationControl, ScaleControl } from "../src/controls";
-import "maplibre-gl/dist/maplibre-gl.css";
 import { MapsProvider, useMaps } from "../src/maps.jsx";
 import { createMemo } from "solid-js";
 
 const MapsProbe = () => {
   const maps = useMaps()?.maps;
-  const keys = createMemo(() => {
-    console.log("Updated memo:", maps?.());
-    const keys: string[] = [];
-    for (const k of maps?.().keys() ?? []) {
-      keys.push(k);
-    }
-    return keys;
-  });
-  return <p>Mounted maps: {keys().join(", ")}</p>;
+  const keys = createMemo(() => [...(maps?.().keys() ?? [])].join(", "));
+  return <p>Mounted maps: {keys()}</p>;
 };
 
 export function Complete() {
@@ -24,9 +18,9 @@ export function Complete() {
       <MapsProvider>
         <MapsProbe />
         <Map
+          class="map"
+          classList={{ "w-half": true }}
           style={{
-            width: "50%",
-            "aspect-ratio": "calc(16/9)",
             "margin-block": "1em",
           }}
           options={{

src/map.tsx

@@ -28,6 +28,8 @@ export const useMapEffect = (f: (map: maplibre.Map) => void) =>
 export type MapProps = {
   id?: string;
   style?: JSX.CSSProperties;
+  class?: string;
+  classList?: Record<string, boolean | undefined>;
   cursor?: string;
   options?: Partial<Omit<maplibre.MapOptions, "container">>;
   children?: JSX.Element;
@@ -43,9 +45,19 @@ const defaultProps: Partial<MapProps> = {
 
 export function Map(initial: MapProps) {
   const mergedProps = mergeProps(defaultProps, initial);
-  const [props, events] = splitProps(mergedProps, ["id", "style", "cursor", "options", "children"]);
+  const [props, events] = splitProps(mergedProps, [
+    "id",
+    "style",
+    "class",
+    "classList",
+    "cursor",
+    "options",
+    "children",
+  ]);
   const id = createMemo(() => props.id ?? createUniqueId());
-  const container = (<div id={id()} style={props.style} />) as HTMLDivElement;
+  const container = (
+    <div id={id()} class={props.class} classList={props.classList} style={props.style} />
+  ) as HTMLDivElement;
   const [map, setMap] = createSignal<maplibre.Map>();
   const mapsContext = useMaps();