ghybs / leaflet-defaulticon-compatibility

Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS.

leaflet-defaulticon-compatibility

Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS. Demo with webpack (and without this plugin).

Size: < 2kB minified

Note: here, "compatibility" does not refer to browser compatibility, but with build engines and frameworks that modify URL's in CSS, which often conflicts with Leaflet built-in Default Icon images automatic management. See issue Leaflet/Leaflet#4698 for more details.

Usage

$ npm install leaflet-defaulticon-compatibility --save

Load this plugin CSS and JS files after Leaflet CSS and JS. Then the Leaflet default icon should automatically work again, even if your build engine or framework modifies the URL's in CSS, typically:

• webpack with style-loader + css-loader + file-loader or url-loader
• Rails with Asset Pipeline
• Django with pipeline

For example for webpack with style-loader + css-loader + file-loader:

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

CSS file

This plugin provides 2 similar CSS files:

• leaflet-defaulticon-compatibility.css: use it by default.
• leaflet-defaulticon-compatibility.webpack.css: alternative for webpack / bundlers that understand the ~leaflet syntax to navigate to other packages in node_modules. This avoids duplicating the images/marker-icon.png file from leaflet.css, hence saving some bytes, especially when the images is inlined as DataURI/base64 (even though with gzip compression this should not be an issue).

Warning: Data URI (base64) images performance

Some bundlers automatically replace url(path) in CSS by Data URI (aka base64-encoded) image (i.e. url(data:image/png;base64,SOME_DATA)). That is typically the case of webpack url-loader and Django pipeline.

If your map displays hundreds of Markers using this inlined image as icon, be aware that it will affect the browser performance much more quickly than using a normal URL file.

Fix: Firefox high contrast (colours override) option

This plugin also fixes an edge case in Firefox when a user has configured their browser to always override the websites colours.

When that option is set to "Always" in Firefox preferences, all background images are removed. Therefore Leaflet can no longer detect the default icon images path that was clued through CSS .leaflet-default-icon-path class background-image rule.

In that case, this plugin will try to use the cursor rule instead which is not affected by Firefox colours override option. Therefore the plugin CSS duplicates the images path in both background-image and cursor rules.

However, if you use this plugin to specify your own icon in CSS, make sure to still use background-image rule as the first mean to pass your images path, because Internet Explorer always interpretes URL's in cursor rule as absolute.

License

leaflet-defaulticon-compatibility is distributed under the BSD 2-clause "Simplified" License, like Leaflet.

leaflet-defaulticon-compatibility's Issues

not working on leaflet 1.6

using laravel mix 5.0.4

Undefined not found error

Hello,

I've stumbled upon this repo searching for the a solution for the much discussed error:
GET data:image/png;base64,iVB ........... YII=")marker-icon-2x.png net::ERR_INVALID_URL

I followed the outlined steps

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';

And after importing leaflet:
import 'leaflet-defaulticon-compatibility';

And I still get
GET http://localhost:55288/undefined 404 (Not Found) undefined:1

I'm using electron 8.5.2, electron-webpack 2.8.2 and webpack 4.42.1

Thanks a lot!

Missing esm module file

Hello

Hope you are well

I migrate Laravel application from Mix.js to Vite.js

When I try to import package I receive such error

[commonjs--resolver] Failed to resolve entry for package "leaflet-defaulticon-compatibility". 
The package may have incorrect main/module/exports specified in its package.json.

values from curren published npm package build

  "main": "dist/leaflet-defaulticon-compatibility.js",
  "module": "src/Icon.Default.compatibility.js",

Current file structure

As you see src dirrectory is not present

Working configuration with Rails 6 & Webpacker without Sprockets?

After several hours I haven't been able to get it up and running. Still image errors.

I yarn added both packages (leaflet and this one).

packs/application.js contains:

import L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

packs/application.scss contains:

import L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

No luck.

Has anybody a config for Rails 6?

Upstream into leaflet.js

Hello, great work on this package. This is super useful. We have worked around that limitation in various way but your approach is much nicer.

Have you considered contributing this to LeafletJS core?

cc @davidbrochart