feat(geo): adding initial button component files (#957)

* adding initial button component files * correcting initialbutton * corrections to initial button * correction to initial button * Button name changed to home-extent-button * adding package.json as required * minors fix * fix package * refactor(home-extent-button): update with config * fix event parameter * feat(home-extent): allow to provide homeExtent properties from context Co-authored-by: Philippe Lafreniere <philippe.lafreniere@msp.gouv.qc.ca> Co-authored-by: Pierre-Etienne Lord
infra-geo-ouverte · Mar 28, 2022 · 81f0ace · 81f0ace
1 parent f0366a0
commit 81f0ace
Show file tree

Hide file tree

Showing 15 changed files with 102 additions and 4 deletions.
diff --git a/demo/src/app/context/context/context.component.html b/demo/src/app/context/context/context.component.html
@@ -16,6 +16,7 @@
     [map]="map">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 

diff --git a/demo/src/app/geo/directions/directions.component.html b/demo/src/app/geo/directions/directions.component.html
@@ -12,6 +12,7 @@
   <igo-map-browser [map]="map" [view]="view">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="false" color="primary"></igo-rotation-button>
   </igo-map-browser>
 

diff --git a/demo/src/app/geo/hover/hover.component.html b/demo/src/app/geo/hover/hover.component.html
@@ -15,6 +15,7 @@
   [igoHoverFeatureEnabled]="true">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 

diff --git a/demo/src/app/geo/print/print.component.html b/demo/src/app/geo/print/print.component.html
@@ -12,6 +12,7 @@
   <igo-map-browser [map]="map" [view]="view">
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="false" color="primary"></igo-rotation-button>
   </igo-map-browser>
 

diff --git a/demo/src/app/geo/simple-map/simple-map.component.html b/demo/src/app/geo/simple-map/simple-map.component.html
@@ -16,6 +16,7 @@
     <igo-info-section [infoContent]="pointerCoord"></igo-info-section>
     <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
     <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-home-extent-button [map]="map" color="primary"></igo-home-extent-button>
     <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
   </igo-map-browser>
 

diff --git a/packages/context/src/lib/context-manager/shared/context.interface.ts b/packages/context/src/lib/context-manager/shared/context.interface.ts
@@ -1,6 +1,6 @@
 import { Message } from '@igo2/core';
 import { Tool } from '@igo2/common';
-import { MapViewOptions, LayerOptions, MapScaleLineOptions, MapAttributionOptions } from '@igo2/geo';
+import { MapViewOptions, LayerOptions, MapScaleLineOptions, MapAttributionOptions, MapExtent } from '@igo2/geo';
 
 import { TypePermission } from './context.enum';
 
@@ -37,6 +37,13 @@ export interface DetailedContext extends Context {
 
 export interface ContextMapView extends MapViewOptions {
   keepCurrentView?: boolean;
+  homeExtent?: ContextHomeExtent
+}
+
+export interface ContextHomeExtent {
+  extent?: MapExtent
+  center?: [number, number];
+  zoom?: number;
 }
 
 export interface ContextMap {

diff --git a/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.html b/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.html
@@ -0,0 +1,6 @@
+<div class="igo-home-extent-button-container"><button
+      mat-icon-button
+      [matTooltip]="'igo.geo.mapButtons.home-extent' | translate"
+            matTooltipPosition="left"
+      [color]="color"
+      (click)="onToggleClick()"><mat-icon svgIcon = "home-map-marker"></mat-icon></button></div>
diff --git a/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.scss b/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.scss
@@ -0,0 +1,13 @@
+@import '../../../../../core/src/style/partial/core.variables';
+
+.igo-home-extent-button-container {
+  width: $igo-icon-size;
+  background-color: #fff;
+  &:hover {
+    background-color: #efefef;
+}
+}
+button,
+:host ::ng-deep button .mat-button-ripple-round {
+    border-radius: 0;
+}
diff --git a/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.ts b/packages/geo/src/lib/map/home-extent-button/home-extent-button.component.ts
@@ -0,0 +1,50 @@
+import { ConfigService } from '@igo2/core';
+import { Component, Input } from '@angular/core';
+import { IgoMap } from '../shared/map';
+import { MapExtent } from '../shared/map.interface';
+import * as olproj from 'ol/proj';
+/*
+Button to center the map to the home extent
+*/
+@Component({
+  selector: 'igo-home-extent-button',
+  templateUrl:'./home-extent-button.component.html',
+  styleUrls: ['./home-extent-button.component.scss'],
+})
+export class HomeExtentButtonComponent {
+  @Input() map: IgoMap;
+  @Input() color: string;
+  @Input() extentOverride?: MapExtent
+  @Input() centerOverride?: [number, number];
+  @Input() zoomOverride?: number;
+
+  private homeExtentButtonExtent;
+  private homeExtentButtonCenter;
+  private homeExtentButtonZoom;
+
+ constructor(public configService: ConfigService) {
+      this.computeHomeExtent();
+  }
+
+  computeHomeExtent() {
+    this.homeExtentButtonExtent = this.extentOverride || this.configService.getConfig('homeExtentButton.homeExtButtonExtent');
+    this.homeExtentButtonCenter = this.centerOverride || this.configService.getConfig('homeExtentButton.homeExtButtonCenter');
+    this.homeExtentButtonZoom = this.zoomOverride || this.configService.getConfig('homeExtentButton.homeExtButtonZoom');
+
+    // priority over extent if these 2 properties are defined;
+    if (this.centerOverride && this.zoomOverride) {
+      this.homeExtentButtonExtent = undefined;
+    }
+  }
+
+  onToggleClick() {
+    this.computeHomeExtent();
+    if (this.homeExtentButtonExtent) {
+      this.map.viewController.zoomToExtent(this.homeExtentButtonExtent);
+    } else if (this.homeExtentButtonCenter && this.homeExtentButtonZoom) {
+      const center = olproj.fromLonLat(this.homeExtentButtonCenter, this.map.viewController.olView.getProjection().getCode());
+      this.map.viewController.olView.setCenter(center);
+      this.map.viewController.zoomTo(this.homeExtentButtonZoom);
+    }
+  }
+}
diff --git a/packages/geo/src/lib/map/home-extent-button/index.ts b/packages/geo/src/lib/map/home-extent-button/index.ts
@@ -0,0 +1 @@
+export * from './home-extent-button.component';
diff --git a/packages/geo/src/lib/map/index.ts b/packages/geo/src/lib/map/index.ts
@@ -4,6 +4,7 @@ export * from './map-browser';
 export * from './zoom-button';
 export * from './menu-button';
 export * from './geolocate-button';
+export * from './home-extent-button';
 export * from './offline-button';
 export * from './baselayers-switcher';
 export * from './rotation-button';

diff --git a/packages/geo/src/lib/map/map-browser/map-browser.component.scss b/packages/geo/src/lib/map/map-browser/map-browser.component.scss
@@ -14,7 +14,7 @@
 
 :host ::ng-deep igo-zoom-button {
   position: absolute;
-  bottom: $igo-margin;
+  bottom: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
   right: $igo-margin;
   @include mobile {
     display: none;
@@ -44,7 +44,17 @@
   top: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
   right: $igo-margin;
   @include mobile {
-    top: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
+    bottom: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
+  }
+}
+
+:host ::ng-deep igo-home-extent-button {
+  position: absolute;
+  bottom: calc((3 * #{$igo-icon-size}) + 5px + (2 * #{$igo-margin}));
+  right: $igo-margin;
+  @include mobile {
+    bottom: $igo-margin;
+    right: calc((2 * #{$igo-icon-size}) +  (3 * #{$igo-margin}));
   }
 }
 
@@ -53,7 +63,7 @@
   bottom: $igo-margin;
   right: calc(#{$igo-margin} + 50px);
   @include mobile {
-    right: calc(#{$igo-margin} + 90px);
+    right: calc((2 * #{$igo-icon-size}) + (2 * #{$igo-margin}));
   }
 }
 

diff --git a/packages/geo/src/lib/map/map.module.ts b/packages/geo/src/lib/map/map.module.ts
@@ -8,6 +8,7 @@ import { IgoConfirmDialogModule } from '@igo2/common';
 import { MapBrowserComponent } from './map-browser/map-browser.component';
 import { ZoomButtonComponent } from './zoom-button/zoom-button.component';
 import { GeolocateButtonComponent } from './geolocate-button/geolocate-button.component';
+import { HomeExtentButtonComponent } from './home-extent-button/home-extent-button.component';
 import { RotationButtonComponent } from './rotation-button/rotation-button.component';
 import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-switcher.component';
 import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
@@ -33,6 +34,7 @@ import { InfoSectionComponent } from './info-section/info-section.component';
     MapBrowserComponent,
     ZoomButtonComponent,
     GeolocateButtonComponent,
+    HomeExtentButtonComponent,
     RotationButtonComponent,
     InfoSectionComponent,
     BaseLayersSwitcherComponent,
@@ -49,6 +51,7 @@ import { InfoSectionComponent } from './info-section/info-section.component';
     MapBrowserComponent,
     ZoomButtonComponent,
     GeolocateButtonComponent,
+    HomeExtentButtonComponent,
     RotationButtonComponent,
     InfoSectionComponent,
     BaseLayersSwitcherComponent,

diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
@@ -265,6 +265,7 @@
       "mapButtons": {
         "baselayerSwitcher": "Change base layer",
         "geolocate": "Geolocate",
+        "home-extent": "Go to the home map extent",
         "offline": "Offline mode",
         "online": "Online mode",
         "zoomIn": "Zoom in ({{zoom}})",

diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json
@@ -264,6 +264,7 @@
       "mapButtons": {
         "baselayerSwitcher": "Changer le fond de carte",
         "geolocate": "Afficher votre position",
+        "home-extent": "Aller à l'étendue de la carte",
         "offline": "Passer en mode hors-ligne",
         "online": "Passer en mode en ligne",
         "zoomIn": "Zoomer ({{zoom}})",