feat: add map module

src/app/modules/map/page/map-page.html

@@ -0,0 +1,105 @@
+<stapps-context [contentId]="'map'"></stapps-context>
+
+<ion-header class="ion-no-border" translucent="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button
+        *ngIf="items.length === 1"
+        default-href="/"
+        (click)="resetView()"
+      ></ion-back-button>
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-searchbar
+      (keyup.enter)="searchStringChanged($event.target.value)"
+      [(ngModel)]="queryText"
+      (ionClear)="searchStringChanged()"
+      placeholder="{{ 'map.page.search.PLACEHOLDER' | translate }}"
+      showClearButton="always"
+    >
+    </ion-searchbar>
+    <ion-buttons slot="end">
+      <ion-menu-button menu="context" auto-hide="false">
+        <ion-icon name="filter"></ion-icon>
+      </ion-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen id="map">
+  <div
+    class="map-container"
+    #mapContainer
+    leaflet
+    (leafletMapReady)="onMapReady($event)"
+    (leafletClick)="resetView()"
+    [leafletOptions]="options"
+    [leafletMarkerCluster]="markerClusterData"
+    [leafletMarkerClusterOptions]="markerClusterOptions"
+  >
+    <div *ngIf="position" [leafletLayer]="positionMarker"></div>
+  </div>
+  <div class="floating-content">
+    <div class="map-buttons above">
+      <ion-button
+        *ngIf="items.length > 1"
+        color="light"
+        shape="round"
+        size="small"
+        (click)="showListModal()"
+      >
+        <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
+          'map.page.buttons.SHOW_LIST' | translate
+        }}
+      </ion-button>
+      <ion-button
+        [disabled]="position === undefined"
+        color="light"
+        shape="round"
+        size="small"
+        (click)="onPositionClick()"
+      >
+        <ion-icon
+          *ngIf="position !== null; else questionIcon"
+          name="locate"
+        ></ion-icon>
+        <ng-template #questionIcon>
+          <ion-icon name="help-circle-outline"></ion-icon>
+        </ng-template>
+      </ion-button>
+    </div>
+    <stapps-map-item
+      *ngIf="items.length === 1"
+      [item]="items[0]"
+      (showDetails)="showItemModal($event)"
+    ></stapps-map-item>
+  </div>
+  <div class="map-buttons floating-buttons">
+    <ion-button
+      *ngIf="items.length > 1"
+      color="light"
+      shape="round"
+      size="small"
+      (click)="showListModal()"
+    >
+      <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
+        'map.page.buttons.SHOW_LIST' | translate
+      }}
+    </ion-button>
+    <ion-button
+      [disabled]="position === undefined"
+      color="light"
+      shape="round"
+      size="small"
+      (click)="onPositionClick()"
+    >
+      <ion-icon
+        *ngIf="position !== null; else questionIcon"
+        name="locate"
+      ></ion-icon>
+      <ng-template #questionIcon>
+        <ion-icon name="help-circle-outline"></ion-icon>
+      </ng-template>
+    </ion-button>
+  </div>
+</ion-content>