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

Declarations

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit{

  constructor(public navCtrl: NavController) {

  }

  ngOnInit(): void {
    this.drawMap();
  }
  drawMap(): void {
    let map = Leaflet.map('map');
    Leaflet.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicGF0cmlja3IiLCJhIjoiY2l2aW9lcXlvMDFqdTJvbGI2eXUwc2VjYSJ9.trTzsdDXD2lMJpTfCVsVuA', {
      attribution: '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(map);

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

      Leaflet.marker(e.latlng).addTo(map)
          .bindPopup("You are within " + radius + " meters from this point").openPopup();

      Leaflet.circle(e.latlng, radius).addTo(map);
    }
    map.on('locationfound', onLocationFound);
    //alert on location error
    function onLocationError(e) {
      alert(e.message);
    }

    map.on('locationerror', onLocationError);
  }
}

Page HTML & SCSS

Add the map and remove padding from ion-content

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

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