npm - radar-sdk-js - Versions diffs - 4.4.1 → 4.5.0-beta.0 - Mend

radar-sdk-js 4.4.1 → 4.5.0-beta.0

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 (10) 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.4.1/radar.min.js"></script>
+<script src="https://js.radar.com/v4.5.0-beta.0/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.4.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.5.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.5.0-beta.0/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.4.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.5.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.5.0-beta.0/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.4.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.5.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.5.0-beta.0/radar.min.js"></script>
   </head>
   <body>

package/dist/radar.js CHANGED Viewed

@@ -405,7 +405,7 @@ class Navigator {
     }
 }
-var SDK_VERSION = '4.4.1';
+var SDK_VERSION = '4.5.0-beta.0';
 const inFlightRequests = new Map();
 class Http {
@@ -2106,6 +2106,14 @@ class RadarMap extends maplibregl.Map {
         };
         this.on('resize', onResize);
         this.on('load', onResize);
+        // parse radar metadata from style
+        this.on('style.load', () => {
+            const style = this.getStyle();
+            const metadata = style.metadata || {};
+            if (metadata['radar:marker']) { // default marker associated with custom style
+                this._defaultMarker = metadata['radar:marker'];
+            }
+        });
     }
     addMarker(marker) {
         this._markers.push(marker);
@@ -2249,78 +2257,10 @@ class RadarMarker extends maplibregl.Marker {
             maplibreOptions.scale = markerOptions.scale;
         }
         super(maplibreOptions);
+        this._options = markerOptions;
         // 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();
-            });
-            const onSuccess = (blob) => {
-                const markerObject = URL.createObjectURL(blob);
-                this._element.replaceChildren(createImageElement({
-                    width: markerOptions.width,
-                    height: markerOptions.height,
-                    url: markerObject,
-                }));
-            };
-            const onError = (err) => {
-                Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
-                IMAGE_CACHE.set(markerOptions.url, 'failed'); // mark as failed
-                this._element.replaceChildren(...Array.from(originalElement.childNodes));
-            };
-            // custom URL image
-            if (markerOptions.url) {
-                const loadImage = () => {
-                    fetch(markerOptions.url)
-                        .then(res => {
-                        if (res.status === 200) {
-                            res.blob()
-                                .then((data) => {
-                                IMAGE_CACHE.set(markerOptions.url, data); // cache data
-                                onSuccess(data);
-                            })
-                                .catch(onError);
-                        }
-                        else {
-                            onError(new Error(res.statusText));
-                        }
-                    })
-                        .catch(onError);
-                };
-                // attempt to use cached data, otherwise fetch marker image data from URL
-                useCachedImage(markerOptions.url)
-                    .then(onSuccess)
-                    .catch((reason) => {
-                    if (reason !== 'miss') {
-                        Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
-                    }
-                    loadImage();
-                });
-            }
-            // Radar hosted image
-            if (markerOptions.marker) {
-                const loadMarker = () => {
-                    Http.request({
-                        method: 'GET',
-                        version: 'maps',
-                        path: `markers/${markerOptions.marker}`,
-                        responseType: 'blob',
-                    })
-                        .then(({ data }) => {
-                        IMAGE_CACHE.set(markerOptions.url, data); // cache data
-                        onSuccess(data);
-                    })
-                        .catch(onError);
-                };
-                useCachedImage(markerOptions.marker)
-                    .then(onSuccess)
-                    .catch((reason) => {
-                    if (reason !== 'miss') {
-                        Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
-                    }
-                    loadMarker();
-                });
-            }
+            this.getCustomImage(markerOptions);
         }
         // handle deprecated popup options
         if (markerOptions.text) {
@@ -2367,7 +2307,88 @@ class RadarMarker extends maplibregl.Marker {
             });
         }
     }
+    // load marker image from a URL or as a Radar asset (custom styles)
+    getCustomImage(markerOptions) {
+        const originalElement = this._element.cloneNode(true);
+        this._element.childNodes.forEach((child) => {
+            child.remove();
+        });
+        const onSuccess = (blob) => {
+            const markerObject = URL.createObjectURL(blob);
+            this._element.replaceChildren(createImageElement({
+                width: markerOptions.width,
+                height: markerOptions.height,
+                url: markerObject,
+            }));
+        };
+        const onError = (err) => {
+            Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
+            IMAGE_CACHE.set(markerOptions.url, 'failed'); // mark as failed
+            this._element.replaceChildren(...Array.from(originalElement.childNodes));
+        };
+        // custom URL image
+        if (markerOptions.url) {
+            const loadImage = () => {
+                fetch(markerOptions.url)
+                    .then(res => {
+                    if (res.status === 200) {
+                        res.blob()
+                            .then((data) => {
+                            IMAGE_CACHE.set(markerOptions.url, data); // cache data
+                            onSuccess(data);
+                        })
+                            .catch(onError);
+                    }
+                    else {
+                        onError(new Error(res.statusText));
+                    }
+                })
+                    .catch(onError);
+            };
+            // attempt to use cached data, otherwise fetch marker image data from URL
+            useCachedImage(markerOptions.url)
+                .then(onSuccess)
+                .catch((reason) => {
+                if (reason !== 'miss') {
+                    Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
+                }
+                loadImage();
+            });
+        }
+        // Radar hosted image
+        if (markerOptions.marker) {
+            const loadMarker = () => {
+                Http.request({
+                    method: 'GET',
+                    version: 'maps',
+                    path: `markers/${markerOptions.marker}`,
+                    responseType: 'blob',
+                })
+                    .then(({ data }) => {
+                    IMAGE_CACHE.set(markerOptions.url, data); // cache data
+                    onSuccess(data);
+                })
+                    .catch(onError);
+            };
+            useCachedImage(markerOptions.marker)
+                .then(onSuccess)
+                .catch((reason) => {
+                if (reason !== 'miss') {
+                    Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
+                }
+                loadMarker();
+            });
+        }
+    }
     addTo(map) {
+        // use default marker associated with map style, if none is provided in options
+        // (and custom style has an associated marker)
+        const markerOptions = this._options;
+        if (!markerOptions.url && !markerOptions.marker && !markerOptions.color) {
+            if (map._defaultMarker) {
+                this.getCustomImage(Object.assign(Object.assign({}, markerOptions), { marker: map._defaultMarker }));
+            }
+        }
         map.addMarker(this);
         return super.addTo(map);
     }

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/ui/RadarMap.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import type { RadarMapOptions, RadarLineOptions, RadarPolylineOptions, RadarPoly
 declare class RadarMap extends maplibregl.Map {
     _markers: RadarMarker[];
     _features: RadarMapFeature[];
+    _defaultMarker?: string;
     constructor(radarMapOptions: RadarMapOptions);
     addMarker(marker: RadarMarker): void;
     removeMarker(marker: RadarMarker): void;

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

@@ -2,8 +2,10 @@ import maplibregl from 'maplibre-gl';
 import type RadarMap from './RadarMap';
 import type { RadarMarkerOptions } from '../types';
 declare class RadarMarker extends maplibregl.Marker {
+    _options: RadarMarkerOptions;
     _map: RadarMap;
     constructor(markerOptions: RadarMarkerOptions);
+    getCustomImage(markerOptions: RadarMarkerOptions): void;
     addTo(map: RadarMap): this;
     remove(): this;
 }

package/dist/version.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-declare const _default: "4.4.1";
+declare const _default: "4.5.0-beta.0";
 export default _default;

package/package.json CHANGED Viewed

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

package/src/ui/RadarMap.ts CHANGED Viewed

@@ -80,6 +80,7 @@ const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => {
 class RadarMap extends maplibregl.Map {
   _markers: RadarMarker[] = [];
   _features: RadarMapFeature[] = [];
+  _defaultMarker?: string;
   constructor(radarMapOptions: RadarMapOptions) {
     const config = Config.get();
@@ -152,6 +153,16 @@ class RadarMap extends maplibregl.Map {
     };
     this.on('resize', onResize);
     this.on('load', onResize);
+    // parse radar metadata from style
+    this.on('style.load', () => {
+      const style = this.getStyle();
+      const metadata: any = style.metadata || {};
+      if (metadata['radar:marker']) { // default marker associated with custom style
+        this._defaultMarker = metadata['radar:marker'];
+      }
+    });
   }
   addMarker(marker: RadarMarker) {

package/src/ui/RadarMarker.ts CHANGED Viewed

@@ -89,6 +89,7 @@ const defaultMarkerOptions: RadarMarkerOptions = {
 };
 class RadarMarker extends maplibregl.Marker {
+  _options: RadarMarkerOptions;
   _map!: RadarMap;
   constructor(markerOptions: RadarMarkerOptions) {
@@ -107,83 +108,11 @@ class RadarMarker extends maplibregl.Marker {
     super(maplibreOptions);
+    this._options = markerOptions;
     // 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();
-      });
-      const onSuccess = (blob: Blob) => {
-        const markerObject = URL.createObjectURL(blob);
-        this._element.replaceChildren(createImageElement({
-          width: markerOptions.width,
-          height: markerOptions.height,
-          url: markerObject,
-        }));
-      };
-      const onError = (err: any) => {
-        Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
-        IMAGE_CACHE.set(markerOptions.url as string, 'failed'); // mark as failed
-        this._element.replaceChildren(...Array.from(originalElement.childNodes));
-      }
-      // custom URL image
-      if (markerOptions.url) {
-        const loadImage = () => { // fetch marker data from URL
-          fetch(markerOptions.url as string)
-            .then(res => {
-              if (res.status === 200) {
-                res.blob()
-                  .then((data) => {
-                    IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
-                    onSuccess(data);
-                  })
-                  .catch(onError);
-              } else {
-                onError(new Error(res.statusText));
-              }
-            })
-            .catch(onError)
-        };
-        // attempt to use cached data, otherwise fetch marker image data from URL
-        useCachedImage(markerOptions.url)
-          .then(onSuccess)
-          .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
-            if (reason !== 'miss') {
-              Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
-            }
-            loadImage();
-          });
-      }
-      // Radar hosted image
-      if (markerOptions.marker) {
-        const loadMarker = () => {
-          Http.request({
-            method: 'GET',
-            version: 'maps',
-            path: `markers/${markerOptions.marker}`,
-            responseType: 'blob',
-          })
-            .then(({ data }) => {
-              IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
-              onSuccess(data)
-            })
-            .catch(onError);
-        };
-        useCachedImage(markerOptions.marker as string)
-          .then(onSuccess)
-          .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
-            if (reason !== 'miss') {
-              Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
-            }
-            loadMarker();
-          });
-      }
+      this.getCustomImage(markerOptions);
     }
     // handle deprecated popup options
@@ -238,7 +167,98 @@ class RadarMarker extends maplibregl.Marker {
     }
   }
+  // load marker image from a URL or as a Radar asset (custom styles)
+  getCustomImage(markerOptions: RadarMarkerOptions) {
+    const originalElement = this._element.cloneNode(true);
+    this._element.childNodes.forEach((child) => {
+      child.remove();
+    });
+    const onSuccess = (blob: Blob) => {
+      const markerObject = URL.createObjectURL(blob);
+      this._element.replaceChildren(createImageElement({
+        width: markerOptions.width,
+        height: markerOptions.height,
+        url: markerObject,
+      }));
+    };
+    const onError = (err: any) => {
+      Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
+      IMAGE_CACHE.set(markerOptions.url as string, 'failed'); // mark as failed
+      this._element.replaceChildren(...Array.from(originalElement.childNodes));
+    }
+    // custom URL image
+    if (markerOptions.url) {
+      const loadImage = () => { // fetch marker data from URL
+        fetch(markerOptions.url as string)
+          .then(res => {
+            if (res.status === 200) {
+              res.blob()
+                .then((data) => {
+                  IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
+                  onSuccess(data);
+                })
+                .catch(onError);
+            } else {
+              onError(new Error(res.statusText));
+            }
+          })
+          .catch(onError)
+      };
+      // attempt to use cached data, otherwise fetch marker image data from URL
+      useCachedImage(markerOptions.url)
+        .then(onSuccess)
+        .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
+          if (reason !== 'miss') {
+            Logger.debug(`RadarMarker: cache lookup for ${markerOptions.url}: ${reason}`);
+          }
+          loadImage();
+        });
+    }
+    // Radar hosted image
+    if (markerOptions.marker) {
+      const loadMarker = () => {
+        Http.request({
+          method: 'GET',
+          version: 'maps',
+          path: `markers/${markerOptions.marker}`,
+          responseType: 'blob',
+        })
+          .then(({ data }) => {
+            IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
+            onSuccess(data)
+          })
+          .catch(onError);
+      };
+      useCachedImage(markerOptions.marker as string)
+        .then(onSuccess)
+        .catch((reason: 'miss' | 'timedout' | 'failed' | Error) => {
+          if (reason !== 'miss') {
+            Logger.debug(`RadarMarker: cache lookup for ${markerOptions.marker} ${reason}`);
+          }
+          loadMarker();
+        });
+    }
+  }
   addTo(map: RadarMap) {
+    // use default marker associated with map style, if none is provided in options
+    // (and custom style has an associated marker)
+    const markerOptions = this._options;
+    if (!markerOptions.url && !markerOptions.marker && !markerOptions.color) {
+      if (map._defaultMarker) {
+        this.getCustomImage({
+          ...markerOptions,
+          marker: map._defaultMarker,
+        });
+      }
+    }
     map.addMarker(this);
     return super.addTo(map);
   }

package/src/version.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export default '4.4.1';
1	+ export default '4.5.0-beta.0';