Prueba mapa

angular.json

@@ -31,7 +31,11 @@
                 "output": "./svg"
               }
             ],
-            "styles": ["src/global.scss", "src/theme/variables.scss"],
+            "styles": [
+              "./node_modules/leaflet/dist/leaflet.css",
+              "src/global.scss",
+              "src/theme/variables.scss"
+            ],
             "scripts": []
           },
           "configurations": {

package.json

@@ -31,6 +31,7 @@
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
+    "leaflet-ant-path": "^1.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
@@ -49,6 +50,7 @@
     "@ionic/angular-toolkit": "^11.0.1",
     "@tailwindcss/typography": "latest",
     "@types/jasmine": "~5.1.0",
+    "@types/leaflet": "^1.9.12",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.7",
@@ -63,6 +65,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "leaflet": "^1.9.4",
     "ngx-tailwind": "^4.0.0",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.6",

src/app/app-routing.module.ts

@@ -44,7 +44,13 @@ const routes: Routes = [
   },
   {
     path: 'view-product',
-    loadChildren: () => import('./pages/view-product/view-product.module').then( m => m.ViewProductPageModule)
+    loadChildren: () => import('./pages/view-product/view-product.module').then( m => m.ViewProductPageModule),
+      ...canActivate(redirectUnauthorizedToLogin),
+  },
+  {
+    path: 'show-map',
+    loadChildren: () => import('./pages/show-map/show-map.module').then( m => m.ShowMapPageModule),
+    ...canActivate(redirectUnauthorizedToLogin),
   },
 ];
 

src/app/app.component.ts

@@ -34,6 +34,11 @@ export class AppComponent implements OnInit {
       url: '/myteam',
       icon: 'people'
     },
+    {
+      title:'Show Map',
+      url:'/show-map',
+      icon:'map'
+    }
   ];
 
   /**

src/app/app.module.ts

@@ -10,10 +10,15 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import {environment} from "../environments/environment.prod";
 import {getAuth, provideAuth} from "@angular/fire/auth";
+import {HttpClientModule} from "@angular/common/http";
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule, IonicModule.forRoot(),
+    AppRoutingModule,
+    HttpClientModule
+  ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideFirebaseApp(() => initializeApp(environment.firebase)),

src/app/components/components.module.ts

@@ -16,7 +16,7 @@ import {TitleComponent} from "./title/title.component";
    */
   declarations: [
     HeaderComponent,
-    TitleComponent
+    TitleComponent,
   ],
   /**
    * Other modules whose exported classes are needed by component templates declared in this module.
@@ -31,7 +31,7 @@ import {TitleComponent} from "./title/title.component";
    */
   exports: [
     HeaderComponent,
-    TitleComponent
+    TitleComponent,
   ]
 })
 export class ComponentsModule { }

src/app/interfaces/map-data.ts

@@ -0,0 +1,7 @@
+export interface MapData {
+  fromLatitude: number;
+  fromLongitude: number;
+  toLatitude: number;
+  toLongitude: number;
+  latency: number;
+}

src/app/pages/show-map/show-map-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ShowMapPage } from './show-map.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ShowMapPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ShowMapPageRoutingModule {}

src/app/pages/show-map/show-map.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ShowMapPageRoutingModule } from './show-map-routing.module';
+
+import { ShowMapPage } from './show-map.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        ShowMapPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [ShowMapPage]
+})
+export class ShowMapPageModule {}

src/app/pages/show-map/show-map.page.html

@@ -0,0 +1,6 @@
+<app-header [title]="'Show Map'"></app-header>
+
+<ion-content>
+  <div id="mapId" style="width: 100%; height: 100%">
+  </div>
+</ion-content>

src/app/pages/show-map/show-map.page.scss

@@ -0,0 +1,5 @@
+
+
+#map {
+  height: 100%;
+}

src/app/pages/show-map/show-map.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ShowMapPage } from './show-map.page';
+
+describe('ShowMapPage', () => {
+  let component: ShowMapPage;
+  let fixture: ComponentFixture<ShowMapPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowMapPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/show-map/show-map.page.ts

@@ -0,0 +1,82 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import * as Leaflet from "leaflet";
+// @ts-ignore
+import { antPath } from 'leaflet-ant-path';
+import {MapData} from "../../interfaces/map-data";
+import {LatLngExpression} from "leaflet";
+import {RipeService} from "../../services/ripe.service";
+
+
+//https://edupala.com/how-to-add-leaflet-map-in-ionic/
+
+@Component({
+  selector: 'app-show-map',
+  templateUrl: './show-map.page.html',
+  styleUrls: ['./show-map.page.scss'],
+})
+export class ShowMapPage implements OnInit, OnDestroy {
+
+  map: Leaflet.Map|undefined;
+
+  ripeData:MapData={
+    fromLatitude: 50.1187,
+    fromLongitude: 8.6842,
+    toLatitude: 37.422,
+    toLongitude: -122.084,
+    latency: 1.4415543333
+  }
+
+
+
+  constructor(
+    private ripeService: RipeService
+  ) { }
+
+  ngOnInit() {
+    this.ripeService.newMeasurement('https://portfoliojuanfranciscocisneros.web.app', 'Test from app', 'ping');
+  }
+
+
+  ionViewDidEnter() { this.leafletMap(); }
+
+
+
+
+
+  leafletMap() {
+    this.map = Leaflet.map('mapId').setView([0, 0], 2.5);
+    Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 10,
+      minZoom: 2.5,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(this.map);
+
+
+
+    antPath([[this.ripeData.fromLatitude, this.ripeData.fromLongitude], [this.ripeData.toLatitude,this.ripeData.toLongitude]],
+      { color: '#FF0000', weight: 5, opacity: 0.6 })
+      .addTo(this.map);
+
+    // Create a custom icon that will serve as our label
+    const labelIcon = Leaflet.divIcon({
+      className: 'label-icon',
+      html: `<div style="background-color: black; padding: 2px; border-radius: 3px;">Latency: ${this.ripeData.latency} ms</div>`,
+      iconSize: [150, 20] // size of the icon
+    });
+
+    // Add the label to the map at the desired coordinates
+    const labelCoordinates:LatLngExpression = [(this.ripeData.fromLatitude + this.ripeData.toLatitude) / 2, (this.ripeData.fromLongitude + this.ripeData.toLongitude) / 2]; // adjust these coordinates to position your label
+    Leaflet.marker(labelCoordinates, { icon: labelIcon }).addTo(this.map);
+
+
+
+  }
+
+
+
+  /** Remove map when we have multiple map object */
+  ngOnDestroy() {
+    this.map!.remove();
+  }
+
+}

src/app/services/ripe.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RipeService {
+
+  private apiKey: string =''
+  private measurementURL: string = 'https://atlas.ripe.net/api/v2/measurements/'
+  private measurementID: string = ''
+  private resultsURL: string = '/results/'
+
+
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  async newMeasurement(target:string, desciption:string, type:string){
+    let body = {
+      "definitions": [
+        {
+          "target": "",
+          "description": "",
+          "type": "",
+          "af": 4,
+          "is_oneoff": true,
+        }
+      ],
+      "probes": [
+        {
+          "requested": 10,
+          "type": "area",
+          "value": "WW"
+        }
+      ],
+    }
+    let headers = {
+      'Authorization': this.apiKey
+    }
+
+    let response: any = await this.http.post(this.measurementURL, body, {headers: headers}).toPromise();
+    if (response && response.measurements && response.measurements.length > 0){
+      this.measurementID = response.measurements[0].toString();
+    }
+    console.log(this.measurementID);
+
+  }
+
+
+
+
+}

src/global.scss

@@ -38,3 +38,7 @@
 @import "@ionic/angular/css/palettes/dark.always.css";
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 /* @import "@ionic/angular/css/palettes/dark.system.css"; */
+
+
+
+@import "leaflet/dist/leaflet.css";