feat: add elevation customization option

GeotrekCE · Jul 26, 2024 · 00ac56c · 00ac56c
1 parent 7781a86
commit 00ac56c
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 16 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -36,6 +36,7 @@ export namespace Components {
         "commonMarkerSize": number;
         "departureArrivalMarkerSize": number;
         "districts": string;
+        "elevationHeight": number;
         "emergencyNumber": number;
         "enableOffline": boolean;
         "fabBackgroundColor": string;
@@ -49,6 +50,7 @@ export namespace Components {
         "largeViewSize": number;
         "mainClusterSize": number;
         "mainMarkerSize": number;
+        "mobileElevationHeight": number;
         "nameLayer": string;
         "outdoor": boolean;
         "pointReferenceMarkerSize": number;
@@ -114,11 +116,13 @@ export namespace Components {
         "colorTrekLine": string;
         "commonMarkerSize": number;
         "departureArrivalMarkerSize": number;
+        "elevationHeight": number;
         "fontFamily": string;
         "grwApp": boolean;
-        "isLargeView": boolean;
+        "largeViewSize": number;
         "mainClusterSize": number;
         "mainMarkerSize": number;
+        "mobileElevationHeight": number;
         "nameLayer": string;
         "pointReferenceMarkerSize": number;
         "selectedMainMarkerSize": number;
@@ -933,6 +937,7 @@ declare namespace LocalJSX {
         "commonMarkerSize"?: number;
         "departureArrivalMarkerSize"?: number;
         "districts"?: string;
+        "elevationHeight"?: number;
         "emergencyNumber"?: number;
         "enableOffline"?: boolean;
         "fabBackgroundColor"?: string;
@@ -946,6 +951,7 @@ declare namespace LocalJSX {
         "largeViewSize"?: number;
         "mainClusterSize"?: number;
         "mainMarkerSize"?: number;
+        "mobileElevationHeight"?: number;
         "nameLayer"?: string;
         "outdoor"?: boolean;
         "pointReferenceMarkerSize"?: number;
@@ -1013,11 +1019,13 @@ declare namespace LocalJSX {
         "colorTrekLine"?: string;
         "commonMarkerSize"?: number;
         "departureArrivalMarkerSize"?: number;
+        "elevationHeight"?: number;
         "fontFamily"?: string;
         "grwApp"?: boolean;
-        "isLargeView"?: boolean;
+        "largeViewSize"?: number;
         "mainClusterSize"?: number;
         "mainMarkerSize"?: number;
+        "mobileElevationHeight"?: number;
         "nameLayer"?: string;
         "onOutdoorCourseCardPress"?: (event: GrwMapCustomEvent<number>) => void;
         "onOutdoorSiteCardPress"?: (event: GrwMapCustomEvent<number>) => void;

diff --git a/src/components/grw-app/grw-app.tsx b/src/components/grw-app/grw-app.tsx
@@ -97,6 +97,8 @@ export class GrwApp {
   @Prop() pointReferenceMarkerSize = 24;
 
   @Prop() largeViewSize = 1024;
+  @Prop() elevationHeight = 280;
+  @Prop() mobileElevationHeight = 280;
 
   handlePopStateBind: (event: any) => void = this.handlePopState.bind(this);
 
@@ -897,16 +899,18 @@ export class GrwApp {
                   color-sensitive-area={this.colorSensitiveArea}
                   color-markers={this.colorMarkers ? this.colorMarkers : this.colorPrimaryApp}
                   color-clusters={this.colorClusters ? this.colorClusters : this.colorPrimaryApp}
-                  is-large-view={this.isLargeView}
                   use-gradient={this.useGradient}
                   tiles-max-zoom-offline={this.tilesMaxZoomOffline}
                   grw-app={true}
-                  mainMarkerSize={this.mainMarkerSize}
-                  selectedMainMarkerSize={this.selectedMainMarkerSize}
-                  mainClusterSize={this.mainClusterSize}
-                  commonMarkerSize={this.commonMarkerSize}
-                  departureArrivalMarkerSize={this.departureArrivalMarkerSize}
-                  pointReferenceMarkerSize={this.pointReferenceMarkerSize}
+                  main-marker-size={this.mainMarkerSize}
+                  selected-main-markerSize={this.selectedMainMarkerSize}
+                  main-cluster-size={this.mainClusterSize}
+                  common-marker-size={this.commonMarkerSize}
+                  departure-arrival-marker-size={this.departureArrivalMarkerSize}
+                  point-reference-marker-size={this.pointReferenceMarkerSize}
+                  elevation-height={this.elevationHeight}
+                  mobile-elevation-height={this.mobileElevationHeight}
+                  large-view-size={this.largeViewSize}
                 ></grw-map>
               )}
             </div>

diff --git a/src/components/grw-app/readme.md b/src/components/grw-app/readme.md
@@ -36,6 +36,7 @@
 | `commonMarkerSize`           | `common-marker-size`            |             | `number`  | `48`        |
 | `departureArrivalMarkerSize` | `departure-arrival-marker-size` |             | `number`  | `14`        |
 | `districts`                  | `districts`                     |             | `string`  | `undefined` |
+| `elevationHeight`            | `elevation-height`              |             | `number`  | `280`       |
 | `emergencyNumber`            | `emergency-number`              |             | `number`  | `undefined` |
 | `enableOffline`              | `enable-offline`                |             | `boolean` | `false`     |
 | `fabBackgroundColor`         | `fab-background-color`          |             | `string`  | `'#eaddff'` |
@@ -49,6 +50,7 @@
 | `largeViewSize`              | `large-view-size`               |             | `number`  | `1024`      |
 | `mainClusterSize`            | `main-cluster-size`             |             | `number`  | `48`        |
 | `mainMarkerSize`             | `main-marker-size`              |             | `number`  | `32`        |
+| `mobileElevationHeight`      | `mobile-elevation-height`       |             | `number`  | `280`       |
 | `nameLayer`                  | `name-layer`                    |             | `string`  | `undefined` |
 | `outdoor`                    | `outdoor`                       |             | `boolean` | `false`     |
 | `pointReferenceMarkerSize`   | `point-reference-marker-size`   |             | `number`  | `24`        |

diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -19,7 +19,7 @@
 }
 
 .trek-map {
-  height: calc(100% - 280px);
+  height: calc(100% - var(--elevation-height));
 }
 
 .common-map {

diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Event, EventEmitter, getAssetPath, Build, Listen } from '@stencil/core';
+import { Component, Host, h, Prop, State, Event, EventEmitter, getAssetPath, Build, Listen, Element, forceUpdate } from '@stencil/core';
 import { Feature, FeatureCollection } from 'geojson';
 import L, { MarkerClusterGroup, TileLayer } from 'leaflet';
 import 'leaflet-rotate';
@@ -24,8 +24,9 @@ import bbox from '@turf/bbox';
   shadow: true,
 })
 export class GrwMap {
+  @Element() mapElement: HTMLElement;
   mapRef: HTMLElement;
-  elevationRef: HTMLElement;
+  hostElement: HTMLElement;
   maxZoom = 19;
 
   @Event() trekCardPress: EventEmitter<number>;
@@ -55,8 +56,6 @@ export class GrwMap {
   @Prop() useGradient = false;
   @Prop() tilesMaxZoomOffline = 16;
 
-  @Prop() isLargeView = false;
-
   @Prop() grwApp = false;
 
   @Prop() mainMarkerSize = 32;
@@ -66,6 +65,10 @@ export class GrwMap {
   @Prop() departureArrivalMarkerSize = 14;
   @Prop() pointReferenceMarkerSize = 24;
 
+  @Prop() elevationHeight = 280;
+  @Prop() mobileElevationHeight = 280;
+  @Prop() largeViewSize = 1024;
+
   map: L.Map;
   bounds;
   treksLayer: L.GeoJSON<any>;
@@ -879,12 +882,13 @@ export class GrwMap {
     /* @ts-ignore */
     L.setLocale('fr');
 
+    console.log();
     const elevationOptions = {
       srcFolder: 'https://unpkg.com/@raruto/leaflet-elevation/src/',
       elevationDiv: `#elevation`,
       theme: `custom-theme${!this.useGradient ? ' use-theme-color' : ''}`,
       detached: true,
-      height: 280,
+      height: this.mapElement.getBoundingClientRect().width >= this.largeViewSize / 2 ? this.elevationHeight : this.mobileElevationHeight,
       wptIcons: true,
       wptLabels: true,
       collapsed: false,
@@ -2716,11 +2720,24 @@ export class GrwMap {
     }
   }
 
+  @Listen('resize', { target: 'window' })
+  onWindowResize() {
+    this.handleView();
+  }
+
+  handleView() {
+    const elevationHeight = this.mapElement.getBoundingClientRect().width >= this.largeViewSize / 2 ? this.elevationHeight : this.mobileElevationHeight;
+    (this.elevationControl.options as any).height = elevationHeight;
+    (this.elevationControl as any).redraw();
+    forceUpdate(this.hostElement);
+  }
+
   render() {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
     return (
       <Host
+        ref={el => (this.hostElement = el)}
         style={{
           '--font-family': this.fontFamily,
           '--color-primary-app': this.colorPrimaryApp,
@@ -2733,6 +2750,9 @@ export class GrwMap {
           '--color-trek-line': this.colorTrekLine,
           '--layers-image-src': `url(${layersImageSrc})`,
           '--contract-image-src': `url(${contractImageSrc})`,
+          '--elevation-height': (this.mapElement.getBoundingClientRect().width >= this.largeViewSize / 2 ? this.elevationHeight : this.mobileElevationHeight)
+            .toString()
+            .concat('px'),
         }}
       >
         <div

diff --git a/src/components/grw-map/readme.md b/src/components/grw-map/readme.md
@@ -22,11 +22,13 @@
 | `colorTrekLine`              | `color-trek-line`               |             | `string`  | `'#6b0030'` |
 | `commonMarkerSize`           | `common-marker-size`            |             | `number`  | `48`        |
 | `departureArrivalMarkerSize` | `departure-arrival-marker-size` |             | `number`  | `14`        |
+| `elevationHeight`            | `elevation-height`              |             | `number`  | `280`       |
 | `fontFamily`                 | `font-family`                   |             | `string`  | `'Roboto'`  |
 | `grwApp`                     | `grw-app`                       |             | `boolean` | `false`     |
-| `isLargeView`                | `is-large-view`                 |             | `boolean` | `false`     |
+| `largeViewSize`              | `large-view-size`               |             | `number`  | `1024`      |
 | `mainClusterSize`            | `main-cluster-size`             |             | `number`  | `48`        |
 | `mainMarkerSize`             | `main-marker-size`              |             | `number`  | `32`        |
+| `mobileElevationHeight`      | `mobile-elevation-height`       |             | `number`  | `280`       |
 | `nameLayer`                  | `name-layer`                    |             | `string`  | `undefined` |
 | `pointReferenceMarkerSize`   | `point-reference-marker-size`   |             | `number`  | `24`        |
 | `selectedMainMarkerSize`     | `selected-main-marker-size`     |             | `number`  | `48`        |