I've been working on implementing Marker clusters in Angular 6, and while the markers themselves are displaying correctly, I'm having trouble setting the icons. Here is a screenshot for reference: https://i.sstatic.net/aQoau.jpg.
Here is the HTML code snippet:
<div leaflet style="height: 400px;"
[leafletOptions]="Options"
[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)">
</div>
And here is the corresponding TypeScript 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> — Map data © <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
};
// More code continues...
The issue lies with the icon setup, as the expected results are not being achieved. I attempted to use IconCreateFunction but it did not produce the desired outcome. Any assistance or insights would be greatly appreciated. Thank you.
Expected Results:
Current Results:
Please note that I am seeking solutions specific to Angular 6.