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

package/src/ui/map.ts

@@ -1,157 +1,23 @@
 import maplibregl from 'maplibre-gl';
 
-import Config from '../config';
-import Logger from '../logger';
+import RadarMap from './RadarMap';
+import RadarMarker from './RadarMarker';
 
-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;
-};
+import type { RadarMapOptions, RadarMarkerOptions } from '../types';
 
 class MapUI {
   public static getMapLibre() {
     return maplibregl;
   }
 
-  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)}`);
-
-    // 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 createMap(mapOptions: RadarMapOptions): RadarMap {
+    const radarMap = new RadarMap(mapOptions);
+    return radarMap;
   }
 
-  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 marker;
+  public static createMarker(markerOptions: RadarMarkerOptions = {}): RadarMarker {
+    const radarMarker = new RadarMarker(markerOptions);
+    return radarMarker;
   }
 }
 

package/src/util/_.ts

@@ -0,0 +1,30 @@
+//check if value is primitive
+const isPrimitive = (obj: any) => {
+  return (obj !== Object(obj));
+}
+
+export const deepEqual = (obj1: any, obj2: any) => {
+
+  if (obj1 === obj2) // it's just the same object. No need to compare.
+    return true;
+
+  if (isPrimitive(obj1) && isPrimitive(obj2)) // compare primitives
+    return obj1 === obj2;
+
+  if (Object.keys(obj1).length !== Object.keys(obj2).length)
+    return false;
+
+  // compare objects with same number of keys
+  for (let key in obj1) {
+    if (!(key in obj2)) return false; //other object doesn't have this prop
+    if (!deepEqual(obj1[key], obj2[key])) return false;
+  }
+
+  return true;
+}
+
+export const uniq = <T extends any>(arr: T[]): T[] => {
+  const outputArray: T[] = arr.filter((v, i, self) => i === self.indexOf(v));
+
+  return outputArray;
+}

package/src/util/mapStyle.ts

@@ -0,0 +1,85 @@
+import * as _ from './_';
+
+import Logger from '../logger';
+
+import { RadarMapOptions } from '../types';
+
+// NOTE(jasonl): ENSURE THIS STAYS IN SYNC WITH THE SERVER IMPLEMENTATION
+const RADAR_LANGUAGE_EXPR = ['get', 'radar:name_client_language'];
+
+/** get an array of languages set in the browser in RFC 5646 format */
+const getBrowserLanguages = (options = { fallback: 'en', format: 'RFC-5646' }) => {
+  let languagesRFC5646 = [options.fallback];
+  if (navigator.languages.length > 0) {
+    languagesRFC5646 = [...navigator.languages];
+  } else if (navigator.language) {
+    languagesRFC5646 = [navigator.language];
+  }
+
+  if (options.format === 'ISO-639-1') {
+    // RFC 5646 format is always prefixed by the ISO 639-1 language code so we need to strip that out
+    const languagesISO6391 = _.uniq(languagesRFC5646.map(l => l.split('-')[0]));
+    return languagesISO6391;
+  }
+
+  return languagesRFC5646;
+};
+
+const replaceAllValuesInExpression = (expr: any, target: any[], value: any[]): any => {
+  if (target.length !== value.length) {
+    Logger.warn('replaceAllValueInExpression: Target and value arrays must be the same length');
+    return expr;
+  }
+
+  const findIndex = target.findIndex((t) => _.deepEqual(t, expr));
+  if (findIndex !== -1) {
+    return value[findIndex];
+  }
+
+  if (Array.isArray(expr)) {
+    return expr.map((e) => replaceAllValuesInExpression(e, target, value));
+  }
+
+  return expr;
+};
+
+export const transformMapStyle = (styleJSON: any, options: Pick<RadarMapOptions, 'languages' | 'navigatorFallbackLanguage'>): any => {
+  let languages: string[] = [];
+
+  // use browser language if style language is set to local
+  if (styleJSON?.metadata?.['radar:language'] === 'local') {
+    const fallbackLanguage = options.navigatorFallbackLanguage || 'en';
+    languages = getBrowserLanguages({ fallback: fallbackLanguage, format: 'ISO-639-1' });
+  }
+
+  // client set language takes precedence
+  if (options.languages) {
+    languages = options.languages;
+  }
+
+  if (languages.length > 0) {
+    // construct expression ordered by language preference
+    const localLanguageExpression: any[] = ['coalesce'];
+    languages.forEach((l: any) => {
+      localLanguageExpression.push(['get', `name_${l}`], ['get', `name:${l}`]);
+    });
+
+    const transformedLayers = styleJSON.layers.map((layer: any) => {
+      if (layer.type === 'symbol' && layer.layout['text-field']) {
+        layer.layout['text-field'] = replaceAllValuesInExpression(
+          layer.layout['text-field'],
+          [RADAR_LANGUAGE_EXPR],
+          [localLanguageExpression]
+        );
+
+        return layer;
+      }
+
+      return layer;
+    });
+
+    return { ...styleJSON, layers: transformedLayers };
+  }
+
+  return styleJSON;
+};

package/src/version.ts

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