Install Leaflet plugin for ionic 2


Anyone can help this.
I install this library for ionic 2 by using this command
npm install leaflet.markercluster --save

Then I imported into *.ts file
import * as L from ‘leaflet’;
import * as LM from ‘leaflet.markercluster’;

and used it:
var markers = LM.markercluster();
But I got this error.
EXCEPTION: WEBPACK_IMPORTED_MODULE_2_leaflet_markercluster.markercluster is not a function

Many thanks,


Is it supposed to be a function? It isn’t mentioned in the document you linked to. Are you sure you don’t want markerClusterGroup() ?


Hey, I also changed it to
var markers = LM. markerClusterGroup();
I still received this error.
WEBPACK_IMPORTED_MODULE_2_leaflet_markercluster.markerClusterGroup is not a function

I researched more and find this topic
I didn’t find solution for this. Pro can help on this issue. Many thanks,


Perhaps you might be able to crib something useful from angular2-leaflet-starter.


I can use leaflet normally. Only have problem when install plugin of leaflet into ionic 2 project (As to the leaflet.freedraw leaflet plugin, I think js plugins in typescript is an headache unless they have a TS definition file.)


hey are you manage to solve this?


this is my step

  1. install leaflet - follow this url (
  2. npm install leaflet.markercluster --save
  3. npm install --save @types/leaflet.markercluster
  4. copy the markercluster.css and markercluster.default.css into your scss file.
  5. done.

this is the code

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

import 'leaflet';
import 'leaflet.markercluster';
  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  constructor(public navCtrl: NavController) {
    this.cluster = L.markerClusterGroup();
  ngOnInit(): void {
   let map ='map')
      .setView([51.505, -0.09], 13);

   L.tileLayer('{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
      maxZoom: 18,
      accessToken: 'xxx'




p/s this is on the website (ionic-serve)