data-urls in L.Icon.Default

• 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:

  var myIcon = L.Icon.Default.extend({options: {
    iconUrl: 'data:image/png;base64,iVBORw...'
  }});

Expected behavior There is nothing special in data url, so I expect this code to work flawlessly.

Current behavior Unfortunately there is path-guessing magic in code (#4605) which fails to deal with data-url.

Environment

• Leaflet version: 1.4.0
• Browser (with version): Google Chrome Version 71.0.3578.98 (Official Build) (32-bit)
• OS/Platform (with version): Windows 8.1 (32-bit)

Additional context Current workaround:

  L.Icon.Default.imagePath = ' ';

But better to improve magic to take into account data-urls here: https://github.com/Leaflet/Leaflet/blob/61ef1776ac3c7afc5dec5ce4dfab8986ff9f5376/src/layer/marker/Icon.Default.js#L45-L59

Or here: https://github.com/Leaflet/Leaflet/blob/61ef1776ac3c7afc5dec5ce4dfab8986ff9f5376/src/layer/marker/Icon.Default.js#L33-L43

Minimal example reproducing the issue

I haven’t got simple example, but will make if it will be necessary.

[jaythomas]

@ghybs I originally tried all the suggestions on that thread but couldn’t comment because the thread was locked. With my code verbatim to the code snippet suggested:

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

The icon url strings are being mutated after being passed to the options objects. The only solution I didn’t try was the leaflet-defaulticon-compatibility third-party library and was exploring other possible solutions first.

Edit: Just went back and loaded the leaflet-defaulticon-compatibility library and it works. (Thanks for that link.) I would make a PR to update the readme to suggest this solution so others like me don’t have to hunt through github issues but it seems odd to have the readme link to an unofficial repo to wrap their own library’s css to fix the styling.

[ghybs]

Hi @jaythomas,

The situation you describe is duplicate of #4968.