Angular Leaflet custom marker icon

Question

I'm trying to override existing default marker icon with the custom one. I've defined parameters in a variable:

var ratIcon = L.icon({
    iconUrl: 'http://andywoodruff.com/maptime-leaflet/rat.png',
    iconSize: [60,50]
});

and the icon is applied to the through the pointToLayer option, which specifies a function:

pointToLayer: function(feature,latlng){
  return L.marker(latlng,{icon: leafIcon});
}

but there are still default marker icons -> Plunker What I'm doing wrong?

In the last example is what I want to show.

Please refer to the similar answer here: https://stackoverflow.com/a/26831200/4292656 — Kyros Koh, Sep 17 '15 at 15:24
Thanks @KyrosKoh, it's similar answer, but unfortunately it still doesn't work :( [plunker](http://plnkr.co/edit/fKb0YuQZeqen3peDBbaI?p=preview) — corry, Sep 18 '15 at 12:54

score 1 · Answer 1 · answered Sep 19 '15 at 16:16

Sorry that I can't help you much. I use AngularJS-Leaflet-Directive + Ionic Framework, here's my part of my sample code (for my 2 maps) for your reference:

var greenIcon;
var greenIcon2;

$scope.closeAddMarker = function()
  {
    $scope.modal.hide();
    $scope.clearFile();
    $scope.removeGreenIcon();
  }

  $scope.addMarker = function(locationEvent)
  {
    $scope.newLocation = new Location();
    $scope.newLocation.lat = locationEvent.leafletEvent.latlng.lat;
    $scope.newLocation.lng = locationEvent.leafletEvent.latlng.lng;

    var markerIcon = L.icon(
    {
      iconUrl: 'lib/leaflet/images/location-marker.png',
      shadowUrl: 'lib/leaflet/images/marker-shadow.png',
      iconSize:     [25, 41], // size of the icon
      shadowSize:   [41, 41] // size of the shadow
    });

    //check valid user

    if(localStorage.getItem("username"))
    {
      leafletData.getMap("map1").then(function(map1)
      {
        greenIcon = L.marker([Number($scope.newLocation.lat), Number($scope.newLocation.lng)], {icon: markerIcon}).addTo(map1);
      });

      leafletData.getMap("map2").then(function(map2)
      {
        greenIcon2 = L.marker([Number($scope.newLocation.lat), Number($scope.newLocation.lng)], {icon: markerIcon}).addTo(map2);
      });
    }

    $scope.modal.show();
  }

  $scope.removeGreenIcon = function()
  {
    leafletData.getMap("map1").then(function(map1)
    {
      if(greenIcon != null)
      {
        map1.removeLayer(greenIcon);
        greenIcon =null;
      }
    });

    leafletData.getMap("map2").then(function(map2)
    {
      if(greenIcon2 != null)
      {
        map2.removeLayer(greenIcon2);
        greenIcon2 =null;
      }
    });
  };

Angular Leaflet custom marker icon

1 Answers1