feat: add map module

src/app/modules/map/widget/map-widget.component.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2020-2021 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, ElementRef, Input, OnInit} from '@angular/core';
+import {SCPlace} from '@openstapps/core';
+import {geoJSON, Map, MapOptions, tileLayer} from 'leaflet';
+import {MapProvider} from '../map.provider';
+import Timeout = NodeJS.Timeout;
+
+/**
+ * The map widget (needs a container with explicit size)
+ */
+@Component({
+  selector: 'stapps-map-widget',
+  styleUrls: ['./map-widget.scss'],
+  templateUrl: './map-widget.html',
+})
+export class MapWidgetComponent implements OnInit {
+  /**
+   * A leaflet map showed
+   */
+  map: Map;
+
+  /**
+   * Options of the leaflet map
+   */
+  options: MapOptions;
+
+  /**
+   * A place to show on the map
+   */
+  @Input() place: SCPlace;
+
+  constructor(private element: ElementRef) {}
+
+  /**
+   * Prepare the map
+   */
+  ngOnInit() {
+    const markerLayer = MapProvider.getPointMarker(this.place.geo.point);
+    this.options = {
+      center: geoJSON(this.place.geo.polygon || this.place.geo.point)
+        .getBounds()
+        .getCenter(),
+      layers: [
+        tileLayer(
+          'https://osm.server.uni-frankfurt.de/tiles/roads/x={x}&y={y}&z={z}',
+          {
+            attribution:
+              '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+            maxZoom: 18,
+          },
+        ),
+        markerLayer,
+      ],
+      zoom: 16,
+      zoomControl: false,
+    };
+  }
+
+  /**
+   * What happens when the leaflet map is ready (note: doesn't mean that tiles are loaded)
+   */
+  onMapReady(map: Map) {
+    this.map = map;
+    const interval: Timeout = setInterval(() =>
+      MapProvider.invalidateWhenRendered(map, this.element, interval),
+    );
+  }
+}

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

@@ -0,0 +1,16 @@
+<div
+  class="map-container"
+  (leafletMapReady)="onMapReady($event)"
+  leaflet
+  [leafletOptions]="options"
+></div>
+<div class="map-buttons">
+  <ion-button
+    color="light"
+    shape="round"
+    size="small"
+    [routerLink]="['/map', place.uid]"
+  >
+    <ion-icon name="expand"></ion-icon>
+  </ion-button>
+</div>

src/app/modules/map/widget/map-widget.scss

@@ -0,0 +1,12 @@
+div.map-container {
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+
+div.map-buttons {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10000;
+}