Install Leaflet plugin for ionic 2

Ionic Framework ionic-v3
1

Anyone can help this.
I install this library https://github.com/Leaflet/Leaflet.markercluster 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,

1 Like
2

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() ?

3

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
http://stackoverflow.com/questions/41170835/leaflet-freedraw-in-ionic-2.
I didn’t find solution for this. Pro can help on this issue. Many thanks,

4

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

5

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

6

hey are you manage to solve this?

7

this is my step

  1. install leaflet - follow this url (http://stackoverflow.com/questions/39976098/usage-of-leaflet-with-ionic2-typescript).
  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.

image
Untitled.png322×561 36.9 KB

this is the code


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


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

   L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token={accessToken}', {
      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,
      accessToken: 'xxx'
    }).addTo(map);

    this.cluster.addLayer(L.marker([0,0]));
    this.cluster.addLayer(L.marker([0,0]));
    this.cluster.addLayer(L.marker([0,0]));

    map.addLayer(this.cluster);
}

}

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

3 Likes