React Leaflet - Marker image fails to load

Question

Issue

I'm using leaflet v1.7.1 and react-leaflet v3.0.5 in my React project.

When I try out the setup example in React Router's "Setup" documentation page, the marker icon becomes a broken image as circled in red below:

From the React Router's documentation, this is what the marker should look like:

Upon inspection, the src attribute of the <img> tag that holds the marker image should be https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png. However, upon inspection, my <img>'s src attribute turns out to be gibberish-looking:

Replication

I've created a new sandbox which contains my code:

Alternatively, follow these steps to replicate the issue:

npx create-react-app leaflet-test
cd leaflet-test/
npm i leaflet react-leaflet

Open the project in code editor. Go to App.js and use the following code:

import React from "react";
import "./App.css";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const styles = {
  mapRoot: {
    height: 400,
  },
};

export default function App() {
  return (
    <MapContainer
      style={styles.mapRoot}
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

npm start

I'm not sure whether I've set-up Leaflet wrongly in React or it's a bug from Leaflet or React Leaflet. Thanks in advance!

Maybe this thread will help you, good news is that its not your fault and it appears to be a common issue github.com/PaulLeCam/react-leaflet/issues/453 — FoundingBox
Thank you so much :D I've found a fix from that issue thread. — AnsonH

ghybs ghybs · Accepted Answer · 2021-01-17T13:55:41

For reference, this is due to webpack rewriting URL's in CSS, whereas Leaflet uses it to detect the paths to its icon images.

See the details in Leaflet issue #4968.

When using Leaflet through a CDN, the Leaflet CSS is not fiddled with, so it works correctly.

You can still use it through webpack, but you should either use only custom icons, or explicitly tell Leaflet where to find the images for its default icon:

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'),
});

I also made specifically a plugin for this case: 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.

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';

React Leaflet - Marker image fails to load

Issue

Replication

2 Answers