radar-sdk-js 4.2.1-beta.1 → 4.2.1-beta.2

package/dist/radar.js.map

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

package/dist/types.d.ts

@@ -347,16 +347,12 @@ export interface RadarSearchGeofencesResponse extends RadarResponse {
 export interface RadarMapOptions extends maplibregl.MapOptions {
     container: string | HTMLElement;
 }
-export interface RadarMarkerImage {
-    url: string;
-    width?: number;
-    height?: number;
-}
-export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
+export interface RadarMarkerOptions {
+    color?: string;
     text?: string;
     html?: string;
-    image?: RadarMarkerImage;
-    customMarkerId?: string;
+    element?: HTMLElement;
+    scale?: number;
 }
 export interface RadarAutocompleteUIOptions {
     container: string | HTMLElement;

package/dist/ui/map.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="mapbox__point-geometry" />
-import RadarMap from './RadarMap';
-import RadarMarker from './RadarMarker';
 import type { RadarMapOptions, RadarMarkerOptions } from '../types';
 declare class MapUI {
     static getMapLibre(): {
@@ -47,7 +45,7 @@ declare class MapUI {
         addProtocol(customProtocol: string, loadFn: (requestParameters: import("maplibre-gl").RequestParameters, callback: import("maplibre-gl").ResponseCallback<any>) => import("maplibre-gl").Cancelable): void;
         removeProtocol(customProtocol: string): void;
     };
-    static createMap(mapOptions: RadarMapOptions): RadarMap;
-    static createMarker(markerOptions?: RadarMarkerOptions): RadarMarker;
+    static createMap(mapOptions: RadarMapOptions): maplibregl.Map;
+    static createMarker(markerOptions?: RadarMarkerOptions): maplibregl.Marker;
 }
 export default MapUI;

package/dist/version.d.ts

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

package/package.json

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

package/src/api/track.ts

@@ -137,14 +137,14 @@ class TrackAPI {
         }),
       };
       
-      const token = await signJWT(payload, dk);
+      const reqToken = await signJWT(payload, dk);
 
       response = await Http.request({
         host,
         method: 'POST',
         path: 'track',
         data: {
-          token,
+          token: reqToken,
         },
         headers: {
           'X-Radar-Body-Is-Token': 'true',
@@ -160,33 +160,33 @@ class TrackAPI {
           sclVal,
           cslVal,
         };
+      }
 
-        let { user, events, token, expiresAt } = response;
-        const location = { latitude, longitude, accuracy };
-        let passed;
-        let expiresIn;
-        if (expiresAt) {
-          expiresAt = new Date(expiresAt);
-          passed = user?.fraud?.passed && user?.country?.passed && user?.state?.passed;
-          expiresIn = (expiresAt.getTime() - Date.now()) / 1000;
-        }
-
-        const trackRes = {
-          user,
-          events,
-          location,
-          token,
-          expiresAt,
-          expiresIn,
-          passed,
-        } as RadarTrackVerifiedResponse;
-
-        if (options.debug) {
-          trackRes.response = response;
-        }
+      let { user, events, token, expiresAt } = response;
+      const location = { latitude, longitude, accuracy };
+      let passed;
+      let expiresIn;
+      if (expiresAt) {
+        expiresAt = new Date(expiresAt);
+        passed = user?.fraud?.passed && user?.country?.passed && user?.state?.passed;
+        expiresIn = (expiresAt.getTime() - Date.now()) / 1000;
+      }
 
-        return trackRes;
+      const trackRes = {
+        user,
+        events,
+        location,
+        token,
+        expiresAt,
+        expiresIn,
+        passed,
+      } as RadarTrackVerifiedResponse;
+
+      if (options.debug) {
+        trackRes.response = response;
       }
+
+      return trackRes;
     }
 
     response = await Http.request({

package/src/http.ts

@@ -31,14 +31,12 @@ class Http {
     path,
     data,
     host,
-    versioned = true,
-    headers = {},
+    headers,
   }: {
     method: HttpMethod;
     path: string;
     data?: any;
     host?: string;
-    versioned?: boolean;
     headers?: Record<string, string>;
   }) {
     return new Promise<HttpResponse>((resolve, reject) => {
@@ -56,10 +54,6 @@ class Http {
       const version = options.version;
       let url = `${urlHost}/${version}/${path}`;
 
-      if (!versioned) {
-        url = `${urlHost}/${path}`;
-      }
-
       // remove undefined values from request data
       let body: any = {};
       Object.keys(data || {}).forEach((key) => {
@@ -84,39 +78,32 @@ class Http {
       const xhr = new XMLHttpRequest();
       xhr.open(method, url, true);
 
-      const defaultHeaders = {
-        'Authorization': publishableKey,
-        'Content-Type': 'application/json',
-        'X-Radar-Device-Type': 'Web',
-        'X-Radar-SDK-Version': SDK_VERSION,
-      };
-
-      // set custom config headers if present
-      let configHeaders: { [key: string]: string } = {};
-      if (typeof options.getRequestHeaders === 'function') {
-        configHeaders = options.getRequestHeaders();
+      // 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);
+        });
       }
 
-      // combines default headers with custom headers and config headers
-      const allHeaders = Object.assign(defaultHeaders, headers, configHeaders);
-
-      // set headers 
-      Object.entries(allHeaders).forEach(([key, val]) => {
-        xhr.setRequestHeader(key, val);
-      });
-
-      if (allHeaders['Content-Type'] === 'image/png') {
-        xhr.responseType = 'blob';
+      // set config custom headers if present
+      if (typeof options.getRequestHeaders === 'function') {
+        const headers: { [key: string]: string } = options.getRequestHeaders();
+        Object.keys(headers || {}).forEach((key) => {
+          xhr.setRequestHeader(key, headers[key]);
+        });
       }
 
       xhr.onload = () => {
         let response: any;
         try {
-          if (allHeaders['Content-Type'] === 'application/json') {
-            response = JSON.parse(xhr.response);
-          } else {
-            response = { code: xhr.status, data: xhr.response };
-          }
+          response = JSON.parse(xhr.response);
         } catch (e) {
           return reject(new RadarServerError(response));
         }

package/src/types.ts

@@ -463,17 +463,12 @@ export interface RadarMapOptions extends maplibregl.MapOptions {
   container: string | HTMLElement;
 }
 
-export interface RadarMarkerImage {
-  url: string;
-  width?: number;
-  height?: number;
-}
-
-export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
+export interface RadarMarkerOptions {
+  color?: string;
   text?: string;
   html?: string;
-  image?: RadarMarkerImage;
-  customMarkerId?: string;
+  element?: HTMLElement;
+  scale?: number;
 }
 
 export interface RadarAutocompleteUIOptions {

package/src/ui/map.ts

@@ -1,25 +1,157 @@
 import maplibregl from 'maplibre-gl';
 
-import RadarMap from './RadarMap';
-import RadarMarker from './RadarMarker';
+import Config from '../config';
+import Logger from '../logger';
 
-import type { RadarMapOptions, RadarMarkerOptions } from '../types';
+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> = {
+  minZoom: 1,
+  maxZoom: 20,
+  attributionControl: false,
+  dragRotate: false,
+  touchPitch: false,
+  maplibreLogo: false,
+};
+
+const defaultMarkerOptions: Partial<maplibregl.MarkerOptions> = {
+  color: '#000257',
+};
+
+const createStyleURL = (options: RadarOptions, style: string = DEFAULT_STYLE) => (
+  `${options.host}/maps/styles/${style}?publishableKey=${options.publishableKey}`
+);
+
+// use formatted style URL if using one of Radar's out-of-the-box styles
+const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => {
+  const style = mapOptions.style;
+
+  if (!style || (typeof style === 'string' && RADAR_STYLES.includes(style))) {
+    return createStyleURL(options, mapOptions.style as string);
+  }
+
+  return mapOptions.style;
+};
 
 class MapUI {
   public static getMapLibre() {
     return maplibregl;
   }
 
-  public static createMap(mapOptions: RadarMapOptions): RadarMap {
-    const radarMap = new RadarMap(mapOptions);
+  public static createMap(mapOptions: RadarMapOptions): maplibregl.Map {
+    const options = Config.get();
+
+    if (!options.publishableKey) {
+      Logger.warn('publishableKey not set. Call Radar.initialize() with key before creating a new map.');
+    }
+
+    // configure maplibre options
+    const style = getStyle(options, mapOptions);
+    const maplibreOptions: maplibregl.MapOptions = Object.assign({},
+      defaultMaplibreOptions,
+      mapOptions,
+      { style },
+    );
+    Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
 
-    return radarMap;
+    // 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();
+
+    if (!container.style.width && !container.style.height) {
+      Logger.warn('map container does not have a set "width" or "height"');
+    }
+
+    // add radar logo
+    const img = document.createElement('img');
+    img.src = RADAR_LOGO_URL;
+
+    const link = document.createElement('a');
+    link.id = 'radar-map-logo';
+    link.href = 'https://radar.com?ref=powered_by_radar';
+    link.target = '_blank';
+    link.style.position = 'absolute';
+    link.style.bottom = '0';
+    link.style.left = '5px';
+    link.style.width = '80px';
+    link.style.height = '38px';
+    link.appendChild(img)
+    map.getContainer().appendChild(link);
+
+    // add attribution
+    const attribution = new maplibregl.AttributionControl({ compact: false });
+    map.addControl(attribution, 'bottom-right');
+
+    // add zoom controls
+    const nav = new maplibregl.NavigationControl({ showCompass: false });
+    map.addControl(nav, 'bottom-right');
+
+    // handle map resize actions
+    const onResize = () => {
+      const attrib = document.querySelector('.maplibregl-ctrl-attrib');
+      if (attrib) {
+        const width = map.getContainer().clientWidth;
+        if (width < 380) {
+          attrib.classList.add('hidden');
+        } else {
+          attrib.classList.remove('hidden');
+        }
+      }
+    };
+    map.on('resize', onResize);
+    map.on('load', onResize);
+
+    return map;
   }
 
-  public static createMarker(markerOptions: RadarMarkerOptions = {}): RadarMarker {
-    const radarMarker = new RadarMarker(markerOptions);
+  public static createMarker(markerOptions: RadarMarkerOptions = {}): maplibregl.Marker {
+    const maplibreOptions: maplibregl.MarkerOptions = Object.assign({}, defaultMarkerOptions);
+
+    if (markerOptions.color) {
+      maplibreOptions.color = markerOptions.color;
+    }
+    if (markerOptions.element) {
+      maplibreOptions.element = markerOptions.element;
+    }
+    if (markerOptions.scale) {
+      maplibreOptions.scale = markerOptions.scale;
+    }
+
+    const marker = new maplibregl.Marker(maplibreOptions);
+
+    // set popup text or HTML
+    if (markerOptions.text) {
+      const popup = new maplibregl.Popup({ offset: 35 }).setText(markerOptions.text);
+      marker.setPopup(popup);
+    } else if (markerOptions.html) {
+      const popup = new maplibregl.Popup({ offset: 35 }).setHTML(markerOptions.html);
+      marker.setPopup(popup);
+    }
 
-    return radarMarker;
+    return marker;
   }
 }
 

package/src/version.ts

@@ -1 +1 @@
-export default '4.2.1-beta.1';
+export default '4.2.1-beta.2';

package/dist/ui/RadarLogoControl.d.ts

@@ -1,6 +0,0 @@
-declare class RadarLogoControl {
-    link: HTMLAnchorElement | undefined;
-    onAdd(): HTMLAnchorElement;
-    onRemove(): void;
-}
-export default RadarLogoControl;

package/dist/ui/RadarMap.d.ts

@@ -1,10 +0,0 @@
-import maplibregl from 'maplibre-gl';
-import RadarMarker from './RadarMarker';
-import type { RadarMapOptions } from '../types';
-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

@@ -1,13 +0,0 @@
-import maplibregl from 'maplibre-gl';
-import type RadarMap from './RadarMap';
-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;
-    getOptions(): RadarMarkerOptions;
-}
-export default RadarMarker;

package/src/ui/RadarLogoControl.ts

@@ -1,24 +0,0 @@
-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;

package/src/ui/RadarMap.ts

@@ -1,130 +0,0 @@
-import maplibregl from 'maplibre-gl';
-
-import RadarMarker from './RadarMarker';
-import RadarLogoControl from './RadarLogoControl';
-
-import Config from '../config';
-import Logger from '../logger';
-
-import type { RadarOptions, RadarMapOptions } from '../types';
-
-const DEFAULT_STYLE = 'radar-default-v1';
-
-const RADAR_STYLES = [
-  'radar-default-v1',
-  'radar-light-v1',
-  'radar-dark-v1',
-];
-
-const defaultMaplibreOptions: Partial<maplibregl.MapOptions> = {
-  minZoom: 1,
-  maxZoom: 20,
-  attributionControl: false,
-  dragRotate: false,
-  touchPitch: false,
-  maplibreLogo: false,
-};
-
-const uuidRegex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-
-const createStyleURL = (options: RadarOptions, style: string = DEFAULT_STYLE) => (
-  `${options.host}/maps/styles/${style}?publishableKey=${options.publishableKey}`
-);
-
-/** Check if style is a Radar style or a custom style */
-const isRadarStyle = (style: string) => {
-  return RADAR_STYLES.includes(style) || uuidRegex.test(style)
-};
-
-/** Use formatted style URL if using one of Radar's out-of-the-box styles or is a Radar custom style */
-const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => {
-  const style = mapOptions.style;
-
-  if (!style || (typeof style === 'string' && isRadarStyle(style))) {
-    return createStyleURL(options, style);
-  }
-
-  return mapOptions.style;
-};
-
-class RadarMap extends maplibregl.Map {
-  _customMarkerRawSvg: string | undefined;
-  _markers: RadarMarker[] = [];
-
-  constructor(mapOptions: RadarMapOptions) {
-    const config = Config.get();
-
-    if (!config.publishableKey) {
-      Logger.warn('publishableKey not set. Call Radar.initialize() with key before creating a new map.');
-    }
-
-    // configure maplibre options
-    const style = getStyle(config, mapOptions);
-    const maplibreOptions: maplibregl.MapOptions = Object.assign({},
-      defaultMaplibreOptions,
-      mapOptions,
-      { style },
-    );
-    Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
-
-    // custom request handler for Radar styles
-    maplibreOptions.transformRequest = (url, resourceType) => {
-      let radarStyleURL = url;
-      let headers = { 'Authorization': config.publishableKey };
-      if (resourceType === 'Style' && isRadarStyle(url)) {
-        radarStyleURL = createStyleURL(config, url);
-      }
-
-      if (mapOptions.transformRequest) {
-        return mapOptions.transformRequest(radarStyleURL, resourceType);
-      }
-
-      if (typeof config.getRequestHeaders === 'function') {
-        headers = Object.assign(headers, config.getRequestHeaders());
-      }
-
-      return { url: radarStyleURL, headers };
-    };
-
-    super(maplibreOptions);
-
-    const container = this.getContainer();
-
-    if (!container.style.width && !container.style.height) {
-      Logger.warn('map container does not have a set "width" or "height"');
-    }
-
-    // add radar logo
-    const radarLogo = new RadarLogoControl();
-    this.addControl(radarLogo, 'bottom-left');
-
-    // add attribution
-    const attribution = new maplibregl.AttributionControl({ compact: false });
-    this.addControl(attribution, 'bottom-right');
-
-    // add zoom controls
-    const nav = new maplibregl.NavigationControl({ showCompass: false });
-    this.addControl(nav, 'bottom-right');
-
-    // handle map resize actions
-    const onResize = () => {
-      const attrib = document.querySelector('.maplibregl-ctrl-attrib');
-      if (attrib) {
-        const width = this.getContainer().clientWidth;
-        if (width < 380) {
-          attrib.classList.add('hidden');
-        } else {
-          attrib.classList.remove('hidden');
-        }
-      }
-    };
-    this.on('resize', onResize);
-    this.on('load', onResize);
-  }
-
-  getMarkers(): RadarMarker[] {
-    return this._markers;
-  }
-};
-
-export default RadarMap;