Add config option to hide zoom controls (#174)

* add config option to hide zoom buttons * rename some options
radarlabs · Jul 25, 2024 · 4e6c49a · 4e6c49a
1 parent 1ab01e2
commit 4e6c49a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/types.ts b/src/types.ts
@@ -461,6 +461,7 @@ export interface RadarSearchGeofencesResponse extends RadarResponse {
 
 export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformRequest'> {
   language?: string;
+  showZoomControls?: boolean;
 }
 
 export interface RadarMarkerPopupOptions extends maplibregl.PopupOptions {

diff --git a/src/ui/RadarMap.ts b/src/ui/RadarMap.ts
@@ -17,6 +17,11 @@ const RADAR_STYLES = [
   'radar-dark-v1',
 ];
 
+// Radar specific configs
+const defaultRadarMapOptions: Partial<RadarMapOptions> = {
+  showZoomControls: true,
+};
+
 const defaultMaplibreOptions: Partial<maplibregl.MapOptions> = {
   minZoom: 1,
   maxZoom: 20,
@@ -65,26 +70,27 @@ const getStyle = (options: RadarOptions, mapOptions: RadarMapOptions) => {
 class RadarMap extends maplibregl.Map {
   _markers: RadarMarker[] = [];
 
-  constructor(mapOptions: RadarMapOptions) {
+  constructor(radarMapOptions: 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({},
+    // configure map options
+    const style = getStyle(config, radarMapOptions);
+    const mapOptions: RadarMapOptions = Object.assign({},
+      defaultRadarMapOptions,
       defaultMaplibreOptions,
-      mapOptions,
+      radarMapOptions,
       { style },
     );
-    Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
+    Logger.debug(`initialize map with options: ${JSON.stringify(mapOptions)}`);
 
-    (maplibreOptions as maplibregl.MapOptions).transformRequest = (url, resourceType) => {
+    (mapOptions as maplibregl.MapOptions).transformRequest = (url, resourceType) => {
       // this handles when a style is switched
       if (resourceType === 'Style' && isRadarStyle(url)) {
-        url = createStyleURL(config, { ...maplibreOptions, style: url });
+        url = createStyleURL(config, { ...mapOptions, style: url });
       }
 
       let headers = {
@@ -99,7 +105,7 @@ class RadarMap extends maplibregl.Map {
       return { url, headers };
     };
 
-    super(maplibreOptions);
+    super(mapOptions); // initialize MapLibre instance
 
     const container = this.getContainer();
     if (!container.style.width && !container.style.height) {
@@ -115,7 +121,10 @@ class RadarMap extends maplibregl.Map {
     this.addControl(attribution, 'bottom-right');
 
     // add zoom controls
-    const nav = new maplibregl.NavigationControl({ showCompass: false });
+    const nav = new maplibregl.NavigationControl({
+      showCompass: false,
+      showZoom: mapOptions.showZoomControls,
+    });
     this.addControl(nav, 'bottom-right');
 
     // handle map resize actions