Is it possible to change the default blue icon with a custom icon when initializing the app? I have read about how to change it, but I want a unique icon for the entire application.
HTML
<div ng-controller="CustomizedMarkersController">
<button type="button" class="btn btn-primary padright" ng-click="markers.m1.icon=icon" ng-repeat="(key, icon) in icons">{{ key }}</button>
<leaflet markers="markers" center="lisbon"></leaflet>
</div>
JS
app.controller("CustomizedMarkersController", [ '$scope', function($scope) {
var local_icons = {
default_icon: {},
leaf_icon: {
iconUrl: 'examples/img/leaf-green.png',
shadowUrl: 'examples/img/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
},
div_icon: {
type: 'div',
iconSize: [230, 0],
html: 'Using <strong>Bold text as an icon</strong>: Lisbon',
popupAnchor: [0, 0]
},
orange_leaf_icon: {
iconUrl: 'examples/img/leaf-orange.png',
shadowUrl: 'examples/img/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62]
}
};
angular.extend($scope, {
icons: local_icons
});
angular.extend($scope, {
lisbon: {
lat: 38.716,
lng: -9.13,
zoom: 8
},
markers: {
m1: {
lat: 38.716,
lng: -9.13,
message: "I'm a static marker",
icon: local_icons.default_icon,
},
},
defaults: {
scrollWheelZoom: false
}
});
}]);
Based on this example.