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.

Next let’s install leaflet.

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

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

We have simply added a container using the div tags with id as map.

Open up home.ts and modify it as shown below.

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.

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.

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

Now use the below command to install the wrapper.

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

Now you would see the below screens.

The initial map:

Screenshot_2017-10-05-23-05-27

With Geolocation:

Screenshot_2017-10-06-16-55-32

With Markers.

Screenshot_2017-10-06-17-47-13

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.. :)

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.

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

        • Justine Lance T. Mojal

          please check if you have sufficient permission to get location on the said device

  • 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

  • Enzo Magsino

    it says cannot find module “leaflet”

    anyone who knows how to resolve this? :(

  • Kasun Sulochana

    I’ve some issue, when i reload i’ve an error who said “Error: Map Container Is Already Initialized”