Map: Added map.height config option

README.md

@@ -118,11 +118,8 @@ The map is **disabled by default**. To allow users to see map of accession colle
 |Property|Default|Description|
 |---|---|---|
 |`enabled`|`false`| Toggle map functionality |
-|`baseMap`|`{...}`| See baseMap |
+|`height`|`'400px'`| Height of the map of accessions (use a CSS expression) |
+|`baseMap`|`{ url: ..., attribution: ... }`| See `url` and `attribution` below. |
+|`baseMap.url`|[World_Light_Gray_Base](https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/)| Tile server url for the map base layer. |
+|`baseMap.attribution`|Tiles © ...| Base layer attribution. |
 
-##### baseMap 
-
-|Property|Default|Description|
-|---|---|---|
-|`url`|`https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/`| Tile server url for the base layer |
-|`attribution`|`Tiles © Esri — Esri, DeLorme, NAVTEQ`| Attribution data |

entrypoints/client.tsx

@@ -10,16 +10,20 @@ const genesysConfig: Config = {
   apiUrl: 'http://localhost:8080',
   clientId: 'defaultclient@localhost',
   clientKey: 'changeme',
+  recaptchaSiteKey: '6Lfb5w4TAAAAAI6pD_4l5uIwXEaUJ6KQmhU9cyjx',
+  language: queryLang,
   title: 'Testing:',
   filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
-  language: queryLang,
   accession: {
     pdci: true,
   },
   shoppingCart: {
     enabled: true,
   },
-  recaptchaSiteKey: '6Lfb5w4TAAAAAI6pD_4l5uIwXEaUJ6KQmhU9cyjx',
+  map: {
+    enabled: true,
+    height: '500px',
+  },
 };
 
 showGenesysUI(document.getElementById('genesys'), genesysConfig);

index.html

@@ -67,11 +67,12 @@
       apiUrl: 'https://api.genesys-pgr.org', // Genesys API server
       clientId: 'dkDK7.rFJGS6CuMhysUcdFHiGi@api.genesys-pgr.org', // Client ID
       clientKey: 'YlbHqhm3QqUaEt6nq7C3oMgBXo64WzLr', // Client key
+      recaptchaSiteKey: '6LfD6h0UAAAAAOmsQB3tpAtcWsWaggcrb155aDNT', // Public ReCaptcha site key
+      language: queryLang,
       title: 'Alliance genebanks:', // HTML title prefix
       filter: {
         institute: { code: ['COL003', 'BEL084'] }, // Genesys data filter
       },
-      language: queryLang,
       accession: {
         pdci: true, // Show PDCI
         subsets: true, // Show list of subsets
@@ -80,7 +81,9 @@
       shoppingCart: {
         enabled: true, // Enable shopping cart
       },
-      recaptchaSiteKey: '6LfD6h0UAAAAAOmsQB3tpAtcWsWaggcrb155aDNT', // Public ReCaptcha site key
+      map: {
+        height: '500px',
+      }
     };
 
     // Show UI

src/config/config.ts

@@ -44,7 +44,8 @@ class AccessionConfig extends BaseFeatureConfig {
 }
 
 export class MapConfig extends BaseFeatureConfig {
-  public baseMap: {
+  public height?: string;
+  public baseMap?: {
     url: string,
     attribution: string,
   };
@@ -66,6 +67,7 @@ export const defaultConfig: Partial<Config> = {
   },
   map: {
     enabled: true,
+    height: '400px', // 'calc(100vh - 115px)',
     baseMap: {
       url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/',
       attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',

src/map/LocationMap.tsx

@@ -39,9 +39,10 @@ class LocationMap extends React.Component<IMapComponentProps & WithTranslation &
         minHeight: `${height}px`,
       } }>
         <MapContainer
-          zoom={ 6 }
+          zoom={ 4 }
+          // scrollWheelZoom={ 'center' }
           scrollWheelZoom={ false }
-          zoomControl={ false }
+          zoomControl={ true }
           dragging={ false }
           doubleClickZoom={ false }
           center={ position }

src/map/MapPage.tsx

@@ -61,9 +61,9 @@ class MapComponent extends React.Component<WithTranslation & WithConfig, IMapCom
 
     return (
       <div style={ {
-        height: 'calc(100vh - 115px)', // map container must have fixed height
+        height: appConfig.map.height, // map container must have fixed height
         width: '100%',
-        minHeight: '500px',
+        minHeight: '300px',
       } }>
         { mapInfo &&
           <MapContainer