The code for this post is available – here. (leave a star if you liked the repo !! )
Before trying to run this on a device, kindly scroll down and read the instructions for running this on devices. Thanks.
First let’s create a new project using the below command.
|
1
|
ionic start ionic3leaflet blank
|
Next let’s install leaflet.
|
1
|
npm install leaflet --save
|
Now open up index.html (inside src directory) and add the below link to the leaflet css file.
|
1
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> |
Now open up home.html and modify it as shown below.
|
1
2
3
4
5
6
7
8
9
10
11
|
<ion-header>
<ion-navbar>
<ion-title>
Maps
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="map" style="width:100%; height:100%;"></div>
</ion-content>
|
We have simply added a container using the div tags with id as map.
Open up home.ts 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
|
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import leaflet from 'leaflet';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
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: 18
}).addTo(this.map);
}
}
|
This will add a map to the device.
Now let’s add geolocation. To add geolocation we can simply call the locate() function.
Open home.ts file again 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
|
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import leaflet from 'leaflet';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
this.loadmap();
}
loadmap() {
this.map = leaflet.map("map").fitWorld();
leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attributions: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(this.map);
this.map.locate({
setView: true,
maxZoom: 10
}).on('locationfound', (e) => {
console.log('found you');
})
}
}
|
Now when you run the app, you will see that you are being taken to your location on the (or rather the location where your device is currently.
Let’s add a marker to the map as well.
Modify home.ts again 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
|
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import leaflet from 'leaflet';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
this.loadmap();
}
loadmap() {
this.map = leaflet.map("map").fitWorld();
leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attributions: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(this.map);
this.map.locate({
setView: true,
maxZoom: 10
}).on('locationfound', (e) => {
let markerGroup = leaflet.featureGroup();
let marker: any = leaflet.marker([e.latitude, e.longitude]).on('click', () => {
alert('Vous êtes ici!');
});
//marker.bindPopup("<h1>Vous êtes ici!</h1>").openPopup();
markerGroup.addLayer(marker);
this.map.addLayer(markerGroup);
}).on('locationerror', (err) => {
alert(err.message);
})
}
}
|
Now we have added a featuregroup, created a marker and added the marker to the feature layer. Then we add this layer to the map.
We can similarly add shapes, markers of different colors etc., to our map.
Running it on devices:
Now if you try running this on your device you won’t get the desired features. To do that one has to install the cordova-geolocation plugin first.
Use the below command to install cordova-geolocation plugin
For iOS you have to add this configuration to your configuration.xml file
<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
<string>We use your location for full functionality of certain app features.</string>
</edit-config>
Repo: https://github.com/apache/cordova-plugin-geolocation
Installation
- Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you" $ npm install --save @ionic-native/geolocation@4
|
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
|
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Geolocation } from '@ionic-native/geolocation';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
Geolocation,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
|
Run android.
Sources : https://tphangout.com/ionic-3-leaflet-maps-geolocation-markers/
https://ionicframework.com/docs/v3/native/geolocation/