RadarMarker popup improvements (#166)

radarlabs · May 31, 2024 · 0ec50cd · 0ec50cd
1 parent 32a1280
commit 0ec50cd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/src/types.ts b/src/types.ts
@@ -470,10 +470,16 @@ export interface RadarMarkerImage {
   height?: number;
 }
 
+export interface RadarMarkerPopupOptions extends maplibregl.PopupOptions {
+  text?: string;
+  html?: string;
+}
+
 export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
   text?: string;
   html?: string;
   image?: RadarMarkerImage;
+  popup?: RadarMarkerPopupOptions;
 }
 
 export interface RadarAutocompleteUIOptions {

diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts
@@ -7,7 +7,7 @@ import type RadarMap from './RadarMap';
 
 import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
 
-const defaultMarkerOptions: maplibregl.MarkerOptions = {
+const defaultMarkerOptions: RadarMarkerOptions = {
   color: '#000257',
 };
 
@@ -93,12 +93,27 @@ class RadarMarker extends maplibregl.Marker {
       }
     }
 
-    // set popup text or HTML
+    // handle deprecated popup options
     if (markerOptions.text) {
-      const popup = new maplibregl.Popup({ offset: 35 }).setText(markerOptions.text);
-      this.setPopup(popup);
-    } else if (markerOptions.html) {
-      const popup = new maplibregl.Popup({ offset: 35 }).setHTML(markerOptions.html);
+      markerOptions.popup = markerOptions.popup || {};
+      markerOptions.popup!.text = markerOptions.text;
+    }
+    if (markerOptions.html) {
+      markerOptions.popup = markerOptions.popup || {};
+      markerOptions.popup!.html = markerOptions.html;
+    }
+
+    // set popup text or HTML
+    if (markerOptions.popup) {
+      const popup = new maplibregl.Popup(markerOptions.popup)
+
+      if (markerOptions.popup.text) {
+        popup.setText(markerOptions.popup.text);
+      }
+      if (markerOptions.popup.html) {
+        popup.setHTML(markerOptions.popup.html);
+      }
+
       this.setPopup(popup);
     }
   }