Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the default icon pin on leaflet directive?

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.

like image 879
Tabares Avatar asked Nov 04 '16 01:11

Tabares


Video Answer


2 Answers

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 of Icon 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.

like image 159
user2441511 Avatar answered Nov 04 '22 09:11

user2441511


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"
});
like image 45
jrief Avatar answered Nov 04 '22 09:11

jrief