2

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);
El Dude
  • 5,328
  • 11
  • 54
  • 101

1 Answers1

0

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/

Bwyss
  • 1,736
  • 3
  • 25
  • 48
  • No, but you are right, I should try the default example and go from there. I was already deliberating whether it could be that my label graphic size does not match the iconSize...? Actually I hoped it would scale be the specified iconSize. – El Dude Jun 16 '15 at 18:12
  • I came back to this problem and tried using the example. I copied the graphics to the root folder and add them to the marker with icon : greenIcon . Doesnt work, it keeps showing the blue markers. I do not see an error log that it woulndt find the graphics... Any idea? – El Dude Jul 29 '15 at 00:13
  • Please find the edit with a working example where I am referencing an icon from a url. Hope this helps. – Bwyss Jul 30 '15 at 07:50
  • I agree, this works, but my app is Ionic / Angular based and I am using the angular-leaflet-directive. I set up the page like in the edited code above, and it runs without initializing a map object. My problem is obviously how to add markers to the "non existent" map object. Adding the marker to the array works, but displays the blue markers only... – El Dude Jul 30 '15 at 21:38
  • I now found this: http://tombatossals.github.io/angular-leaflet-directive/examples/0503-markers-icons-example.html . Hope it will help... – El Dude Jul 30 '15 at 21:44
  • Ah, I did not notice you were using the leaflet angular directive, yes, in that case you need to make use of the leaflet.extra-markers.js library as demoed in the changing the marker icons example. – Bwyss Aug 01 '15 at 07:05