npm - radar-sdk-js - Versions diffs - 4.2.0-beta.3 → 4.2.0-beta.5 - Mend

radar-sdk-js 4.2.0-beta.3 → 4.2.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md CHANGED Viewed

@@ -56,7 +56,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
 Add the following script in your `html` file
 ```html
-<script src="https://js.radar.com/v4.2.0-beta.3/radar.min.js"></script>
+<script src="https://js.radar.com/v4.2.0-beta.5/radar.min.js"></script>
 ```
 Then initialize the Radar SDK
@@ -73,8 +73,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.2.0-beta.3/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0-beta.3/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.2.0-beta.5/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.2.0-beta.5/radar.min.js"></script>
   </head>
   <body>
@@ -98,8 +98,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.2.0-beta.3/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0-beta.3/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.2.0-beta.5/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.2.0-beta.5/radar.min.js"></script>
   </head>
   <body>
@@ -130,8 +130,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.2.0-beta.3/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0-beta.3/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.2.0-beta.5/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.2.0-beta.5/radar.min.js"></script>
   </head>
   <body>

package/dist/radar.js CHANGED Viewed

@@ -409,7 +409,7 @@ class Navigator {
     }
 }
-var SDK_VERSION = '4.2.0-beta.3';
+var SDK_VERSION = '4.2.0-beta.5';
 class Http {
     static request({ method, path, data, host, versioned = true, headers = {}, }) {
@@ -465,6 +465,9 @@ class Http {
                 Object.entries(allHeaders).forEach(([key, val]) => {
                     xhr.setRequestHeader(key, val);
                 });
+                if (allHeaders['Content-Type'] === 'image/png') {
+                    xhr.responseType = 'blob';
+                }
                 xhr.onload = () => {
                     var _a;
                     let response;
@@ -1406,73 +1409,6 @@ class VerifyAPI {
     }
 }
-const defaultMarkerOptions = {
-    color: '#000257',
-};
-class RadarMarker extends maplibregl.Marker {
-    constructor(markerOptions) {
-        const maplibreOptions = Object.assign({}, defaultMarkerOptions);
-        if (markerOptions.color) {
-            maplibreOptions.color = markerOptions.color;
-        }
-        if (markerOptions.element) {
-            maplibreOptions.element = markerOptions.element;
-        }
-        if (markerOptions.scale) {
-            maplibreOptions.scale = markerOptions.scale;
-        }
-        if (markerOptions.image) {
-            const element = document.createElement('div');
-            element.style.backgroundImage = `url(${markerOptions.image.url})`;
-            element.style.width = markerOptions.image.width;
-            element.style.height = markerOptions.image.height;
-            maplibreOptions.element = element;
-        }
-        super(maplibreOptions);
-        if (markerOptions.image) {
-            this._image = markerOptions.image;
-        }
-        // set popup text or HTML
-        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);
-            this.setPopup(popup);
-        }
-    }
-    addTo(map) {
-        if (map._customMarkerRawSvg && !this._image) {
-            this._element.innerHTML = map._customMarkerRawSvg;
-        }
-        map._markers.push(this);
-        return super.addTo(map);
-    }
-    remove() {
-        if (this._map) {
-            this._map._markers = this._map._markers.filter((marker) => marker !== this);
-        }
-        return super.remove();
-    }
-    getOptions() {
-        const markerOptions = {
-            // TODO: element: marker.getElement(),
-            image: this._image,
-            color: this._color,
-            scale: this._scale,
-            offset: this.getOffset(),
-            anchor: this._anchor,
-            draggable: this.isDraggable(),
-            clickTolerance: this._clickTolerance,
-            rotation: this.getRotation(),
-            rotationAlignment: this.getRotationAlignment(),
-            pitchAlignment: this.getPitchAlignment()
-        };
-        return markerOptions;
-    }
-}
 const RADAR_LOGO_URL = 'https://api.radar.io/maps/static/images/logo.svg';
 class RadarLogoControl {
     onAdd() {
@@ -1574,43 +1510,124 @@ class RadarMap extends maplibregl.Map {
         };
         this.on('resize', onResize);
         this.on('load', onResize);
-        const onStyleLoad = () => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            this._customMarkerRawSvg = undefined;
-            const style = this.getStyle();
-            const customMarkers = (_a = style.metadata) === null || _a === void 0 ? void 0 : _a['radar:customMarkers'];
-            if (Array.isArray(customMarkers) && customMarkers.length > 0) {
-                const customMarker = customMarkers[0]; // only support one custom marker for now
-                try {
-                    const markerRawSvg = yield Http.request({
-                        method: 'GET',
-                        versioned: false,
-                        path: `maps/markers/${customMarker.id}`,
-                        headers: {
-                            'Content-Type': 'image/svg+xml',
-                        },
-                    });
-                    this._customMarkerRawSvg = markerRawSvg.data;
-                }
-                catch (err) {
-                    Logger.warn(`Error getting custom marker: ${customMarker.id} - using default marker.`);
-                }
+    }
+    getMarkers() {
+        return this._markers;
+    }
+}
+const defaultMarkerOptions = {
+    color: '#000257',
+};
+const fileExtensionToContentType = {
+    svg: 'image/svg+xml',
+    png: 'image/png',
+};
+const getFileExtension = (file) => {
+    return file.split('.').pop() || '';
+};
+const createImageElement = (options) => {
+    const element = document.createElement('img');
+    element.src = options.url;
+    if (options.width) {
+        element.width = options.width;
+    }
+    if (options.height) {
+        element.height = options.height;
+    }
+    element.style.maxWidth = '64px';
+    element.style.maxHeight = '64px';
+    return element;
+};
+class RadarMarker extends maplibregl.Marker {
+    constructor(markerOptions) {
+        const maplibreOptions = Object.assign({}, defaultMarkerOptions);
+        if (markerOptions.color) {
+            maplibreOptions.color = markerOptions.color;
+        }
+        if (markerOptions.element) {
+            maplibreOptions.element = markerOptions.element;
+        }
+        if (markerOptions.scale) {
+            maplibreOptions.scale = markerOptions.scale;
+        }
+        if (markerOptions.image) {
+            maplibreOptions.element = createImageElement(markerOptions.image);
+        }
+        super(maplibreOptions);
+        if (markerOptions.image) {
+            this._image = markerOptions.image;
+        }
+        if (markerOptions.customMarkerId) {
+            const ext = getFileExtension(markerOptions.customMarkerId);
+            if (ext !== 'svg' && ext !== 'png') {
+                Logger.error(`Invalid custom marker extension ${ext} - falling back to default marker`);
             }
-            // set markers if necessary
-            this._markers.forEach((marker) => {
-                if (this._customMarkerRawSvg && !marker._image) {
-                    // set custom marker
-                    marker._element.innerHTML = this._customMarkerRawSvg;
-                }
-                else {
-                    const markerOptions = marker.getOptions();
-                    const newMarker = new RadarMarker(markerOptions); // get default element
-                    // set default element
-                    marker._element.innerHTML = newMarker._element.innerHTML;
-                }
-            });
-        });
-        this.on('styledata', onStyleLoad);
+            else {
+                this._customMarkerId = markerOptions.customMarkerId;
+                const originalElement = this._element.cloneNode(true);
+                this._element.childNodes.forEach((child) => {
+                    child.remove();
+                });
+                const contentType = fileExtensionToContentType[ext];
+                Http.request({
+                    method: 'GET',
+                    versioned: false,
+                    path: `maps/PlACEHOLDER/markers/${markerOptions.customMarkerId}`,
+                    headers: {
+                        'Content-Type': contentType,
+                    },
+                }).then((res) => {
+                    if (res.data instanceof Blob) {
+                        // png returns a Blob
+                        const customMarkerUrl = URL.createObjectURL(res.data);
+                        this._element.replaceChildren(createImageElement({ url: customMarkerUrl }));
+                    }
+                    else {
+                        // svg returns an xml string
+                        this._element.innerHTML = res.data;
+                    }
+                }).catch((err) => {
+                    Logger.error(`Could not get custom marker: ${err.message} - falling back to default marker`);
+                    this._element.replaceChildren(...originalElement.childNodes);
+                });
+            }
+        }
+        // set popup text or HTML
+        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);
+            this.setPopup(popup);
+        }
+    }
+    addTo(map) {
+        map._markers.push(this);
+        return super.addTo(map);
+    }
+    remove() {
+        if (this._map) {
+            this._map._markers = this._map._markers.filter((marker) => marker !== this);
+        }
+        return super.remove();
+    }
+    getOptions() {
+        const markerOptions = {
+            // TODO: element: marker.getElement(),
+            image: this._image,
+            color: this._color,
+            scale: this._scale,
+            offset: this.getOffset(),
+            anchor: this._anchor,
+            draggable: this.isDraggable(),
+            clickTolerance: this._clickTolerance,
+            rotation: this.getRotation(),
+            rotationAlignment: this.getRotationAlignment(),
+            pitchAlignment: this.getPitchAlignment()
+        };
+        return markerOptions;
     }
 }

package/dist/radar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"radar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts CHANGED Viewed

@@ -345,13 +345,14 @@ export interface RadarMapOptions extends maplibregl.MapOptions {
 }
 export interface RadarMarkerImage {
     url: string;
-    width: string;
-    height: string;
+    width?: number;
+    height?: number;
 }
 export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
     text?: string;
     html?: string;
     image?: RadarMarkerImage;
+    customMarkerId?: string;
 }
 export interface RadarAutocompleteUIOptions {
     container: string | HTMLElement;

package/dist/ui/RadarMap.d.ts CHANGED Viewed

@@ -5,5 +5,6 @@ declare class RadarMap extends maplibregl.Map {
     _customMarkerRawSvg: string | undefined;
     _markers: RadarMarker[];
     constructor(mapOptions: RadarMapOptions);
+    getMarkers(): RadarMarker[];
 }
 export default RadarMap;

package/dist/ui/RadarMarker.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
 declare class RadarMarker extends maplibregl.Marker {
     _map: RadarMap;
     _image?: RadarMarkerImage;
+    _customMarkerId?: string;
     constructor(markerOptions: RadarMarkerOptions);
     addTo(map: RadarMap): this;
     remove(): this;

package/dist/version.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-declare const _default: "4.2.0-beta.3";
+declare const _default: "4.2.0-beta.5";
 export default _default;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "radar-sdk-js",
-  "version": "4.2.0-beta.3",
+  "version": "4.2.0-beta.5",
   "description": "Web Javascript SDK for Radar, location infrastructure for mobile and web apps.",
   "homepage": "https://radar.com",
   "type": "module",

package/src/http.ts CHANGED Viewed

@@ -105,6 +105,10 @@ class Http {
         xhr.setRequestHeader(key, val);
       });
+      if (allHeaders['Content-Type'] === 'image/png') {
+        xhr.responseType = 'blob';
+      }
       xhr.onload = () => {
         let response: any;
         try {

package/src/types.ts CHANGED Viewed

@@ -460,14 +460,15 @@ export interface RadarMapOptions extends maplibregl.MapOptions {
 export interface RadarMarkerImage {
   url: string;
-  width: string;
-  height: string;
+  width?: number;
+  height?: number;
 }
 export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
   text?: string;
   html?: string;
   image?: RadarMarkerImage;
+  customMarkerId?: string;
 }
 export interface RadarAutocompleteUIOptions {

package/src/ui/RadarMap.ts CHANGED Viewed

@@ -1,11 +1,10 @@
 import maplibregl from 'maplibre-gl';
 import RadarMarker from './RadarMarker';
+import RadarLogoControl from './RadarLogoControl';
 import Config from '../config';
-import Http from '../http';
 import Logger from '../logger';
-import RadarLogoControl from './RadarLogoControl';
 import type { RadarOptions, RadarMapOptions } from '../types';
@@ -121,44 +120,10 @@ class RadarMap extends maplibregl.Map {
     };
     this.on('resize', onResize);
     this.on('load', onResize);
+  }
-    const onStyleLoad = async () => {
-      this._customMarkerRawSvg = undefined;
-      const style = this.getStyle();
-      const customMarkers = (style.metadata as any)?.['radar:customMarkers'];
-      if (Array.isArray(customMarkers) && customMarkers.length > 0) {
-        const customMarker = customMarkers[0]; // only support one custom marker for now
-        try {
-          const markerRawSvg = await Http.request({
-            method: 'GET',
-            versioned: false,
-            path: `maps/markers/${customMarker.id}`,
-            headers: {
-              'Content-Type': 'image/svg+xml',
-            },
-          });
-          this._customMarkerRawSvg = markerRawSvg.data;
-        } catch (err) {
-          Logger.warn(`Error getting custom marker: ${customMarker.id} - using default marker.`);
-        }
-      }
-      // set markers if necessary
-      this._markers.forEach((marker) => {
-        if (this._customMarkerRawSvg && !marker._image) {
-          // set custom marker
-          marker._element.innerHTML = this._customMarkerRawSvg;
-        } else {
-          const markerOptions = marker.getOptions();
-          const newMarker = new RadarMarker(markerOptions); // get default element
-          // set default element
-          marker._element.innerHTML = newMarker._element.innerHTML;
-        }
-      });
-    }
-    this.on('styledata', onStyleLoad);
+  getMarkers(): RadarMarker[] {
+    return this._markers;
   }
 };

package/src/ui/RadarMarker.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 import maplibregl from 'maplibre-gl';
+import Http from '../http';
+import Logger from '../logger';
 import type RadarMap from './RadarMap';
 import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
@@ -8,9 +11,32 @@ const defaultMarkerOptions: maplibregl.MarkerOptions = {
   color: '#000257',
 };
+const fileExtensionToContentType: Record<string, string> = {
+  svg: 'image/svg+xml',
+  png: 'image/png',
+};
+const getFileExtension = (file: string): string => {
+  return file.split('.').pop() || '';
+}
+const createImageElement = (options: RadarMarkerImage) => {
+  const element = document.createElement('img');
+  element.src = options.url;
+  if (options.width) {
+    element.width = options.width;
+  }
+  if (options.height) {
+    element.height = options.height;
+  }
+  element.style.maxWidth = '64px';
+  element.style.maxHeight = '64px';
+  return element;
+}
 class RadarMarker extends maplibregl.Marker {
   _map!: RadarMap;
   _image?: RadarMarkerImage;
+  _customMarkerId?: string;
   constructor(markerOptions: RadarMarkerOptions) {
     const maplibreOptions: maplibregl.MarkerOptions = Object.assign({}, defaultMarkerOptions);
@@ -25,12 +51,7 @@ class RadarMarker extends maplibregl.Marker {
       maplibreOptions.scale = markerOptions.scale;
     }
     if (markerOptions.image) {
-      const element = document.createElement('div');
-      element.style.backgroundImage = `url(${markerOptions.image.url})`;
-      element.style.width = markerOptions.image.width;
-      element.style.height = markerOptions.image.height;
-      maplibreOptions.element = element;
+      maplibreOptions.element = createImageElement(markerOptions.image);
     }
     super(maplibreOptions);
@@ -39,6 +60,42 @@ class RadarMarker extends maplibregl.Marker {
       this._image = markerOptions.image;
     }
+    if (markerOptions.customMarkerId) {
+      const ext = getFileExtension(markerOptions.customMarkerId);
+      if (ext !== 'svg' && ext !== 'png') {
+        Logger.error(`Invalid custom marker extension ${ext} - falling back to default marker`);
+      } else {
+        this._customMarkerId = markerOptions.customMarkerId;
+        const originalElement = this._element.cloneNode(true);
+        this._element.childNodes.forEach((child) => {
+          child.remove();
+        });
+        const contentType = fileExtensionToContentType[ext];
+        Http.request({
+          method: 'GET',
+          versioned: false,
+          path: `maps/PlACEHOLDER/markers/${markerOptions.customMarkerId}`,
+          headers: {
+            'Content-Type': contentType,
+          },
+        }).then((res) => {
+          if (res.data instanceof Blob) {
+            // png returns a Blob
+            const customMarkerUrl = URL.createObjectURL(res.data);
+            this._element.replaceChildren(createImageElement({ url: customMarkerUrl }));
+          } else {
+            // svg returns an xml string
+            this._element.innerHTML = res.data;
+          }
+        }).catch((err) => {
+          Logger.error(`Could not get custom marker: ${err.message} - falling back to default marker`);
+          this._element.replaceChildren(...originalElement.childNodes);
+        });
+      }
+    }
     // set popup text or HTML
     if (markerOptions.text) {
       const popup = new maplibregl.Popup({ offset: 35 }).setText(markerOptions.text);
@@ -50,9 +107,6 @@ class RadarMarker extends maplibregl.Marker {
   }
   addTo(map: RadarMap) {
-    if (map._customMarkerRawSvg && !this._image) {
-      this._element.innerHTML = map._customMarkerRawSvg;
-    }
     map._markers.push(this);
     return super.addTo(map);
   }

package/src/version.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export default '4.2.0-beta.3';
1	+ export default '4.2.0-beta.5';