How to change the default icon pin on leaflet directive?

Question

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.

user2441511 · Answer 1 · 2016-11-04T18:38:08.987

7

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.

edited Nov 04 '16 at 18:38

answered Nov 04 '16 at 18:15

user2441511

11,036
3
25
50

I just found this answer and no one accepted this as the correct answer so I will. This example script updated the default icon with my custom new icon to replace the default. Thank you user2441511. – TonyT May 29 '18 at 00:04
1

I wanted to hide the icon, since it was being used by the Leaflet-Draw plugin whenever you were in editing mode. Setting these variables to `null` displayed a broken image. If you want to hide the icon completely you can set `L.Icon.Default.prototype.options.iconSize = [0, 0];` and `L.Icon.Default.prototype.options.shadowSize = [0, 0];` – wfgeo Aug 21 '19 at 08:22

score 5 · Answer 2 · answered Jun 10 '21 at 11:36

5

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"
});

answered Jun 10 '21 at 11:36

jrief

1,516
13
9

score 0 · Answer 3 · answered Mar 07 '22 at 10:00

use this code for customize draw plugins

var drawPluginOptions = {
  position: 'topright',
  draw: {
    polyline: false,
    polygon: false,
    circle: false, // Turns off this drawing tool
    rectangle: false,
    circlemarker: false,
    marker: {
    title: "markerTest",
      icon: new MyCustomMarker()
    }
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

and add to map

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;
    
    /*if(layer.title == "Place hospital marker"){
        do this...
    }*/

  editableLayers.addLayer(layer);
});```

How to change the default icon pin on leaflet directive?

3 Answers3