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 © <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:
