Leaflet js adding custom marker pic fails

1.4k views Asked by At

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>&nbsp;&nbsp;&nbsp;'+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);
1

There are 1 answers

6
Bwyss On

Have you tried to define the dimensions of the icon like this:

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

EDIT: Here is a working example: http://jsfiddle.net/beLxbfep/