Load default marker icons error while use Webpack

• I’ve looked at the documentation to make sure the behavior is documented and expected
• I’m sure this is a Leaflet code issue, not an issue with my own code nor with the framework I’m using (Cordova, Ionic, Angular, React…)
• I’ve searched through the issues to make sure it’s not yet reported

Steps to reproduce Steps to reproduce the behavior:

• L.marker([30.683628, 103.955644]).addTo(map)

Expected behavior

Just show the marker icons.

Current behavior

Cannot load the icon images and the following error occured:

Environment

• Leaflet version: 1.7.1
• Browser (with version): Chrome 87.0.4280.141 (x64)
• OS/Platform (with version): Windows10

Additional context

I use leaflet in webpack environment, and I load them async via import("leaflet").

The images are loaded as data url.

The issue

I reviewed the codes of leaflet, and found the following code:

https://github.com/Leaflet/Leaflet/blob/bd88f73e8ddb90eb945a28bc1de9eb07f7386118/src/layer/marker/Icon.Default.js#L42

The code always append the icon file name. However, webpack may load it as data url ( with prefix data:image/png;base64, ),

https://github.com/Leaflet/Leaflet/blob/bd88f73e8ddb90eb945a28bc1de9eb07f7386118/src/layer/marker/Icon.Default.js#L55

The code resolve image path by detecting marker-icon.png exactly and cannot process data url.

Solution

Replace the declaration of IconDefault:

export var IconDefault = Icon.extend({

    options: {
        iconUrl: 'marker-icon.png',
        iconRetinaUrl: 'marker-icon-2x.png',
        shadowUrl: 'marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41]
    },

    _getIconUrl: function (name) {
        if (!IconDefault.imagePath) { // Deprecated, backwards-compatibility only
            var path = this._detectIconPath(name);
            // Compatible with webpack
            // Don't attach data url onto IconDefault.imagePath.
           // Just return it as it is.
            if (path.indexOf('data:image/') === 0) {
                return path;
            }
            IconDefault.imagePath = path
        }

        // @option imagePath: String
        // `Icon.Default` will try to auto-detect the location of the
        // blue icon images. If you are placing these images in a non-standard
        // way, set this option to point to the right path.
        return (this.options.imagePath || IconDefault.imagePath) + Icon.prototype._getIconUrl.call(this, name);
    },

    _detectIconPath: function (name) {
        var el = create$1('div', 'leaflet-default-marker-' + name, document.body);
        var path = getStyle(el, 'background-image') ||
            getStyle(el, 'backgroundImage'); // IE8

        document.body.removeChild(el);

        if (path === null || path.indexOf('url') !== 0) {
            path = '';
        } else {
            // Compatible with webpack
            path = path.replace(/^url\((["']?)(.+?)(marker-(icon|shadow)\.png)?\1\)/, '$2');
        }

        return path;
    }
});

What’s more, some CSS should be touch:

https://github.com/Leaflet/Leaflet/blob/436430db4203a350601e002c8de6a41fae15a4bf/dist/leaflet.css#L396

Instead CSS content:

.leaflet-default-icon-path {
    background-image: url(images/marker-icon.png);
}

With following content:

.leaflet-default-marker-icon {
	background-image: url(images/marker-icon.png);
}
.leaflet-default-marker-icon-2x {
	background-image: url(images/marker-icon-2x.png);
}
.leaflet-default-marker-shadow {
	background-image: url(images/marker-shadow.png);
}

[hyjiacan]

Here is a patch function for the issue ( Webpack ENV ):

import markerIcon from 'leaflet/dist/images/marker-icon.png'
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
import markerShadow from 'leaflet/dist/images/marker-shadow.png'

function patchLeafletMarker(L) {
    var Icon = L.Icon;
    var IconDefault = Icon.Default;

    function getStyle(el, style) {
        var value = el.style[style] || (el.currentStyle && el.currentStyle[style]);

        if ((!value || value === 'auto') && document.defaultView) {
            var css = document.defaultView.getComputedStyle(el, null);
            value = css ? css[style] : null;
        }
        return value === 'auto' ? null : value;
    }

    // @function create(tagName: String, className?: String, container?: HTMLElement): HTMLElement
    // Creates an HTML element with `tagName`, sets its class to `className`, and optionally appends it to `container` element.
    function create$1(tagName, className, container) {
        var el = document.createElement(tagName);
        el.className = className || '';

        if (container) {
            container.appendChild(el);
        }
        return el;
    }

    IconDefault.prototype._getIconUrl = function (name) {
        if (!IconDefault.imagePath) {
            // Deprecated, backwards-compatibility only
            var path = this._detectIconPath(name);
            // Compatible with webpack
            // Don't attach data url onto IconDefault.imagePath
            if (path.indexOf('data:image/') === 0) {
                return path;
            }
            IconDefault.imagePath = path;
        }

        // @option imagePath: String
        // `Icon.Default` will try to auto-detect the location of the
        // blue icon images. If you are placing these images in a non-standard
        // way, set this option to point to the right path.
        return ((this.options.imagePath || IconDefault.imagePath) + Icon.prototype._getIconUrl.call(this, name); )
    }

    IconDefault.prototype._detectIconPath = function (name) {
        var el = create$1('div', 'leaflet-default-marker-' + name, document.body);
        var path = getStyle(el, 'background-image') || getStyle(el, 'backgroundImage'); // IE8

        document.body.removeChild(el);

        if (path === null || path.indexOf('url') !== 0) {
            path = '';
        } else {
            // Compatible with webpack
            path = path.replace(/^url\((["']?)(.+?)(marker-(icon|shadow)\.png)?\1\)/, '$2');
        }

        return path;
    }
    // CSS
    var css = [
      `.leaflet-default-marker-icon {background-image: url(${markerIcon});}`,
      `.leaflet-default-marker-icon-2x {background-image: url(${markerIcon2x});}`,
      `.leaflet-default-marker-shadow {background-image: url(${markerShadow});}`
    ].join('\n')
    const style = create$1('style', null, document.head)
    style.setAttribute('data-type', 'leaflet-marker-patch')
    style.appendChild(document.createTextNode(css))
}

[hyjiacan]

You can also try #7092.

Thanks, it seems the PR has not been merged. I need an easy way to fix it rather than waiting for the next release.