Crea sito

Aprire una nuova pagina con passaggio di parametro al click di un marker Leaflet Map

Creare un service per gestire il passaggio di un parametro tra una pagina e l’altra:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DatasendService {
  data: any;

  constructor() { }
}

Il ciclo for che inserisce i segnalini nella mappa Leaflet:

for (let i = 0; i < this.segnalini.length; i++) {
      let coord={lat:this.segnalini[i].lat, lng:this.segnalini[i].lng};
      this.newMarker = marker([coord.lat,coord.lng], {icon: myIcon}).addTo(this.map).on('click', ()=> {
        this.datafile = coord.lat+coord.lng;
        this.open();
      });
    }
  }

  async open(){
   let index= this.segnalini.findIndex(x =>x.lat+x.lng === this.datafile);
    //Datasend è il service che abbiamo creato per il passaggio dei dati tra le pagine
    this.Datasend.data = this.segnalini[index];
    this.navCtrl.navigateForward("/view");
  }

 

Ciclo for con un Observable in Ionic 4

In ngOnInit si fa una richiesta di prendere tutti gli utenti nel database e con un for si inseriscono tutti gli elementi all’interno di un array.

Il database restituisce un array di oggetti in un Observable che non segue le leggi di una semplice lista e non può essere usato un ciclo for.

export class HomePage implements OnInit {
  private utenti: Observable<Utenti[]>;
  map:Map;
  newMarker:any;
  address:string[];
  //segnalini=[{lat:40.349923,lng:18.172107,title:'prova1',descr:'Pub'},{lat:40.359833,lng:18.184782,title:'Prova2',descr:'Bar'},{lat:40.346456,lng:18.167699,title:'Prova3',descr:'Bar'}];
  segnalini=[];
  datafile:any;

  constructor(private DbService: DbService,public Datasend:DatasendService,public navCtrl: NavController) {}

  ngOnInit() {
    this.utenti = this.DbService.getUtenti(); 
   
   this.utenti.forEach(async x =>{
    for (let i=0; i<x.length; i++){
      this.segnalini.push({lat:x[i].lat,lng:x[i].lng,img:x[i].img,via:x[i].via,city:x[i].city});
    }
    if(this.segnalini.length==x.length){
      this.loadMap();
    }
  });
  }

 

Aggiungere mappa Leaflet con marker ad app Ionic 4

Per installare leaflet:

npm install leaflet --save

In index.html aggiungere:

<linkrel="stylesheet"href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"integrity="sha512xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin=""/>
Nella pagina destinata alla mappa inserire:
<div id="mapId" style="height:60%"></div>
Nel javascript di quella pagina:
import {Map,tileLayer,marker, LeafletEvent} from 'leaflet';
import * as L from 'leaflet';
export class HomePage {

map:Map;
newMarker:any;
address:string[];
segnalini=[{},{},{}];
constructor() {}

ionViewDidEnter(){

this.loadMap();

}
loadMap(){
var myIcon = L.icon({
iconUrl:'../../assets/segnalino.png',
shadowUrl:'leaf-shadow.png',
iconSize: [50, 60], // size of the icon
shadowSize: [0, 0], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

this.map = newMap("mapId").setView([40.352376,18.175410], 13);
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(this.map);

for (let i = 0; i < this.segnalini.length; i++) {
let coord={lat:this.segnalini[i].lat, lng:this.segnalini[i].lng};
this.newMarker = marker([coord.lat,coord.lng], {icon:myIcon}).addTo(this.map);
}
}
  • La variabile segnalini è un array di oggetti che saranno i vostri segnalini. In questi oggetti ci sarà l’attributo “lng:” e “lat:” per la posizione di tali segnalini sulla mappa.
  • Il ciclo for servirà per inserire tutti i segnalini presenti nell’array sulla mappa

Leaflet su Ionic 4 – Problema con il cambio dell’icona di default

Per cambiare l’icona di default di un marker Leaflet si usa:

Problema:

Se importiamo la mappa da leaflet ma non importiamo “L” ci da errore come da immagine:

Soluzione:

Guida per aggiungere la mappa leaflet con segnalini ad un’app Ionic 4

Connettere GitHub con Visual Studio Code

  1. Installare Visual Studio Code e Git sul proprio pc. (Per verificare se git è già presente sul proprio pc digitare git –version sul terminale
  2. Aprire Visual Studio Code e selezionare View => Command Palette => git clone
  3. Inserire url della repository
  4. Ti chiederà in quale cartella sul tuo pc vorrai salvare la repository
  5. La prima volta chiederà i dati di accesso a Github. Il primo è il nickname (accetta il nome utente e non l’email):
  6. Poi chiederà la password:
  7. Adesso che è tutto pronto non resta altro che fare il primo commit. Bisogna cliccare sul bottone a forma di ramo nella barra sinistra e inserire il testo che si vuole dare al primo commit. Fatto ciò non resta che cliccare sull’icona del visto in alto. Per inviare il commit bisogna infine cliccare sulla nuvoletta o sulle due frecce che appariranno nella barra blu in basso a sinistra.

 

Link:

https://code.visualstudio.com

https://git-scm.com/downloads