Change app name, add leaflet libary, add map-component on tab2

4 years ago · 90bdd74bef
parent 78bcabc03b
commit 90bdd74bef
5 changed files with 32 additions and 8 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -7378,6 +7378,11 @@
        "invert-kv": "^2.0.0"
      }
    },
+    "leaflet": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
+      "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
+    },
    "less": {
      "version": "3.11.1",
      "resolved": "https://registry.npmjs.org/less/-/less-3.11.1.tgz",
--- a/package.json
+++ b/package.json
@ -24,6 +24,7 @@
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
+    "leaflet": "^1.6.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
--- a/src/app/tab2/tab2.page.html
+++ b/src/app/tab2/tab2.page.html
@ -12,6 +12,7 @@
      <ion-title size="large">Präventions-Angebote in der Nähe</ion-title>
    </ion-toolbar>
  </ion-header>
-
-  <app-explore-container name="Präventions-Angebote in der Nähe"></app-explore-container>
+  <ion-content>
+    <div id="map" style="height: 100%"></div>
+  </ion-content>
 </ion-content>
--- a/src/app/tab2/tab2.page.ts
+++ b/src/app/tab2/tab2.page.ts
@ -1,12 +1,28 @@
-import { Component } from '@angular/core';
+import { Platform } from "@ionic/angular";
+import { Map, tileLayer, marker, icon } from "leaflet";
+
+import { Component } from "@angular/core";

@Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
+  selector: "app-tab2",
+  templateUrl: "tab2.page.html",
+  styleUrls: ["tab2.page.scss"],
 })
 export class Tab2Page {
+  constructor(public plt: Platform) {}
+
+  ngAfterViewInit() {
+    this.plt.ready().then(() => {
+      this.initMap();
+    });
+  }

-  constructor() {}
+  initMap() {
+    const map = new Map("map").setView([47.986756, 7.842344], 23);

+    tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+  }
 }
--- a/src/index.html
+++ b/src/index.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8" />
-  <title>Ionic App</title>
+  <title>PlAnA</title>

  <base href="/" />

@ -13,6 +13,7 @@
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />