Hi Friends,
Hope you are all well. This is the sequel to my previous post – here.
Let’s just jump right in.
A screencast of this post
The code for this post is available – here.
I assume you have read my previous post. Let’s start from where we left off.
First go ahead and install firebase and angularfire2 as shown below.
|
1 |
npm install firebase angularfire2 --save |
Now open up app.module.ts and add imports and the firebase config. Once this is done let’s create a provider where we would write some code to save a marker.
Create a new provider using the command.
|
1 |
ionic g provider markers |
Open up the newly created provider file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { Injectable } from "@angular/core"; import { AngularFirestore } from "angularfire2/firestore"; /* Generated class for the MarkersProvider provider. See https://angular.io/guide/dependency-injection for more info on providers and Angular DI. */ @Injectable() export class MarkersProvider { constructor(private afs: AngularFirestore) { console.log("Hello MarkersProvider Provider"); } saveMarker(coords) { this.afs .collection("markers") .add({ latitude: coords.latitude, longitude: coords.longitude, message: "hi buddy" }) .then(() => { alert("Added"); }); } getAllMarkers() { return this.afs.collection("markers").valueChanges(); } } |
The saveMarker method would save the marker onto the markers collection, whereas the getAllMarkers() would return all the markers (as an observable).
Now open up home.ts file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { Component, ViewChild, ElementRef } from "@angular/core"; import { NavController, AlertController } from "ionic-angular"; import leaflet from "leaflet"; import { NativeGeocoder, NativeGeocoderForwardResult } from "@ionic-native/native-geocoder"; import { MarkersProvider } from "../../providers/markers/markers"; @Component({ selector: "page-home", templateUrl: "home.html" }) export class HomePage { @ViewChild("map") mapContainer: ElementRef; map: any; constructor( public navCtrl: NavController, private alertCtrl: AlertController, private nativeGeocoder: NativeGeocoder, public markersProvier: MarkersProvider ) {} ionViewDidEnter() { this.loadmap(); } loadmap() { this.map = leaflet.map("map").fitWorld(); leaflet .tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attributions: "www.tphangout.com", maxZoom: 14 }) .addTo(this.map); this.loadMarkers(); } addMarker() { let prompt = this.alertCtrl.create({ title: "Add Marker", message: "Enter location", inputs: [ { name: "city", placeholder: "City" } ], buttons: [ { text: "Cancel", handler: data => { console.log("Cancel clicked"); } }, { text: "Save", handler: data => { this.geoCodeandAdd(data.city); } } ] }); prompt.present(); } geoCodeandAdd(city) { this.nativeGeocoder .forwardGeocode(city) .then((coordinates: NativeGeocoderForwardResult) => { this.markersProvier.saveMarker(coordinates[0]); }) .catch((error: any) => console.log(error)); } loadMarkers() { this.markersProvier.getAllMarkers().subscribe((markers: any) => { markers.forEach(singlemarker => { let markerGroup = leaflet.featureGroup(); let marker: any = leaflet .marker([singlemarker.latitude, singlemarker.longitude]) .on("click", () => { alert(singlemarker.message); }); markerGroup.addLayer(marker); this.map.addLayer(markerGroup); }); }); } } |
That’s it.. Now simply try adding a marker. It would get added onto the map and also would get stored on firestore. Cool right..?
Let’s move on to creating markers of different colors. Now the easiest way to do this is to use markers from this library.
Open up home.ts file again and change it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import { Component, ViewChild, ElementRef } from "@angular/core"; import { NavController, AlertController } from "ionic-angular"; import leaflet from "leaflet"; import { NativeGeocoder, NativeGeocoderForwardResult } from "@ionic-native/native-geocoder"; import { MarkersProvider } from "../../providers/markers/markers"; @Component({ selector: "page-home", templateUrl: "home.html" }) export class HomePage { @ViewChild("map") mapContainer: ElementRef; map: any; constructor( public navCtrl: NavController, private alertCtrl: AlertController, private nativeGeocoder: NativeGeocoder, public markersProvier: MarkersProvider ) {} ionViewDidEnter() { this.loadmap(); } loadmap() { this.map = leaflet.map("map").fitWorld(); leaflet .tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attributions: "www.tphangout.com", maxZoom: 14 }) .addTo(this.map); this.loadMarkers(); } addMarker() { let prompt = this.alertCtrl.create({ title: "Add Marker", message: "Enter location", inputs: [ { name: "city", placeholder: "City" } ], buttons: [ { text: "Cancel", handler: data => { console.log("Cancel clicked"); } }, { text: "Save", handler: data => { this.geoCodeandAdd(data.city); } } ] }); prompt.present(); } geoCodeandAdd(city) { this.nativeGeocoder .forwardGeocode(city) .then((coordinates: NativeGeocoderForwardResult) => { this.markersProvier.saveMarker(coordinates[0]); }) .catch((error: any) => console.log(error)); } loadMarkers() { var greenIcon = new leaflet.Icon({ iconUrl: "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png", shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png", iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }); this.markersProvier.getAllMarkers().subscribe((markers: any) => { markers.forEach(singlemarker => { let markerGroup = leaflet.featureGroup(); let marker: any = leaflet .marker([singlemarker.latitude, singlemarker.longitude], { icon: greenIcon }) .on("click", () => { alert(singlemarker.message); }); markerGroup.addLayer(marker); this.map.addLayer(markerGroup); }); }); } } |
Now watch the marker color; it would look like this.
You could obviously save details along with each marker and modify the click event to retrieve and show those details accordingly. Note that since we are using a forEach() and iterating through the list of returned markers, each and every marker appearing is an independent instance.
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Thanks for reading guys. Peace.. 
Plug – My course on building desktop apps with angular, electron and firestore from scratch is now out on udemy. Buy now.
