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

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

@@ -344,15 +344,20 @@ export interface RadarSearchGeofencesParams {
 export interface RadarSearchGeofencesResponse extends RadarResponse {
     geofences: RadarGeofence[];
 }
-export interface RadarMapOptions extends maplibregl.MapOptions {
-    container: string | HTMLElement;
+export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformRequest'> {
+    languages?: string[];
+    navigatorFallbackLanguage?: string;
+}
+export interface RadarMarkerImage {
+    url?: string;
+    radarMarkerId?: string;
+    width?: number;
+    height?: number;
 }
-export interface RadarMarkerOptions {
-    color?: string;
+export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
     text?: string;
     html?: string;
-    element?: HTMLElement;
-    scale?: number;
+    image?: RadarMarkerImage;
 }
 export interface RadarAutocompleteUIOptions {
     container: string | HTMLElement;

package/dist/ui/RadarLogoControl.d.ts

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

package/dist/ui/RadarMap.d.ts

@@ -0,0 +1,11 @@
+import maplibregl from 'maplibre-gl';
+import RadarMarker from './RadarMarker';
+import type { RadarMapOptions } from '../types';
+declare class RadarMap extends maplibregl.Map {
+    _markers: RadarMarker[];
+    constructor(mapOptions: RadarMapOptions);
+    addMarker(marker: RadarMarker): void;
+    removeMarker(marker: RadarMarker): void;
+    getMarkers(): RadarMarker[];
+}
+export default RadarMap;

package/dist/ui/RadarMarker.d.ts

@@ -0,0 +1,11 @@
+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;
+    constructor(markerOptions: RadarMarkerOptions);
+    addTo(map: RadarMap): this;
+    remove(): this;
+}
+export default RadarMarker;

package/dist/ui/map.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="mapbox__point-geometry" />
+import RadarMap from './RadarMap';
+import RadarMarker from './RadarMarker';
 import type { RadarMapOptions, RadarMarkerOptions } from '../types';
 declare class MapUI {
     static getMapLibre(): {
@@ -45,7 +47,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): maplibregl.Map;
-    static createMarker(markerOptions?: RadarMarkerOptions): maplibregl.Marker;
+    static createMap(mapOptions: RadarMapOptions): RadarMap;
+    static createMarker(markerOptions?: RadarMarkerOptions): RadarMarker;
 }
 export default MapUI;

package/dist/util/_.d.ts

@@ -0,0 +1,2 @@
+export declare const deepEqual: (obj1: any, obj2: any) => boolean;
+export declare const uniq: <T extends unknown>(arr: T[]) => T[];

package/dist/util/mapStyle.d.ts

@@ -0,0 +1,2 @@
+import { RadarMapOptions } from '../types';
+export declare const transformMapStyle: (styleJSON: any, options: Pick<RadarMapOptions, 'languages' | 'navigatorFallbackLanguage'>) => any;

package/dist/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radar-sdk-js",
-  "version": "4.2.1-beta.2",
+  "version": "4.3.0-beta.1",
   "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 reqToken = await signJWT(payload, dk);
+      const token = await signJWT(payload, dk);
 
       response = await Http.request({
         host,
         method: 'POST',
         path: 'track',
         data: {
-          token: reqToken,
+          token,
         },
         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;
-      }
+        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;
-      }
+        const trackRes = {
+          user,
+          events,
+          location,
+          token,
+          expiresAt,
+          expiresIn,
+          passed,
+        } as RadarTrackVerifiedResponse;
+
+        if (options.debug) {
+          trackRes.response = response;
+        }
 
-      return trackRes;
+        return trackRes;
+      }
     }
 
     response = await Http.request({

package/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,7 +163,7 @@ class Http {
         }
       }
 
-      xhr.onerror = function() {
+      xhr.onerror = function () {
         if (host && (host === 'http://localhost:52516' || host === 'https://radar-verify.com:52516')) {
           reject(new RadarVerifyAppError());
         } else {
@@ -160,7 +171,7 @@ class Http {
         }
       }
 
-      xhr.ontimeout = function() {
+      xhr.ontimeout = function () {
         reject(new RadarVerifyAppError());
       }
 

package/src/types.ts

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

package/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;

package/src/ui/RadarMap.ts

@@ -0,0 +1,155 @@
+import maplibregl from 'maplibre-gl';
+
+import RadarMarker from './RadarMarker';
+import RadarLogoControl from './RadarLogoControl';
+
+import Config from '../config';
+import Logger from '../logger';
+import SDK_VERSION from '../version';
+
+import { transformMapStyle } from '../util/mapStyle';
+
+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 defaultMapOptions: Partial<RadarMapOptions> = {
+  minZoom: 1,
+  maxZoom: 20,
+  attributionControl: false,
+  dragRotate: false,
+  touchPitch: false,
+  maplibreLogo: false,
+  navigatorFallbackLanguage: 'en',
+};
+
+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) => {
+  if (RADAR_STYLES.includes(style)) { // Radar built-in style
+    return true;
+  }
+  if (!/^(http:|https:)/.test(style)) { // Radar custom style (not a URL)
+    return true;
+  }
+  return false;
+};
+
+// 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; // style object or URL
+};
+
+class RadarMap extends maplibregl.Map {
+  _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: RadarMapOptions = Object.assign({},
+      defaultMapOptions,
+      mapOptions,
+      { style },
+    );
+    Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
+
+    (maplibreOptions as maplibregl.MapOptions).transformRequest = (url, resourceType) => {
+      if (resourceType === 'Style' && isRadarStyle(url)) {
+        url = createStyleURL(config, url);
+      }
+
+      let headers = {
+        'Authorization': config.publishableKey,
+        'X-Radar-Device-Type': 'Web',
+        'X-Radar-SDK-Version': SDK_VERSION,
+      };
+      if (typeof config.getRequestHeaders === 'function') {
+        headers = Object.assign(headers, config.getRequestHeaders());
+      }
+
+      return { url, 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');
+        }
+      }
+    };
+
+    const onStyleLoad = (e: maplibregl.MapStyleDataEvent) => {
+      const styleJSON = (e as any).style?.stylesheet; // for some reason, style does not exist in the types
+      if (!styleJSON) {
+        Logger.warn('style data not available');
+        return;
+      }
+
+      // transform text-field expressions to use local language
+      const newStyleJSON = transformMapStyle(styleJSON, maplibreOptions);
+      this.setStyle(newStyleJSON);
+    };
+    this.on('resize', onResize);
+    this.on('load', onResize);
+    this.on('styledata', onStyleLoad);
+  }
+
+  addMarker(marker: RadarMarker) {
+    this._markers.push(marker);
+  }
+
+  removeMarker(marker: RadarMarker) {
+    this._markers = this._markers.filter((mapMarker: RadarMarker) => mapMarker !== marker);
+  }
+
+  getMarkers(): RadarMarker[] {
+    return this._markers;
+  }
+};
+
+export default RadarMap;

package/src/ui/RadarMarker.ts

@@ -0,0 +1,126 @@
+import maplibregl from 'maplibre-gl';
+
+import Http from '../http';
+import Logger from '../logger';
+
+import type RadarMap from './RadarMap';
+
+import type { RadarMarkerImage, RadarMarkerOptions } from '../types';
+
+const defaultMarkerOptions: maplibregl.MarkerOptions = {
+  color: '#000257',
+};
+
+const fileExtensionToContentType: Record<string, string> = {
+  svg: 'image/svg+xml',
+  png: 'image/png',
+};
+
+const getFileExtension = (file: string): string => {
+  return file.split('.').pop() || '';
+}
+
+const createImageElement = (options: RadarMarkerImage) => {
+  const element = document.createElement('img');
+  element.src = options.url!;
+
+  if (options.width) {
+    element.width = options.width;
+  }
+  if (options.height) {
+    element.height = options.height;
+  }
+  if (!options.width && !options.height) {
+    element.style.maxWidth = '64px';
+    element.style.maxHeight = '64px';
+  }
+  return element;
+}
+class RadarMarker extends maplibregl.Marker {
+  _map!: RadarMap;
+  _image?: RadarMarkerImage;
+
+  constructor(markerOptions: RadarMarkerOptions) {
+    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;
+    }
+
+    super(maplibreOptions);
+
+    if (markerOptions.image) {
+      this._image = markerOptions.image;
+
+      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({ url: markerObject }));
+      };
+
+      const onError = (err: any) => {
+        Logger.error(`Could not load marker: ${err.message} - falling back to default marker`);
+        this._element.replaceChildren(...Array.from(originalElement.childNodes));
+      }
+
+      if (markerOptions.image.url) {
+        fetch(markerOptions.image.url)
+          .then(res => {
+            if (res.status === 200) {
+              res.blob()
+                .then(onSuccess)
+                .catch(onError);
+            } else {
+              onError(new Error(res.statusText));
+            }
+          })
+          .catch(onError)
+      }
+
+      if (markerOptions.image.radarMarkerId) {
+        // fetch custom marker
+        Http.request({
+          method: 'GET',
+          version: 'maps',
+          path: `markers/${markerOptions.image.radarMarkerId}`,
+          responseType: 'blob',
+        })
+          .then(({ data }) => onSuccess(data))
+          .catch(onError);
+      }
+    }
+
+    // set popup text or HTML
+    if (markerOptions.text) {
+      const popup = new maplibregl.Popup({ offset: 35 }).setText(markerOptions.text);
+      this.setPopup(popup);
+    } else if (markerOptions.html) {
+      const popup = new maplibregl.Popup({ offset: 35 }).setHTML(markerOptions.html);
+      this.setPopup(popup);
+    }
+  }
+
+  addTo(map: RadarMap) {
+    map.addMarker(this);
+    return super.addTo(map);
+  }
+
+  remove() {
+    if (this._map) {
+      this._map.removeMarker(this);
+    }
+    return super.remove();
+  }
+}
+
+export default RadarMarker;