No marker icon when drawing a marker on deployed website.

[natedx]

As far as I know, this affects Geoman-Pro, which you can observe with the official Leaflet-Geoman Demo. This is very painful to use for new users...

On our deployed websites on which we use Geoman-Pro, when drawing new markers, the marker icon doesn't display properly. Additionally, the marker icon appears correctly when serving website locally in dev mode (using vite dev), but not when serving a production build locally (using npx serve)

Steps to reproduce :

1. Go to https://geoman.io/demo/leaflet
2. Draw a marker using the UI
3. Notice that no icon appears, only the caption "Marker" surrounded by a box.

[mscno]

Hi @natedx ,

Thanks for flagging this. This is an issue that can occur when building a site that contains a Leaflet map using a modern bundler (Vite, Webpack etc.). These bundlers change the CSS link paths during the CSS asset optimization and this can result in broken links. This is an issue with how Leaflet icons are handled during a build process and not specifically related to Geoman.

There are two ways to fix this:

1) You can use the https://www.npmjs.com/package/leaflet-defaulticon-compatibility package. It handles default icons in bundler compatible way.

Basically you run:

npm install leaflet-defaulticon-compatibility --save

and change your imports from

  import "leaflet/dist/leaflet.css"
  import "@geoman-io/leaflet-geoman-pro/dist/leaflet-geoman.css"
  import L from "leaflet"
  import "@geoman-io/leaflet-geoman-pro"

to

  import "leaflet/dist/leaflet.css"
  import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css" // Re-uses images from ~leaflet package
  import "@geoman-io/leaflet-geoman-pro/dist/leaflet-geoman.css"
  import L from "leaflet"
  import "leaflet-defaulticon-compatibility"
  import "@geoman-io/leaflet-geoman-pro"

2) Alternatively you hardcode the icons yourself by adding this below your leaflet import statements:

  import icon from "leaflet/dist/images/marker-icon.png"
  import iconShadow from "leaflet/dist/images/marker-shadow.png"

  let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow,
  })
  L.Marker.prototype.options.icon = DefaultIcon
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: icon,
    iconUrl: icon,
    shadowUrl: iconShadow,
  })

Let me know if this works for you.

P.s. we recently changed the built pipeline on the https://geoman.io site and got hit by this bug ourselves, thanks for pointing this out 👍 . I fixed it using 1) above.