Re-use url object in cache (#183)

* re-use url object in cache * handle case where no popup is attached * bump version
radarlabs · Sep 12, 2024 · a4607de · a4607de
1 parent 7d9c9c5
commit a4607de
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -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.2/radar.min.js"></script>
+<script src="https://js.radar.com/v4.4.3-beta.1/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.2/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.2/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.4.3-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.4.3-beta.1/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.2/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.2/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.4.3-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.4.3-beta.1/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.2/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.4.2/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.4.3-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.4.3-beta.1/radar.min.js"></script>
   </head>
 
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "radar-sdk-js",
-  "version": "4.4.2",
+  "version": "4.4.3-beta.1",
   "description": "Web Javascript SDK for Radar, location infrastructure for mobile and web apps.",
   "homepage": "https://radar.com",
   "type": "module",

diff --git a/src/ui/RadarMarker.ts b/src/ui/RadarMarker.ts
@@ -30,9 +30,9 @@ interface ImageOptions {
 }
 
 // cache URL loaded markers
-const IMAGE_CACHE = new Map<string, 'pending' | 'failed' | Blob>();
+const IMAGE_CACHE = new Map<string, string>();
 
-const useCachedImage = (url: string, timeoutMS: number = 5000): Promise<Blob> => new Promise((resolve, reject) => {
+const useCachedImage = (url: string, timeoutMS: number = 5000): Promise<string> => new Promise((resolve, reject) => {
   if (!IMAGE_CACHE.has(url)) { // nothing in cache
     IMAGE_CACHE.set(url, 'pending'); // request in flight
     return reject('miss');
@@ -50,9 +50,9 @@ const useCachedImage = (url: string, timeoutMS: number = 5000): Promise<Blob> =>
       clearInterval(interval);
       reject('failed');
 
-    } else { // return data
+    } else if (cachedData !== undefined) { // return data
       clearInterval(interval);
-      resolve(cachedData as Blob);
+      resolve(cachedData);
     }
   }, 100);
 });
@@ -114,12 +114,11 @@ class RadarMarker extends maplibregl.Marker {
         child.remove();
       });
 
-      const onSuccess = (blob: Blob) => {
-        const markerObject = URL.createObjectURL(blob);
+      const onSuccess = (url: string) => {
         this._element.replaceChildren(createImageElement({
           width: markerOptions.width,
           height: markerOptions.height,
-          url: markerObject,
+          url,
         }));
       };
 
@@ -137,8 +136,9 @@ class RadarMarker extends maplibregl.Marker {
               if (res.status === 200) {
                 res.blob()
                   .then((data) => {
-                    IMAGE_CACHE.set(markerOptions.url as string, data); // cache data
-                    onSuccess(data);
+                    const url = URL.createObjectURL(data);
+                    IMAGE_CACHE.set(markerOptions.url as string, url); // cache data
+                    onSuccess(url);
                   })
                   .catch(onError);
               } else {
@@ -169,8 +169,9 @@ class RadarMarker extends maplibregl.Marker {
             responseType: 'blob',
           })
             .then(({ data }) => {
-              IMAGE_CACHE.set(markerOptions.marker as string, data); // cache data
-              onSuccess(data)
+              const url = URL.createObjectURL(data);
+              IMAGE_CACHE.set(markerOptions.marker as string, url); // cache data
+              onSuccess(url)
             })
             .catch(onError);
         };
@@ -226,7 +227,7 @@ class RadarMarker extends maplibregl.Marker {
         if (this.getPopup()) {
           // close any other open popups
           (this._map.getMarkers() || []).forEach((otherMarker) => {
-            if (otherMarker.getPopup().isOpen()) {
+            if (otherMarker.getPopup()?.isOpen()) {
               otherMarker.togglePopup();
             }
           });

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export default '4.4.2';
+export default '4.4.3-beta.1';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export default '4.4.2';
		export default '4.4.3-beta.1';