Here is a basic demo app I made to show the use of Leaflet with Mapbox tiles in an Ionic 2 app.

The full code for this project can be found on github

You can add a simple leaflet map to any Ionic 2 app easily in just a few steps.

Install leaflet

First we need to install leafletjs and its typing

npm install leaflet --save
typings install dt~leaflet --global --save


Add leaflet to /src/declarations.d.ts

declare module '*'; //you should already have this
declare module 'leaflet'; //you must add this

Setup leaflet CSS and Images

copy images folder and leaflet.css from /node_modules/leaflet/dist/ into /www/assets/

cp -a node_modules/leaflet/dist/images www/assets/

cp node_modules/leaflet/dist/leaflet.css www/assets/

then import leaflet.css in your /www/index.html

<link href="build/main.css" rel="stylesheet"> //this should already exist

<link href="assets/leaflet.css" rel="stylesheet"> //add this below the first

Add a leaflet map to any page

Here we add leaflet to a blank page called home which is the default in a blank app generated by the ionic-cli

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as Leaflet from 'leaflet';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage implements OnInit{

  constructor(public navCtrl: NavController) {


  ngOnInit(): void {
  drawMap(): void {
    let map ='map');
    Leaflet.tileLayer('{z}/{x}/{y}?access_token=pk.eyJ1IjoicGF0cmlja3IiLCJhIjoiY2l2aW9lcXlvMDFqdTJvbGI2eXUwc2VjYSJ9.trTzsdDXD2lMJpTfCVsVuA', {
      attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
      maxZoom: 18

    //web location
    map.locate({ setView: true});

    //when we have a location draw a marker and accuracy circle
    function onLocationFound(e) {
      var radius = e.accuracy / 2;

          .bindPopup("You are within " + radius + " meters from this point").openPopup();, radius).addTo(map);
    map.on('locationfound', onLocationFound);
    //alert on location error
    function onLocationError(e) {

    map.on('locationerror', onLocationError);


Add the map and remove padding from ion-content

<ion-content [attr.noScroll]="shouldScroll">
<div id="map"></div>

Edit your page SCSS to make sure the leaflet map fills the frame and doesn’t scroll.

page-home {
  [noScroll] {
    overflow: hidden;

  #map {
    height: 100%;
    width: 100%;