CODEWITHSUNDEEP
angulartypescriptleafletangular6leaflet.markercluster
JustAnotherDataEnthusiast
JustAnotherDataEnthusiast

Reputation: 690

Leaflet Marker Clusters - Angular 6 (Cluster Icon)

I am trying to implement the Marker clusters in Angular 6. Markers are working fine. But the Icons are not getting set. Please see the below screenshot.( https://i.sstatic.net/aQoau.jpg ).

HTML code:

<div leaflet style="height: 400px;" 
     [leafletOptions]="Options" 
     [leafletMarkerCluster]="markerClusterData" 
     [leafletMarkerClusterOptions]="markerClusterOptions" 
     (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

Code:

this.options = {
  layers: [
    tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
      minZoom: 7,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; 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>'
    })],
  center: latLng(53.408, -9.128),
  zoom: 8.5
};

markerClusterGroup = L.markerClusterGroup({
});
markerClusterData: any[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions;

markerClusterReady(group: L.MarkerClusterGroup) {

this.markerClusterGroup = group;
}

generateData() {
var addressPoints = [
  [53.537213887794579, -8.741433234420502],
  [53.531359980587304, -8.88873038570684],
  [53.536246630737267, -9.044410275854199],
  [53.388830603160024, -8.709717367294882],
  [53.536246630737267, -9.044410275854199],
  [53.387531019889508, -8.711018149247034],
  [53.537761167135095, -8.664822693474337],
  [53.456925611851041, -9.000062798412451],
];
  const data: any[] = [];
  for (let i = 0; i < addressPoints.length; i++) {

        const icon = L.icon({
            iconUrl: 'assets/marker-icon.png',
    shadowUrl: 'assets/marker-shadow.png'
        });

        data.push(L.marker([ addressPoints[i][0], addressPoints[i][1] ],{icon:icon}));
    }

    this.markerClusterData = data;

}

I tried with the IconCreateFunction but was not able to get the expected results. Please let me know if I am missing something. Thank you in advance.

Expected Results:

Current Results:

Note: I want the expected results in Angular 6.

Upvotes: 1

Views: 2387

Answers (1)

kboul
kboul

Reputation: 14570

What you are missing is importing the appropriate styles from native leafletcluster library in order the colored circles to be rendered.

In your angular.json define:

..
"styles": [
          "node_modules/leaflet/dist/leaflet.css",
          "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
          "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
          "src/styles.css"
],
...

Don't forget to restart your app again after importing the styles (stop the server and hit ng serve)

Demo

Upvotes: 3

Related Questions