CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
anthonyhumphreys
anthonyhumphreys

Reputation: 1081

Marker icon always default

I am using Leaflet to display a map in an ionic app and I am using https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers to enable clustering.

I can't seem to get my custom icon to display though, i always get the blue default.

First I create the markerClusterGroup

  var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
    showCoverageOnHover: true,
    zoomToBoundsOnClick: true
  });

Then I create the Icon:

  var myIcon = L.icon({
      iconUrl: '<myiconurl.png>'
  });

I then populate the markers array by looping through an array of objects I need to display on the map, and bind a pop[up to each marker too.

for (var i = 0; i < $scope.arrayOfVenues.length; i++) {
    var name = $scope.arrayOfVenues[i].name;
    var id = $scope.arrayOfVenues[i].venueID;
    var image = $scope.arrayOfVenues[i].venueImageURL;
    var distanceTo = "4 Miles Away";
    var popupContent = "<div style='height:200px;width:100%;position:relative;cursor:pointer;z-index:999999' nav-transition='ios' onclick='window.navDetails(" + id + ")'><img style='object-fit: cover;position:absolute;left:0;top:0;' height='200' width='100%' src='" + image + "'/><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:3vh;left:14px;font-size:3vh;'>" + name + "</h3><h3 style='color:#FFFFFF !important;position:absolute;z-index:100;bottom:0;left:14px;font-size:2.5vh;'>" + distanceTo + "</h3></div>"
    markers.addLayer(L.marker([
      $scope.arrayOfVenues[i].latitude,
      $scope.arrayOfVenues[i].longitude, {
        title: $scope.arrayOfVenues[i].name,
        riseOnHover: true,
        icon:myIcon
      }
    ]).bindPopup(popupContent, {
      maxWidth: 300,
      minWidth: 300,
      minHeight: 300,
      maxHeight: 300
    }));
    debugger
  }
   mymap.addLayer(markers);

Once displayed on the map, everything works okay except i still have the default marker icons.

Any tips?

Upvotes: 0

Views: 590

Answers (1)

stholzm
stholzm

Reputation: 3455

Just from looking at the code, I believe a closing bracket is misplaced:

markers.addLayer(L.marker([
  $scope.arrayOfVenues[i].latitude,
  $scope.arrayOfVenues[i].longitude
], {
    title: $scope.arrayOfVenues[i].name,
    riseOnHover: true,
    icon:myIcon
  }
)

Upvotes: 2

Related Questions