How to integrate Leaflet Marker Cluster in angular 5 - leaflet

Question

I want to integrate leaflet marker cluster in angular 5. Here is the
reference :https://github.com/Asymmetrik/ngx-leaflet-markercluster

Answer 1

I have a leaflet in angular 8
1 install the libraries.
npm install leaflet
npm install #asymmetrik/ngx-leaflet
npm install --save-dev #types/leaflet
npm install leaflet.markercluster #asymmetrik/ngx-leaflet-markercluster
npm install #types/leaflet #types/leaflet.markercluster
2 in the file angular.json
"styles": [
"src/styles.css",
"node_modules/leaflet/dist/leaflet.css",
"node_modules/leaflet.markercluster/dist/MarkerCluster.css",
"node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/leaflet/dist/leaflet.js",
]
3 in the app.module.ts file
import { LeafletModule } from '#asymmetrik/ngx-leaflet';
import { LeafletMarkerClusterModule } from '#asymmetrik/ngx-leaflet-markercluster';
imports: [
LeafletModule.forRoot(),
LeafletModule,
LeafletMarkerClusterModule
],
4 in the html file example “mapa.component.html”
<div id="mimapa" style="height: 400px;"
leaflet
[leafletLayers]="layers"
(leafletMapReady)="onMapReady($event)"
(leafletClick)="get_coord($event)"
[leafletOptions]="options"
[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)">
</div>
5 in the ts file example “mapa.component.ts”
import * as L from 'leaflet';
import 'leaflet.markercluster';
import 'leaflet/dist/images/marker-shadow.png';
import 'leaflet/dist/images/marker-icon.png';
variables
coord:any=[];
options;
layersControl;
layers;
tile_map;
map;
// Marker cluster stuff
markerClusterGroup: L.MarkerClusterGroup;
markerClusterData: L.Marker[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions;
functions
constructor(private httpService:ServicesService) { }
ngOnInit(): void {
this.get_all_latlog();
}
onMapReady(map) {
this.map = map;
}
get_all_latlog(){
this.httpService.http_get_all_latlog_user().subscribe(
res =>{
this.coord=res;
this.refreshData();
},
err =>{
console.log(err);
}
)
this.muestra_mapa();
}
/*
* Show map.
*/
muestra_mapa(){
let center_lat=8.672839;
let center_lon=-80.101051;
this.options = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© OpenStreetMap' }),
],
zoom: 7.5,
center: L.latLng(center_lat, center_lon)
};
this.tile_map=this.options;
}
/*
* Get the coordinates by clicking on the map.
*/
//get_coord(map: L)
get_coord(map: any){
let latlog=map.latlng.toString().split(", ");
let latitud=latlog[0].substring(latlog[0].indexOf("(")+1,latlog[0].length);
let longitud=latlog[1].substring(0,latlog[1].length-1);
let popup = L.popup();
this.layers = [
popup.setLatLng(map.latlng).setContent('latitud: '+latitud+'<br>Longitud: '+longitud)
];
}
/*
--------------------------------------------------------------------------
MAKER CLUSTER
--------------------------------------------------------------------------
*/
markerClusterReady(group: L.MarkerClusterGroup){
this.markerClusterGroup = group;
}
refreshData(): void {
this.markerClusterData = this.generateData(this.coord);
}
generateData(coord:any): L.Marker[] {
const data: L.Marker[] = [];
let greenicon = L.icon({
iconUrl: 'assets/leaflet/img/marker-icon-green.png',
shadowUrl: 'assets/leaflet/img/marker-shadow.png',
iconSize: [25, 41],
shadowSize: [41, 41],
iconAnchor: [25, 41],
shadowAnchor: [25, 41],
popupAnchor: [-12, -33]
});
for (let i = 0; i < coord.length; i++) {
if(this.coord[i][5]=="users"){
data.push(L.marker([Number(this.coord[i][0]),Number(this.coord[i][1])])
.bindPopup('information'));
}
else{
data.push(L.marker([Number(this.coord[i][0]),Number(this.coord[i][1])],{icon: greenicon})
.bindPopup('information'));
}
}
return data;
}
}