Radar map UI kit refactor (#153)

* support custom style * custom markers * Maplibre control radar logo * bump version * refactor mapui kit by inheriting maplibre-gl - bump tsconfig target from es2015->es2016 for compatibility with class inheritence * pass request header override in map transformRequest * version bump * include custom style id in marker request * new marker logic * Delete .vscode directory * add .vscode/ to .gitignore * bump version * bump version * update transformRequest and add custom styles to demo page * marker updates * remove `getOptions` from `RadarMarker` * better way to handle custom markers and image urls * add custom url input to marker demo page * compliation target changes and copy changes * set beta version --------- Co-authored-by: Craig Kochis <[email protected]>
radarlabs · May 9, 2024 · 6b6d40e · 6b6d40e
1 parent 0c2f659
commit 6b6d40e
Show file tree

Hide file tree

Showing 14 changed files with 407 additions and 184 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,4 @@ cdn/
 coverage/
 site/
 .nyc_output/
+.vscode/
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.2.0/radar.min.js"></script>
+<script src="https://js.radar.com/v4.3.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.2.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.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.2.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.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.2.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.2.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.0-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.0-beta.0/radar.min.js"></script>
   </head>
 
   <body>

diff --git a/demo/views/add-a-marker.hbs b/demo/views/add-a-marker.hbs
@@ -12,6 +12,8 @@
           </div>
 
           <div>
+            <input id="imageUrl" class="form-control form-control-sm mb-3" data-bs-placement="bottom" data-bs-title="Set your remote marker URL" type="text" placeholder="URL for marker image" />
+
             <div id="map" style="width: 100%; height: 500px; display: none;"></div>
             <div id="map-warning" style="width: 100%; height: 500px; background: #f7fafc;">
               <p style="color: #697386; font-weight: bold; text-align: center; padding-top: 220px;">Add publishable key to see map</p>
@@ -37,12 +39,28 @@
               container: 'map',
             });
 
+            let marker;
             map.on('load', () => {
               const { lat, lng } = map.getCenter();
 
-              const marker = Radar.ui.marker({ text: `${lat}, ${lng}` })
+              marker = Radar.ui.marker({ text: `${lat}, ${lng}` })
                 .setLngLat([lng, lat])
                 .addTo(map);
+
+              // use custom marker from URL
+              $('#imageUrl').on('change', (e) => {
+                const url = e.target.value;
+                if (marker) {
+                  marker.remove();
+                }
+                const { lat, lng } = map.getCenter();
+                marker = Radar.ui.marker({
+                  image: { url },
+                  text: `${lat}, ${lng}`,
+                })
+                  .setLngLat([lng, lat])
+                  .addTo(map);
+              });
             });
 
             map.on('error', (err) => {
@@ -59,4 +77,5 @@
               init(publishableKey);
             }
           });
+
         </script>
diff --git a/demo/views/display-a-map.hbs b/demo/views/display-a-map.hbs
@@ -12,6 +12,8 @@
   </div>
 
   <div>
+    <input id="customStyleID" class="form-control form-control-sm mb-3" data-bs-placement="bottom" data-bs-title="Set your custom style ID" type="text" placeholder="Radar style ID" />
+
     <div id="map" style="width: 100%; height: 500px; display: none; position: relative;">
       <select id="style" class="form-control" value="radar-default-v1">
         <option value="radar-default-v1">radar-default-v1</option>
@@ -39,8 +41,28 @@
       map.remove();
     }
 
+    // handle style in URL
+    let style = 'radar-default-v1';
+    const url = new URL(location.href);
+    const styleId = url.searchParams.get('style');
+    if (styleId) {
+      style = styleId;
+      $('#customStyleID').val(styleId);
+    }
+
     map = Radar.ui.map({
       container: 'map',
+      style,
+    });
+
+    map.on('load', () => {
+      // grab style from URL
+      const url = new URL(location.href);
+      const styleId = url.searchParams.get('style');
+      if (styleId) {
+        $('#customStyleID').val(styleId);
+        $('#customStyleID').trigger('change');
+      }
     });
 
     map.on('error', (err) => {
@@ -55,6 +77,15 @@
     map.setStyle(e.target.value);
   });
 
+  $('#customStyleID').on('change', (e) => {
+    const styleId = e.target.value;
+    console.log('Setting map style:', styleId);
+    const url = new URL(location.href);
+    url.searchParams.set('style', styleId);
+    history.replaceState(null, '', url);
+    map.setStyle(styleId);
+  });
+
   // initalize map on api key changes
   $('#publishableKey').on('change', () => {
     const publishableKey = $('#publishableKey').val();

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.2.0",
+  "version": "4.3.0-beta.0",
   "description": "Web Javascript SDK for Radar, location infrastructure for mobile and web apps.",
   "homepage": "https://radar.com",
   "type": "module",

diff --git a/src/http.ts b/src/http.ts
@@ -31,13 +31,17 @@ class Http {
     path,
     data,
     host,
-    headers,
+    version,
+    headers = {},
+    responseType,
   }: {
     method: HttpMethod;
     path: string;
     data?: any;
     host?: string;
+    version?: string;
     headers?: Record<string, string>;
+    responseType?: XMLHttpRequestResponseType;
   }) {
     return new Promise<HttpResponse>((resolve, reject) => {
       const options = Config.get();
@@ -51,8 +55,8 @@ class Http {
 
       // setup request URL
       const urlHost = host || options.host;
-      const version = options.version;
-      let url = `${urlHost}/${version}/${path}`;
+      const urlVersion = version || options.version;
+      let url = `${urlHost}/${urlVersion}/${path}`;
 
       // remove undefined values from request data
       let body: any = {};
@@ -78,32 +82,39 @@ class Http {
       const xhr = new XMLHttpRequest();
       xhr.open(method, url, true);
 
-      // set standard headers
-      xhr.setRequestHeader('Authorization', publishableKey);
-      xhr.setRequestHeader('Content-Type', 'application/json');
-      xhr.setRequestHeader('X-Radar-Device-Type', 'Web');
-      xhr.setRequestHeader('X-Radar-SDK-Version', SDK_VERSION);
-
-      // set passed custom headers if present
-      if (headers) {
-        Object.keys(headers).forEach(key => {
-          const val = headers[key];
-          xhr.setRequestHeader(key, val);
-        });
-      }
+      const defaultHeaders = {
+        'Authorization': publishableKey,
+        'Content-Type': 'application/json',
+        'X-Radar-Device-Type': 'Web',
+        'X-Radar-SDK-Version': SDK_VERSION,
+      };
 
-      // set config custom headers if present
+      // set custom config headers if present
+      let configHeaders: { [key: string]: string } = {};
       if (typeof options.getRequestHeaders === 'function') {
-        const headers: { [key: string]: string } = options.getRequestHeaders();
-        Object.keys(headers || {}).forEach((key) => {
-          xhr.setRequestHeader(key, headers[key]);
-        });
+        configHeaders = options.getRequestHeaders();
+      }
+
+      // combines default headers with custom headers and config headers
+      const allHeaders = Object.assign(defaultHeaders, configHeaders, headers);
+
+      // set headers
+      Object.keys(allHeaders).forEach((key) => {
+        xhr.setRequestHeader(key, allHeaders[key]);
+      });
+
+      if (responseType) {
+        xhr.responseType = responseType;
       }
 
       xhr.onload = () => {
         let response: any;
         try {
-          response = JSON.parse(xhr.response);
+          if (xhr.responseType === 'blob') {
+            response = { code: xhr.status, data: xhr.response };
+          } else {
+            response = JSON.parse(xhr.response);
+          }
         } catch (e) {
           return reject(new RadarServerError(response));
         }
@@ -152,15 +163,15 @@ class Http {
         }
       }
 
-      xhr.onerror = function() {
+      xhr.onerror = function () {
         if (host && (host === 'http://localhost:52516' || host === 'https://radar-verify.com:52516')) {
           reject(new RadarVerifyAppError());
         } else {
           reject(new RadarServerError());
         }
       }
 
-      xhr.ontimeout = function() {
+      xhr.ontimeout = function () {
         reject(new RadarVerifyAppError());
       }
 

diff --git a/src/types.ts b/src/types.ts
@@ -459,16 +459,21 @@ export interface RadarSearchGeofencesResponse extends RadarResponse {
   geofences: RadarGeofence[];
 }
 
-export interface RadarMapOptions extends maplibregl.MapOptions {
+export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformRequest'> {
   container: string | HTMLElement;
 }
 
-export interface RadarMarkerOptions {
-  color?: string;
+export interface RadarMarkerImage {
+  url?: string;
+  radarMarkerId?: string;
+  width?: number;
+  height?: number;
+}
+
+export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
   text?: string;
   html?: string;
-  element?: HTMLElement;
-  scale?: number;
+  image?: RadarMarkerImage;
 }
 
 export interface RadarAutocompleteUIOptions {

diff --git a/src/ui/RadarLogoControl.ts b/src/ui/RadarLogoControl.ts
@@ -0,0 +1,24 @@
+const RADAR_LOGO_URL = 'https://api.radar.io/maps/static/images/logo.svg';
+
+class RadarLogoControl {
+  link: HTMLAnchorElement | undefined;
+
+  onAdd() {
+    const img = document.createElement('img');
+    img.src = RADAR_LOGO_URL;
+
+    this.link = document.createElement('a');
+    this.link.id = 'radar-map-logo';
+    this.link.href = 'https://radar.com?ref=powered_by_radar';
+    this.link.target = '_blank';
+    this.link.appendChild(img);
+
+    return this.link;
+  }
+
+  onRemove() {
+    this.link?.remove();
+  }
+}
+
+export default RadarLogoControl;