How to use leaflet marker cluster in ionic v3

#1

hi Im building an ionic v3 app. in one of my app pages I show about 500 dots as markers in leaflet map.
the problem is when i zoom out to see the whole 500 dots in city, i see a buble made by Condensed markers. then i searches and got familiar with leaflet marker cluster. but i dont know how to use it in ionic v3.
any help? thanks!
here is my code:{}

initializeMap() {

    console.log('==> initializeMap()')
    this.platform.ready().then(() => {
        console.log("Device is ready! View did enter!");
        let options = {
            enableHighAccuracy: true,
            timeout: 2000,
            maximumAge: 0
        }
        this.geolocation.getCurrentPosition(options).then((resp) => {
            console.log("My position: " + resp.coords.latitude + ", " + resp.coords.longitude);
            this.myLocation = resp;
            this.loadmap(resp.coords.longitude, resp.coords.latitude);
        }).catch((error) => {
            this.loadmap();
        });
    });
}
loadmap(lat = 35.6892, lon = 51.3890) {
    let obj = {};
    if (lat && lon) {
        obj = {
            center: [lon, lat],
            zoom: 11
        }
    } else {
        obj = {
            zoom: 11
        }
    }
    document.getElementById('weathermap').innerHTML = "<div id='map'></div>";
    // if (!this.map)
    this.map = leaflet.map("map", obj);
    console.log('this is map')
    console.log(this.map);
    this.map.invalidateSize();

    leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attributions: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \' +\n' +
            '            \'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \' +\n' +
            '            \'Imagery © <a href="http://mapbox.com">Mapbox</a>\',',
        maxZoom: 18
    }).addTo(this.map);
    this.map.locate({
        setView: true,
        maxZoom: 18,

    })
    this.getSalonsWithLocation(this.offset);
    this.map.on('moveend', (e) => {
        this.center = this.map.getCenter();
        console.log(this.center);

    });

}

getSalonsWithLocation(offset = 0) {
    let ref = this;
    let service = 'salon';
    let body = '';
    let loading = this.loadingCtrl.create({
        content: ' بارگیری آرایشگاه ها...'
    });

    loading.present();
    this.http.postRequest(service + '/' + 'allWithLocation' + '/500/' + offset, body, true).then(res => {
        loading.dismiss();
        this.showSpinner = false;
        var data_temp: any = res;
        var array = [];
        array = this.items;
        if (data_temp) {
            if (data_temp.posts) {
                data_temp.posts.forEach(element => {
                    array.push(element);
                });
                this.items = array;
            }

            if (service == 'salon') {
                if (data_temp.salons) {
                    data_temp.salons.forEach((element, index) => {
                        array.push(element);
                        let loc = element.location[(element.location.length -1)];
                        console.log('loc', loc);
                        var marker = leaflet.marker([loc.lat, loc.lng]).addTo(this.map);
                        marker.bindPopup("<b>" + element.name + "</b>").openPopup();
                        marker.on("click", function (event) {
                            ref.showSalonDatas(element, index);
                            // console.log('clicked on ', element);
                            // element.expand = 'expand';
                            // element.type = 'salon';
                            // ref.app.getRootNav().push(SingleBussinessPage, { item: element });
                            // do some stuff…
                        });
                    });
                } else {
                    this.offset = this.offset - 10;
                }
                // this.items = array;
                console.log('here we go!');
            }
        }
        if (this.items.length == 0) {
            console.log('==> check this.items.length', this.items.length)
            this.show_nothing = true;
        } else {
            this.show_nothing = false;
        }

    });

and this is map page:

#2
#3

any help?
many thanks

#4

Here is a link to my Pen on CodePen with some examples of leaflet clustering. Fork it and play around, and you will wrap your head around it eventually.
Feel free to ask any specific questions if you need to.

As mentioned by avishai_peretz_dev above, you need to use leaflet plugin for clustering.