Unable to load icon

[dixitt5]

I'm able to load leaflet map onto my next js app because of this, thank you for that.

only one problem i'm facing is the marker icon is not showing up, rather looks like this:

[dixitt5]

I would be grateful if you help me overcome this :)

[colbyfayock]

hey @dixitt5 i just loaded up the application and am unable to reproduce this issue. are you getting any errors aside from the missing image?

[dixitt5]

@colbyfayock No, everything is working fine besides the marker icon.

[sebastiancrossa]

running into the same issue

[colbyfayock]

@sebastiancrossa are you simply spinning up the starter from scratch? are you doing anything else? what browser?

[acdoussan]

I had the same problem, I pulled code out of here into my own project, and the icon wasn't loading.

What i was missing is the webpack config in the next.config.js file. ref:

next-leaflet-starter/next.config.js

Line 14 in 8a7d689

to: path.resolve(__dirname, 'public', 'leaflet', 'images')

For whatever reason my next config was a mjs file, so I had to make a couple of tweaks to get it to work. Pasted below. Hope this helps.

import * as path from 'path';
import { fileURLToPath } from 'url';
import CopyPlugin from 'copy-webpack-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.mjs");

/** @type {import("next").NextConfig} */
const config = {
  webpack: (config) => {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: 'node_modules/leaflet/dist/images',
            to: path.resolve(__dirname, 'public', 'leaflet', 'images')
          },
        ],
      }),
    )
    return config
  }
};

export default config;

[colbyfayock]

oooo @dixitt5 @sebastiancrossa can you see if this resolves your issues as well?

perhaps it makes sense for me to add a comment near where the images are being referenced to help point to this

[p0zi]

Since we request images from public dir, paths should start with "/" in file "src/components/Map/DynamicMap.js":

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