I am trying to add a custom marker picture but it keeps giving me the standard blue marker. Here's my custom marker definition:
var aMarker = {
lat:location.lat,
lng:location.lng,
message: location.name,
// focus: true,
draggable: false,
getMessageScope: function() { return $scope; },
message: '<button class="icon-left ion-information-circled" ng-click=""></button> '+location.name,
compileMessage: true,
'icon': {
'type': "awesomeMarker", // i use awesomeMarker for font awesome
'icon': spotMarkerIcon, // a variable for my icon
}
};
var spotMarkerIcon = L.icon({
iconUrl: './images/SpotMarker.png'
});
angular.extend($scope,{
defaults: {
tileLayer: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
maxZoom: 16,
zoomControlPosition: 'topright',
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
angular.extend($scope,{
markers : new Array()
});
$scope.markers.push(aMarker);
Have you tried to define the dimensions of the icon like this:
EDIT: Here is a working example: http://jsfiddle.net/beLxbfep/