Icône de marqueur personnalisé Angulaire Leaflet

Question

J'essaye de remplacer l'icône de marqueur par défaut existante par celle personnalisée. J'ai paramètres définis dans une variable:

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

et l'icône est appliquée à l'aide de l'option pointToLayer, qui spécifie une fonction:

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

mais il y a encore des icônes de marquage par défaut ->Plunker Qu'est-ce que je fais mal?

In the last example est ce que je veux montrer.

Answer 1

Désolé de ne pas pouvoir vous aider beaucoup. J'utilise AngularJS-Brochure-directive-cadre + ionique, voici ma partie de mon exemple de code (pour mes 2 cartes) pour votre référence:

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; 
     } 
    }); 
    };