Add support for new radar styles (#117)

* add support for new radar styles * add beta version
radarlabs · Aug 7, 2023 · 3af8925 · 3af8925
1 parent 986f580
commit 3af8925
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
 
 Add the following script in your `html` file
 ```html
-<script src="https://js.radar.com/v4.1.1/radar.min.js"></script>
+<script src="https://js.radar.com/v4.1.2-beta.0/radar.min.js"></script>
 ```
 
 Then initialize the Radar SDK
@@ -74,8 +74,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.1.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.1.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.1.2-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.1.2-beta.0/radar.min.js"></script>
   </head>
 
   <body>
@@ -99,8 +99,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.1.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.1.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.1.2-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.1.2-beta.0/radar.min.js"></script>
   </head>
 
   <body>
@@ -131,8 +131,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.1.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.1.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.1.2-beta.0/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.1.2-beta.0/radar.min.js"></script>
   </head>
 
   <body>

diff --git a/demo/views/display-a-map.hbs b/demo/views/display-a-map.hbs
@@ -12,7 +12,13 @@
   </div>
 
   <div>
-    <div id="map" style="width: 100%; height: 500px; display: none;"></div>
+    <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>
+        <option value="radar-light-v1">radar-light-v1</option>
+        <option value="radar-dark-v1">radar-dark-v1</option>
+      </select>
+    </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>
     </div>
@@ -43,6 +49,11 @@
     });
   };
 
+  // change styles
+  $('#style').on('change', (e) => {
+    console.log('Setting map style:', e.target.value);
+    map.setStyle(e.target.value);
+  });
 
   // initalize map on api key changes
   $('#publishableKey').on('change', () => {
@@ -52,3 +63,19 @@
     }
   });
 </script>
+
+<style>
+  select {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 180px !important;
+    appearance: none;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAOCAYAAAFC/+zoAAAABGdBTUEAALGPC/xhBQAAAlVJREFUOBHFVE1oE0EUnre7TauiRYN/gYJU86NQk2BFDdmIIKL04k1Q6qkXxYPgURDEmwfPQg+CIHipBryIvWVDEIl2kxDNplUsPYgHL0pbjbszvjd1J7sxEW/OIfu9b773XuZ7s8tYYAHh0kJLALBvirfq7XEZlGxnXbEkw7WRYjsPKFabBEr1xZOKKNVaV1QQABoIdj2YSrj69uNeWbdcb1/kHn9ECYVsSnIqGZvrKkAA+D9PC4/PA4OvZjY5Gtz0cdl2LnAhHjNgq6qcZTsPsdo0iSJGZM/xifHPyL1DLkWcmUnqAMBVApG0Ks2lA27HXSSMm1UzmzpKOLReNj7sDhF9AqvmXCYa8Pg/8WlohnYmP5GY76NlcgxCjAxp+hHNiBgHScRd/gJNvhtMqAoxJL1FMU709Yl0/I08Q7MpIl86zg8pBnhVyCSP0ZTRvffE4WHv4aFvSCxFv3+w9XcmxDBZLJjYJgUaO2emU8993R8uWXbLEYIlSLB5eCQ2eWjfJ1888GnVWmf969Urkh3KNWeGczGLwTKAPpXPxJu9wn+JK42lnOd6RRxglIF23kzHnwFekzxekyIWiAaKuGjN1UI2ORvgBkJroX2TgbgTOgXACs52SnlUaa7scDtrTxkThVAlYHNGdMt0bmys+8qhwKovb2d8fQ79PBXU48SKm3ZtvTQZi60RrxoERTi9Wzi920EOhdI+TYdRsgGnurO7D54GcC2fSdzvchuobwNfNMA+f5sumLQhd3h/o0uG0V8b+FKyz+usPsEvj/zW9Nrg6/7L8xcjHfmQXhIJDAAAAABJRU5ErkJggg==');
+    background-size: 12px;
+    background-position: calc(100% - 20px) center;
+    background-repeat: no-repeat;
+    padding-right: 45px;
+    z-index: 1;
+  }
+</style>
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.1.1",
+  "version": "4.1.2-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/ui/map.ts b/src/ui/map.ts
@@ -7,6 +7,12 @@ import type { RadarOptions, RadarMapOptions, RadarMarkerOptions } from '../types
 
 const DEFAULT_STYLE = 'radar-default-v1';
 
+const RADAR_STYLES = [
+  'radar-default-v1',
+  'radar-light-v1',
+  'radar-dark-v1',
+];
+
 const RADAR_LOGO_URL = 'https://api.radar.io/maps/static/images/logo.svg';
 
 const defaultMaplibreOptions: Partial<maplibregl.MapOptions> = {
@@ -28,9 +34,12 @@ const createStyleURL = (options: RadarOptions, style: string = DEFAULT_STYLE) =>
 
 // use formatted style URL if using one of Radar's out-of-the-box styles
 const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => {
-  if (!mapOptions.style || mapOptions.style === DEFAULT_STYLE) {
-    return createStyleURL(options, mapOptions.style);
+  const style = mapOptions.style;
+
+  if (!style || (typeof style === 'string' && RADAR_STYLES.includes(style))) {
+    return createStyleURL(options, mapOptions.style as string);
   }
+
   return mapOptions.style;
 };
 
@@ -50,14 +59,24 @@ class MapUI {
     const style = getStyle(options, mapOptions);
     const maplibreOptions: maplibregl.MapOptions = Object.assign({},
       defaultMaplibreOptions,
-      { style },
       mapOptions,
+      { style },
     );
     Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
 
     // set container
     maplibreOptions.container = mapOptions.container;
 
+    // custom request handler for Radar styles
+    maplibreOptions.transformRequest = (url, resourceType) => {
+      if (resourceType === 'Style' && RADAR_STYLES.includes(url)) {
+        const radarStyleURL = createStyleURL(options, url);
+        return { url: radarStyleURL };
+      } else {
+        return { url };
+      }
+    };
+
     // create map
     const map = new maplibregl.Map(maplibreOptions);
     const container = map.getContainer();

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export default '4.1.1';
+export default '4.1.2-beta.0';