feat(geo): info content on map (#979)

* feat(geo): info content on map * feat(demo): add an example of infocontent
infra-geo-ouverte · Feb 7, 2022 · 8e88f41 · 8e88f41
1 parent 2304568
commit 8e88f41
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 0 deletions.
diff --git a/demo/src/app/geo/simple-map/simple-map.component.html b/demo/src/app/geo/simple-map/simple-map.component.html
@@ -13,6 +13,7 @@
   igoPointerPosition
   [pointerPositionDelay]="pointerCoordDelay"
   (pointerPositionCoord)="onPointerMove($event)">
+    <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-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>

diff --git a/packages/geo/src/lib/map/index.ts b/packages/geo/src/lib/map/index.ts
@@ -9,3 +9,4 @@ export * from './baselayers-switcher';
 export * from './rotation-button';
 export * from './swipe-control';
 export * from './map-center';
+export * from './info-section';
diff --git a/packages/geo/src/lib/map/info-section/index.ts b/packages/geo/src/lib/map/info-section/index.ts
@@ -0,0 +1 @@
+export * from './info-section.component';
diff --git a/packages/geo/src/lib/map/info-section/info-section.component.html b/packages/geo/src/lib/map/info-section/info-section.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="infoContent && infoContent.length" class="infoSection">
+    <pre>{{infoContent}}</pre>
+</div>
diff --git a/packages/geo/src/lib/map/info-section/info-section.component.scss b/packages/geo/src/lib/map/info-section/info-section.component.scss
@@ -0,0 +1,16 @@
+@import '../../../../../core/src/style/partial/media';
+@import '../../../../../core/src/style/partial/core.variables';
+
+.infoSection {
+    border-radius: 10px;
+    background-color: rgba(110,110,110, 0.4);
+    padding: calc(#{$igo-margin} / 2);
+	position: absolute;
+    text-align: center;
+	top: $igo-margin;
+	left: 50%;
+    @include mobile {
+        top: calc(#{$igo-icon-size} + 5px + #{$igo-margin});
+        left: 10%;
+      }
+  }
diff --git a/packages/geo/src/lib/map/info-section/info-section.component.ts b/packages/geo/src/lib/map/info-section/info-section.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'igo-info-section',
+  templateUrl: './info-section.component.html',
+  styleUrls: ['./info-section.component.scss']
+})
+export class InfoSectionComponent {
+
+  @Input() infoContent: string = '';
+
+  constructor() {}
+
+}
diff --git a/packages/geo/src/lib/map/map.module.ts b/packages/geo/src/lib/map/map.module.ts
@@ -18,6 +18,7 @@ import { HoverFeatureDirective } from './shared/hover-feature.directive';
 import { SwipeControlComponent } from './swipe-control/swipe-control.component';
 import { MapCenterComponent } from './map-center/map-center.component';
 import { MenuButtonComponent } from './menu-button/menu-button.component';
+import { InfoSectionComponent } from './info-section/info-section.component';
 
 @NgModule({
   imports: [
@@ -33,6 +34,7 @@ import { MenuButtonComponent } from './menu-button/menu-button.component';
     ZoomButtonComponent,
     GeolocateButtonComponent,
     RotationButtonComponent,
+    InfoSectionComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent,
     MapOfflineDirective,
@@ -48,6 +50,7 @@ import { MenuButtonComponent } from './menu-button/menu-button.component';
     ZoomButtonComponent,
     GeolocateButtonComponent,
     RotationButtonComponent,
+    InfoSectionComponent,
     BaseLayersSwitcherComponent,
     MiniBaseMapComponent,
     MapOfflineDirective,