Ionic 3 – Leaflet maps – Geolocation & Markers

Hi Friends,

Hope you are all well. This is one of the most requested posts on this site. In this post let’s see how to use leaflet.js library to include a map inside your Ionic apps. We’ll also see how to do a simple geolocation and place a marker at a co-ordinate on the map.

Let’s begin.

A screencast of this post

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.

ionic start ionic3leaflet blank

1	ionic start ionic3leaflet blank

Next let’s install leaflet.

npm install leaflet --save

1	npm install leaflet --save

Now open up index.html (inside src directory) and add the below link to the leaflet css file.

<link href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" rel="stylesheet">

1	<link href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" rel="stylesheet">

Now open up home.html and modify it as shown below.

<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>

<ion-header>

<ion-navbar>

<ion-title>

Maps

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

</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.

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);
  }

}

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.

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 &copy; <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');
      })

  }

}

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.

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 &copy; <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('Marker clicked');
      })
      markerGroup.addLayer(marker);
      this.map.addLayer(markerGroup);
      }).on('locationerror', (err) => {
        alert(err.message);
    })

  }

}

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', {

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('Marker clicked');

})

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

ionic cordova plugin add cordova-plugin-geolocation

1	ionic cordova plugin add cordova-plugin-geolocation

Now use the below command to install the wrapper.

npm install @ionic-native/geolocation --save

1	npm install @ionic-native/geolocation --save

Add Geolocation import to the app.module.ts file as shown below.

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 {}

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 {}

Now you would see the below screens.

The initial map:

With Geolocation:

With Markers.

Try clicking on the marker and see what happens.

Explore the mapbox product for more customised maps and a ton of other cool features that can be added to your leaflet maps.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace..

Follow me

Liked it? Take a second to support admin on Patreon!

Humberto Llauradó Falcó

Hi, That is a great article, but I have a question about the geolocation. In some device the geolocation plugin is not working well even when the geolocation device is actived. Do you know waht is the reason and how I can fix this problem? Thank you for those great articles.
- raja yogan
  
  Do you get any errors sir, if yes, could you post it here..?
  - Humberto Llauradó Falcó
    
    The problem is in some devices, exactly never enters the geolocation.getCurrentPosition function.
Md. Azizul Alam (Toton)

Helpfull. Can I use custom mbtiles file with http request over internet? I found leaflet-tilelayer-mbtiles npm library but I dont know how to use that. There is another github project https://github.com/0nza1101/ionic3-leaflet-mbtiles. unfortunately which is not running
jagpreet singh

Any idea on adding a search box ? (Use Case: Search for location and place the markers depending upon the search)
Paul Cannell

ANy idea how you get a reference to a marker so you can remove it later?
ابو الحارث السوداني

good is worck
but how can get many locations mark from json file ..?
Rashmut

Hi Raja Yogan,
I thank you for your tutos, very goood work!
Do you have Skype or Viber? I really need to discuss about some developement details
Please, let me know here : belkedah.bilal@gmail.com
Thanks a lot and very soon
Carole Hermouet

Hi, thank you very much for your great article ! I’ve some issue, when i reload i’ve an error who said “Error: Map Container Is Already Initialized”. Could you help me to fix it ? Thank you, have a nice day !
Dharan

please post angular 2 geolocation
Juan Mamani

Thanks for sharing! I’ve troubles to build apk…
Oliver Karst

Very interesting post and very good explained.
When following your post everything is fine running in browser with ionic serve.

May you can help me when trying to use that example on a webserver/mobile device?

Problems:
When generating a static web page via ionic build and copy the files to www folder of a web-server it throws an error: Geolocation error: Only secure origins are allowed.
As well it shows in the developer console: Failed to load resource: the server responded with a status of 404 (Not Found)

Generated an apk for Android and run on a device with Android => 6.0 it throws the error:
Alert Geolocation error: application does not have sufficient geolocation permissions.

Great example, but how to let it run standalone on a device or web-server without ionic serve?
- Oliver Karst
  
  Hi,
  solved the issues. What I did:
  – when deploying to a web server chrome wants to have https! not http! Only using http with geolocation results in an error. When you only display a map, when http is okay, but when you want to locate the current position chrome wants to have a https connection to the web server
  – building the app for android requires for the geolocation plugin minimum android 6.3.0!
  You can check if it is present via cordova platform rm android && ionic cordova platform add android@6.3.0
  May you need afterwards to reinstall npm i android-versions –save
  – building the app for iOS requires a change in info.plist. You can change the config.xml and adding this piece for iOS
  
  This App wants to track your location
  
  Hope that helps others struggling with build and deploy problems to web server or android

T-Pub :)

The Techies' pub

Ionic 3 – Leaflet maps – Geolocation & Markers

Read previous post:

Chat app with Ionic 3 & Firebase – Ep. 16 – Sending messages in groups