fix: ensure compatibility with SSR

Author: shishkin

src/controls.tsx

@@ -1,26 +1,23 @@
 import * as maplibre from "maplibre-gl";
-import { createSignal, JSX, onCleanup, splitProps } from "solid-js";
+import { JSX, onCleanup, splitProps } from "solid-js";
 import { useMapEffect, useMap } from "./map";
 
 export const createControl =
   <Control extends maplibre.IControl, Options>(ctor: new (options: Options) => Control) =>
   (props: { options?: Options; position?: maplibre.ControlPosition }): JSX.Element => {
     const [own, options] = splitProps(props, ["position"]);
-    const [control, setControl] = createSignal<maplibre.IControl>();
+    let control: maplibre.IControl | undefined;
 
     useMapEffect((map) => {
-      const existing = control();
-      if (!existing) {
-        const created = new ctor(options.options ?? ({} as Options)) as maplibre.IControl;
-        map.addControl(created, own.position);
-        setControl(created);
+      if (!control) {
+        control = new ctor(options.options ?? ({} as Options)) as maplibre.IControl;
+        map.addControl(control, own.position);
       }
     });
 
     onCleanup(() => {
-      const c = control();
       const m = useMap()?.();
-      if (c && m && m.hasControl(c)) m.removeControl(c);
+      if (control && m && m.hasControl(control)) m.removeControl(control);
     });
 
     return <></>;

src/marker.tsx

@@ -8,18 +8,19 @@ export type MarkerProps = Partial<maplibre.MarkerOptions> & {
 
 export function Marker(initial: MarkerProps) {
   const [props, options] = splitProps(initial, ["position"]);
-
-  const marker = new maplibre.Marker(options);
+  let marker: maplibre.Marker | undefined;
 
   useMapEffect((map) => {
+    if (!marker) marker = new maplibre.Marker(options);
+
     if (props.position) {
       marker.setLngLat(props.position).addTo(map);
     } else {
       marker.remove();
     }
   });
 
-  onCleanup(() => marker.remove());
+  onCleanup(() => marker?.remove());
 
   return <></>;
 }

src/popup.tsx

@@ -10,17 +10,19 @@ export type PopUpProps = Partial<maplibre.PopupOptions> & {
 export function Popup(initial: PopUpProps) {
   const [props, options] = splitProps(initial, ["position", "content"]);
 
-  const popup = new maplibre.Popup(options);
+  let popup: maplibre.Popup | undefined;
 
   useMapEffect((map) => {
+    if (!popup) popup = new maplibre.Popup(options);
+
     if (props.position && props.content) {
       popup.setLngLat(props.position).setHTML(props.content).addTo(map);
     } else {
       popup.remove();
     }
   });
 
-  onCleanup(() => popup.remove());
+  onCleanup(() => popup?.remove());
 
   return <></>;
 }