Update marker params (#168)

* update marker params * handle popup.element
radarlabs · Jun 3, 2024 · af5e97f · af5e97f
1 parent 97867c5
commit af5e97f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 30 deletions.
diff --git a/demo/views/add-a-marker.hbs b/demo/views/add-a-marker.hbs
@@ -43,7 +43,11 @@
             map.on('load', () => {
               const { lat, lng } = map.getCenter();
 
-              marker = Radar.ui.marker({ text: `${lat}, ${lng}` })
+              marker = Radar.ui.marker({
+                popup: {
+                  text: `${lat}, ${lng}`,
+                  },
+                })
                 .setLngLat([lng, lat])
                 .addTo(map);
 
@@ -59,8 +63,10 @@
                 }
                 const { lat, lng } = map.getCenter();
                 marker = Radar.ui.marker({
-                  image: { url },
-                  text: `${lat}, ${lng}`,
+                  url,
+                  popup: {
+                    text: `${lat}, ${lng}`,
+                  },
                 })
                   .setLngLat([lng, lat])
                   .addTo(map);

diff --git a/demo/views/start-a-trip.hbs b/demo/views/start-a-trip.hbs
@@ -111,7 +111,11 @@
               &lt;p&gt;${location.latitude},${location.longitude}&lt;/p&gt;
             `.trim();
 
-            const userMarker = Radar.ui.marker({ html: userContent })
+            const userMarker = Radar.ui.marker({
+              popup: {
+                html: userContent,
+              },
+            })
               .setLngLat([location.longitude, location.latitude])
               .addTo(map);
 
@@ -122,7 +126,12 @@
                 &lt;p&gt;${user.trip.destinationGeofenceExternalId}&lt;/p&gt;
               `.trim();
 
-              const destMarker = Radar.ui.marker({ html: destContent, color: '#FF6F00' })
+              const destMarker = Radar.ui.marker({
+                color: '#FF6F00',
+                popup: {
+                  html: destContent,
+                },
+              })
                 .setLngLat(user.trip.destinationLocation.coordinates)
                 .addTo(map);
 
@@ -197,7 +206,7 @@
               <p>${location.latitude},${location.longitude}</p>
             `.trim();
 
-            const userMarker = Radar.ui.marker({ html: userHtml })
+            const userMarker = Radar.ui.marker({ popup: { html: userHtml }})
               .setLngLat([location.longitude, location.latitude])
               .addTo(map);
 
@@ -208,7 +217,12 @@
                 <p>${user.trip.destinationGeofenceExternalId}</p>
               `.trim();
 
-              destMarker = Radar.ui.marker({ html: destHtml, color: '#FF6F00' })
+              destMarker = Radar.ui.marker({
+                color: '#FF6F00',
+                popup: {
+                  html: destHtml,
+                },
+              })
                 .setLngLat(user.trip.destinationLocation.coordinates)
                 .addTo(map);
             }

diff --git a/demo/views/track-a-user.hbs b/demo/views/track-a-user.hbs
@@ -89,7 +89,7 @@
               &lt;p&gt;${location.latitude},${location.longitude}&lt;/p&gt;
             `.trim();
 
-            const marker = Radar.ui.marker({ html })
+            const marker = Radar.ui.marker({ popup: { html }})
               .setLngLat([location.longitude, location.latitude])
               .addTo(map);
           });
@@ -144,7 +144,7 @@
           <p>${location.latitude},${location.longitude}</p>
         `.trim();
 
-        const marker = Radar.ui.marker({ html })
+        const marker = Radar.ui.marker({ popup: { html }})
           .setLngLat([location.longitude, location.latitude])
           .addTo(map);
 

diff --git a/src/types.ts b/src/types.ts
@@ -463,22 +463,30 @@ export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformR
   language?: string;
 }
 
-export interface RadarMarkerImage {
-  url?: string;
-  radarMarkerId?: string;
-  width?: number;
-  height?: number;
-}
-
 export interface RadarMarkerPopupOptions extends maplibregl.PopupOptions {
   text?: string;
   html?: string;
+  element?: HTMLElement;
 }
 
 export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
+  /**
+   * @deprecated Use popup.text
+   */
   text?: string;
+
+  /**
+   * @deprecated Use popup.html
+   */
   html?: string;
-  image?: RadarMarkerImage;
+
+  // marker configs
+  url?: string;
+  marker?: string;
+  width?: number;
+  height?: number;
+
+  // popup configs
   popup?: RadarMarkerPopupOptions;
 }
 

diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts
@@ -5,13 +5,16 @@ import Logger from '../logger';
 
 import type RadarMap from './RadarMap';
 
-import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
+import type { RadarMarkerOptions } from '../types';
+
+interface ImageOptions {
+  url?: string;
+  width?: number;
+  height?: number;
+}
 
-const defaultMarkerOptions: RadarMarkerOptions = {
-  color: '#000257',
-};
 
-const createImageElement = (options: RadarMarkerImage) => {
+const createImageElement = (options: ImageOptions) => {
   const element = document.createElement('img');
   element.src = options.url!;
 
@@ -30,13 +33,17 @@ const createImageElement = (options: RadarMarkerImage) => {
   return element;
 }
 
+const defaultMarkerOptions: RadarMarkerOptions = {
+  color: '#000257',
+};
+
 class RadarMarker extends maplibregl.Marker {
   _map!: RadarMap;
-  _image?: RadarMarkerImage;
 
   constructor(markerOptions: RadarMarkerOptions) {
     const maplibreOptions: maplibregl.MarkerOptions = Object.assign({}, defaultMarkerOptions);
 
+    // init MapLibre marker configs
     if (markerOptions.color) {
       maplibreOptions.color = markerOptions.color;
     }
@@ -49,9 +56,8 @@ class RadarMarker extends maplibregl.Marker {
 
     super(maplibreOptions);
 
-    if (markerOptions.image) {
-      this._image = markerOptions.image;
-
+    // handle marker images (Radar marker, or custom URL)
+    if (markerOptions.marker || markerOptions.url) {
       const originalElement = this._element.cloneNode(true);
       this._element.childNodes.forEach((child) => {
         child.remove();
@@ -67,8 +73,8 @@ class RadarMarker extends maplibregl.Marker {
         this._element.replaceChildren(...Array.from(originalElement.childNodes));
       }
 
-      if (markerOptions.image.url) {
-        fetch(markerOptions.image.url)
+      if (markerOptions.url) {
+        fetch(markerOptions.url)
           .then(res => {
             if (res.status === 200) {
               res.blob()
@@ -81,12 +87,12 @@ class RadarMarker extends maplibregl.Marker {
           .catch(onError)
       }
 
-      if (markerOptions.image.radarMarkerId) {
+      if (markerOptions.marker) {
         // fetch custom marker
         Http.request({
           method: 'GET',
           version: 'maps',
-          path: `markers/${markerOptions.image.radarMarkerId}`,
+          path: `markers/${markerOptions.marker}`,
           responseType: 'blob',
         })
           .then(({ data }) => onSuccess(data))
@@ -96,10 +102,12 @@ class RadarMarker extends maplibregl.Marker {
 
     // handle deprecated popup options
     if (markerOptions.text) {
+      Logger.warn('marker option "text" is deprecated, and will be removed in a future version. Use "popup.text".');
       markerOptions.popup = markerOptions.popup || {};
       markerOptions.popup!.text = markerOptions.text;
     }
     if (markerOptions.html) {
+      Logger.warn('marker option "html" is deprecated, and will be removed in a future version. Use "popup.html".');
       markerOptions.popup = markerOptions.popup || {};
       markerOptions.popup!.html = markerOptions.html;
     }
@@ -114,6 +122,9 @@ class RadarMarker extends maplibregl.Marker {
       if (markerOptions.popup.html) {
         popup.setHTML(markerOptions.popup.html);
       }
+      if (markerOptions.popup.element) {
+        popup.setDOMContent(markerOptions.popup.element);
+      }
 
       this.setPopup(popup);
     }