From 90bdd74bef987e28e0d28999785843dfdff6da22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20H=C3=BCgin?= Date: Sat, 23 May 2020 14:30:09 +0200 Subject: [PATCH] Change app name, add leaflet libary, add map-component on tab2 --- package-lock.json | 5 +++++ package.json | 1 + src/app/tab2/tab2.page.html | 5 +++-- src/app/tab2/tab2.page.ts | 26 +++++++++++++++++++++----- src/index.html | 3 ++- 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4687fca..69cb522 100644 --- 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", diff --git a/package.json b/package.json index 12cf731..9654b69 100644 --- 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" diff --git a/src/app/tab2/tab2.page.html b/src/app/tab2/tab2.page.html index f33c3b2..78902be 100644 --- a/src/app/tab2/tab2.page.html +++ b/src/app/tab2/tab2.page.html @@ -12,6 +12,7 @@ Präventions-Angebote in der Nähe - - + +
+ diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts index e14cad4..79e81a1 100644 --- 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: + '© OpenStreetMap contributors', + }).addTo(map); + } } diff --git a/src/index.html b/src/index.html index 3b0aae1..9df46f8 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Ionic App + PlAnA @@ -13,6 +13,7 @@ +