I want to know if is possible change the default icon (blue), with another custom icon when the app is initialized, I read about how to change but I want a custom icon for the entire app.
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], // 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
},
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.
From the Leaflet documentation, see Icon.Default:
In order to change the default icon, just change the properties of
L.Icon.Default.prototype.options(which is a set ofIcon options).
E.g., include a line in your code that is:
L.Icon.Default.prototype.options.iconUrl = 'myNewDefaultImage.png';
You will probably also want to change the shadows and 2x icon for retina displays, which are set with options shadowUrl and iconRetinaUrl.
As the above solution did not work for me while using Leaflet-1.7, I was successful using this approach:
L.Marker.prototype.options.icon = L.icon({
iconUrl: "/path/to/markericon.png",
shadowUrl: "/path/to/markershadow.png"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With